我是白天！

世界上最好的也是最坏的一只狗，这里是狗的地盘！

内容物包括：狗和狗看过的玩过的各种东西，可能是书影音也可能是去过的地方，和一些狗的大烧烤.

网友们评价说我的博客内容还挺独特的，真的吗？其实我也不知道，但问题不大，总之这是我的地盘 madeline.gif

如果你想联系我/想和我换友链可以选择【在联邦宇宙私信我】或者发送邮件给：kuwangduck@duck.com，我会争取在两个月内回复你的。

oh忘记放了，这里可以放置一个：

我的博客讯息

昵称：此地有野狗出没

简介：小心！野兽凶猛！

头像：https://luoshui.icu/img/%E7%8B%97.jpg

链接：https://luoshui.icu/


2025-05-26

字数统计

之前用的塔塔的作业（实在是找不到了orz）直接照搬过来一直都没法正确计算每一篇的正确字数，找g老师给我查了很多遍都很失败，最近看到朋友的这则装修博客中提到了我使用的主题是把字数统计显示的数字作为一个 partial 导入的，所以我只要修改word-count.html即可，一下打开了我的思路：完全可以外搭一个新的文件来统计纯文本的字符数嘛！

这是因为.WordCount 是 Hugo 的内置参数，它是根据英文的词语（word）划分统计的，按空格切割，而中文段落中空格很少，整段可能只被识别为一个词或者少数几个词，所以这就是我之前的字数统计一直都只有几个字的原因了。

代码压缩中
  1. 创建文件layouts/partials/word-count.html，用以统计字数
{{ $content := .Content }}
{{/* 取得目前頁面的 HTML 原始內容（.Content 是含 HTML 標籤的內容） */}}

{{ $ignorePattern := `<div class="db-card-abstract">[\s\S]*?</div>` }}
{{/* 定義一個正則表達式，用來匹配需要忽略統計的區塊
     這裡是 Neodb 卡片的簡介部分（class 為 db-card-abstract 的 <div> 區塊） */}}

{{ $ignoredContentMatches := findRE $ignorePattern $content }}
{{/* 使用 findRE 函數從原始內容中找出所有符合該正則的 HTML 區塊，回傳陣列 */}}

{{ $ignoredContent := "" }}
{{/* 初始化被忽略區塊的合併內容為空字串 */}}

{{ range $ignoredContentMatches }}
  {{ $ignoredContent = printf "%s%s" $ignoredContent . }}
{{ end }}
{{/* 將所有匹配的 HTML 區塊串接成一段完整的被排除文字 */}}

{{ $plainIgnoredContent := plainify $ignoredContent }}
{{/* 將排除的 HTML 轉為純文字，去掉 HTML 標籤 */}}

{{ $ignoredWords := len (split $plainIgnoredContent "") }}
{{/* 將純文字按「每個字元」切分，然後統計字數（這種方式適合中文，因為中文字一般一字一義） */}}

{{ $adjustedWordCount := sub .WordCount $ignoredWords }}
{{/* 從原始字數（Hugo 預設是 WordCount，詞數）中減去忽略區塊的字元數，得到「實際需要統計的字數」 */}}

<span>
  {{- i18n "article.word_count" $adjustedWordCount | markdownify | emojify -}}
</span>
{{/* 使用 i18n 系統插入國際化字串（例如 "本文共 xxx 字"），其中 xxx 是實際字數
     然後將其轉為 markdown 支援格式與表情符號格式（如果設定有 emoji） */}}

2025-06-27更新

更新之后的关键点在于需要在config.toml设定中增加一段

defaultContentLanguage = "zh"
# 預設語言設定為「zh」（中文）。這會影響網站初始載入使用的語言、i18n 語系檔載入等。
# 如果你只有一種語言內容，這個值會是主要使用語言。

languageCode = "zh-CN"
# 設定網站的語言代碼，這裡是「簡體中文（中國）」，用於 <html lang="zh-CN"> 之類的地方，
# 有助於 SEO 和螢幕閱讀器等工具正確理解語言環境。

hasCJKLanguage = true
# 告訴 Hugo 你的網站內容包含 CJK（中日韓）語言。
# 設定為 true 會讓 Hugo 在統計字數時以「字元數」而非「單詞數」計算，這對中文特別重要。
# 建議中文網站一定要啟用這個選項，以獲得正確的 `.WordCount` 結果。

和在根目录创建i18n/zh.toml文件，内容输入

[article]
word_count = "字數統計：{{ . }} 字"

前两者和新创的文件是为了使用新作业里的 {{- i18n "article.word_count" $adjustedWordCount | markdownify | emojify -}}，最后一个是为了让统计字数不至于按照英文逻辑走。

  1. 修改之前使用.wordcount代码的部分

    比如以下是我用以统计整个博客的总字数的footer.html，这个代码中也将neodb的卡片字符删掉了（实际上我这个博客还没添加这个内容呢，以后也不一定会添加，但懒得删了）

  {{/* 初始化總字數變數，初始為 0 */}}
  {{ $totalWords := 0 }}

  {{/* 遍歷所有 Section 為 "blog" 的內容頁面（也就是 content/blog/ 裡的文章） */}}
  {{ range (where .Site.RegularPages "Section" "blog") }}
    
    {{/* 取得頁面 HTML 原始內容（含所有 div 等標籤） */}}
    {{ $content := .Content }}

    {{/* 使用正則表達式匹配所有需要被排除計算的區塊，例如 Neodb 的摘要區（class="db-card-abstract"） */}}
    {{ $ignorePattern := `<div class="db-card-abstract">[\s\S]*?</div>` }}
    
    {{/* 抓出所有匹配項 */}}
    {{ $ignoredMatches := findRE $ignorePattern $content }}

    {{/* 把所有匹配項合併成一個 HTML 字串 */}}
    {{ $ignoredContent := "" }}
    {{ range $ignoredMatches }}
      {{ $ignoredContent = printf "%s%s" $ignoredContent . }}
    {{ end }}

    {{/* 去除 HTML 標籤，留下純文字 */}}
    {{ $plainIgnored := plainify $ignoredContent }}

    {{/* 計算忽略區塊的字符數（以字元為單位，適合中文） */}}
    {{ $ignoredChars := len (split $plainIgnored "") }}

    {{/* 從原始字數中扣除忽略區塊的字數，得到調整後字數 */}}
    {{ $adjusted := sub .WordCount $ignoredChars }}

    {{/* 將該頁面的字數加總進總字數 */}}
    {{ $totalWords = add $totalWords $adjusted }}
  {{ end }}

  {{/* 計算總字數的千字（k）顯示，例：12345 -> 1.3k 
       步驟：
       1. 除以 100 得到精確值（例：12345 -> 123.45）
       2. math.Ceil 向上取整（123.45 -> 124）
       3. 再除以 10 得到小數一位的 k 值（124 -> 12.4）
  */}}
  {{ $wordK := div (math.Ceil (div $totalWords 100.0)) 10.0 }}

  <!-- 顯示統計字數與文章數 -->
  &nbsp;&nbsp;趾高气昂地留下了<font color="#3583b7">&nbsp;{{ $wordK }}k&nbsp;</font>字和
  <font color="#3583b7">{{ len (where .Site.RegularPages "Section" "blog") }}</font>篇文章

这个统计只包括了 Section 为 blog 的页面，不会包括 about 、friend等其他页面。关键在这一句：

{{ range where .Site.RegularPages "Section" "blog" }}

也即只遍历内容目录 content/blog/ 下的文章。

2025-05-11

多图排版&图片左浮动

没有米娜的作业我该怎么活啊——

多图排版的CSS直接照抄这个作业，非常简单，只要把css加上，然后把多图放进一个<p></p>里就行（人话说就是不要空行）

图片左浮动是小鱼的作业！我也非常偷懒地直接照抄，和楼上一样一字未改 alt

代码压缩中

 
/* 多图排列 */
.post-content p:has(> img:nth-child(2)){column-count:2;column-gap:8px;margin:6px 0;}
.post-content p:has(> img:nth-child(3)){column-count:3;}
.post-content p:has(> img:nth-child(4)){column-count:4;}
.post-content p:has(> img:nth-child(5)){column-count:5;}
.post-content p:has(> img:nth-child(6)){column-count:4;}
.post-content p:has(> img:nth-child(2)) img{display:inherit;}
.post-content p:has(> img:nth-child(6)) img{margin-bottom:8px;}

/* 图片左侧浮动 */
img.float-img50 {
  float: left;
  width: 40%;
  margin-right: 1em !important;
  margin-bottom: 0.5em !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
/* 备注是鱼鱼原话：插入图片的时候专门用HTML写就可以了：<img src="" class="float-img50" >。为了防止文字不够多、图片浮动时超出太多的情况，可以在文字结束后的段落里再加一个清除浮动的div：<div style="clear: both;"></div>。这样就不会导致布局混乱了*/

2025-06-10更新

这个代码会有一点问题，就是如果输出的html中有超过两个子元素（比如两段<strong>之类的），后面再出现一个会输出成img的元素（比如emoji）就会突然变成三栏式布局，可以考虑给多图排版加一个class元素，然后在上传图片的时候写好class；当然也可以像我一样，面对困难，就被困难打倒。

2025-06-12更新

抄了新作业，简单地说就是通过render-image 让 Hugo 自己给图片加 class 。

2025-03-17

video短代码

是的这个短代码也是为了们蔚蓝 alt （是的这是新表情）

主要是为了让大家看看Theo夸我。Theo：我那是夸你吗？

总之代码非常简单，顺便紧急修复了一下没有移动端适配的状态：

代码压缩中

 
{{/*  layouts/shortcodes/video.html */}}
<video controls width="600">
    <source src="{{ .Get 0 }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>

使用的时候记得路径是static/videos/example.mp4，根目录下的

加了一下css

/* video短代码 */
.responsive-video {
  max-width: 68%; /* PC 端适配 */
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .responsive-video {
    max-width: 100%; /* 在移动端生效 */
  }
}

img短代码

非常简单不用引用外部链接的传图方式，主要是方便我设置图片大小用的，不刻意调大小的时候还是爱用直接引用。

代码压缩中

 
{{/*  layouts/shortcodes/img.html */}}
<img src="{{ .Get 0 }}" width="{{ .Get 1 }}" height="{{ .Get 2 }}">

使用的时候记得路径是static/images/example.jpg，也是根目录下的。

2025-03-10

修改代码框CSS

嫌弃默认的代码框太黑太难看所以忍不住就想改，虽然改后也很难看但至少和主题颜色是接近的。

由于我的主题是我自己手搓的所以主题的css里没有关于pre即```所框出来的代码块以及code即``所框出来的小代码的模块。

代码压缩中

 
/* 代码块样式（用于 Markdown 三个反引号 ``` 包裹的代码） */
pre {
  background-color: #ffffff !important;  /* 设置代码块的背景颜色 */
  padding: 1rem;  /* 代码块内部的边距，增大可使代码内容更居中 */
  border-radius: 12px;  /* 设置代码块的圆角，使边框更加平滑 */
  font-size: 14px;  /* 代码文字的大小 */
  line-height: 1.5;  /* 行高，增加可读性 */
  overflow-x: auto;  /* 让代码块在内容过长时可以横向滚动，防止超出页面 */
  white-space: pre-wrap;  /* 让代码内容自动换行 */
  max-height: 300px;  /* 你可以根据需要调整高度 */
  overflow-y: auto;   /* 超出时出现垂直滚动条 */
}


/* 内联代码样式（用于 Markdown 单个反引号 ` 包裹的代码） */
code {
  font-family: "Fira Code", "JetBrains Mono", monospace;  /* 指定代码字体（常见编程字体） */
  font-size: 14px;  /* 内联代码的字体大小 */
  background-color: rgb(225, 225, 225);  /* 设置内联代码的背景颜色 */
  color: #141414;  /* 设置内联代码的字体颜色 */
  padding: 2px 5px;  /* 让内联代码有一些内边距，使其不贴着其他文本 */
  border-radius: 4px;  /* 设置内联代码的圆角，使其更美观 */
}

.highlight .chroma {
  color: #212223 !important; /* 让所有代码默认变成浅灰 */
}

.highlight .chroma .nf, /* 函数名 */
.highlight .chroma .kt, /* 关键字 */
.highlight .chroma .s { /* 字符串 */
  color: #922f0b !important; /* 让这些元素变红 */
}

因为默认的chroma得关掉，需要在config.toml中加入如下内容：

#移除 Chroma 颜色，让代码颜色生效
[markup]
  [markup.highlight]
    noClasses = false

加入了上下滑动的代码块以方便阅读，原本想再加一个一键复制的，但拼尽全力也没有抄明白这玩意到底怎么加，好吧那我先搁置（沉默

emoji短代码

我就是为了这个玛德琳包的这顿饺子 madeline.gif

抄的作业，然后找G老师微调了一下：

代码压缩中

 
{{/*  layouts/shortcodes/emoji.html */}}
{{ $name := .Get "name" }}
<img 
  src="/img/emoji/{{ $name }}" 
  title="{{ .Get "title" | default $name }}" 
  alt="{{ .Get "alt" | default $name }}" 
  width="{{ .Get "width" | default "16" }}" 
  height="{{ .Get "height" | default "16" }}" 
  style="vertical-align: sub;" 
  class="emoji">
G老师解答的修改原因是：
  • 使用 := 赋值 $name 变量。
  • 修正 src 的拼接方式，确保正确生成 imgemojiXXX。
  • 统一 title、alt、width、height，使用 .Get "xxx" | default "值"，避免 with 过长的嵌套。
  • style 用双引号包裹，确保 CSS 解析正确。

这样可以确保短代码更加稳健，Hugo 可以正确解析。你可以试试看！

我的这个短代码的图片应该配置在static/img/emojis/ 目录，以及纯抄袭的放大表情css如下：

代码压缩中

 
/* emoji */
.emoji {
  transition: ease-out .6s;
  vertical-align: sub; /* 维持表情对齐 */;
}
.emoji:hover {
  transform: scale(1.75);
}

再看一遍我们玛德琳 madeline.gif

celeste.jpg

2025-03-03

About Me

是的博客运营两年半之后我第一次出现了About Me界面，但其实不知道说啥，干脆拿来作更新日志看吧。

这玩意蛮简单的，主要是整了个type: "about"，并且在主题文件夹里的\layouts\about整了个single.html

代码压缩中

 
<!DOCTYPE html>
<html lang="en">
<head>
  {{- partial "head.html" . -}} <!-- 引入 head 部分 -->
</head>
<body>
  <div id="single-post">
    <div class="content-wrapper">
        <!-- 侧边栏目录 -->
        <aside class="toc">
          <h3>更新日志</h3>
          {{ .TableOfContents }}
        </aside>

      <!-- 文章内容 -->
      <article class="post">
        <header>
          <h1 class="post-title">{{ .Title }}</h1>
        </header>

        <div class="post-content">
          {{ .Content }}
        </div>
      </article>
    </div>
  </div>

  {{- partial "footer.html" . -}} <!-- 引入 footer 部分 -->
</body>
</html>

基本和post保持一致，只是增加了侧边栏目录这一个玩具，同时把date、categorie、tag都删掉了保证界面的干净。

侧边目录

目前是更新日志专用，使用方法很简单，主要是在想要使用的文章种类的single.html里添加：

代码压缩中

 
<aside class="toc">
  <h3>目录</h3> 
  {{ .TableOfContents }}
</aside>
<!-- 目录可替换成任意标题 -->

再加点css

/* ========== 页面布局 ========== */
.content-wrapper {
  display: flex; /* 让文章和目录栏并排显示 */
  justify-content: space-between; /* 让两者分布在左右 */
  max-width: 1100px; /* 限制最大宽度 */
  margin: 0 auto; /* 居中对齐 */
  padding: 0px;
}

/* ========== 侧边目录样式 ========== */
.toc {
  width: 100px; /* 目录的固定宽度 */
  max-height: 80vh; /* 限制目录的最大高度 */
  overflow-y: auto; /* 如果目录内容超出范围，则显示滚动条 */
  background: #f9f9f9; /* 目录背景颜色 */
  border: 1px solid #ddd; /* 目录边框 */
  padding: 10px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  font-size: 14px; /* 目录文本大小 */
  position: sticky; /* 让目录在滚动时保持可见 */
  top: 10px; /* 目录固定在屏幕顶部 100px 处 */
}

/* ========== 目录中的列表样式 ========== */
.toc ul {
  list-style: none; /* 移除默认的列表样式 */
  padding-left: 10px; /* 缩进，使层级关系更明显 */
}

.toc a {
  text-decoration: none; /* 移除超链接下划线 */
  color: #007aff; /* 目录链接颜色 */
  display: block; /* 让每个链接单独占据一行 */
  padding: 5px 0; /* 增加上下间距 */
}

.toc a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* ========== 文章内容区域 ========== */
.post {
  flex: 0.98; /* 让文章内容占据剩余空间 */
  max-width: 1500px; /* 限制文章内容的最大宽度 */
  padding-right: 0px; /* 与目录栏之间的间距 */
}

/* ========== 响应式设计：移动端优化 ========== */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column; /* 小屏幕上让内容垂直排列 */
  }

  .toc {
    position: relative; /* 取消固定位置，跟随页面滚动 */
    width: 80%; /* 让目录栏宽度铺满 */
    max-height: none; /* 允许目录展开完整显示 */
    margin-bottom: 20px; /* 与文章内容之间增加间距 */
  }
}

其实想要整个手机端可折叠的目录，但g老师实在是没让我抄明白，所以先搁置，以后再改也来得及。

chatbox短代码

其实给g老师说的是类似于便签的形制，或者有点类似于对话框的样式，总之名字不重要，展示效果类似于：

这是标题
这是内容

代码压缩中

短代码创建很简单，在主题文件夹里的\layouts\shortcodes创建一个对应的名字的html文件就好，我的文件叫chatbox.html，内容为：

<div class="chatbox">
    <div class="chat-header">{{ .Get 0 }}</div>
    <div class="chat-content">{{ .Inner | markdownify }}</div>
  </div>

改了一下css：

/*对话框短代码 */
.chatbox {
  max-width: 600px;
  background: #f1f1f1;
  border-radius: 10px;
  padding: 10px;
  margin: 20px auto;  /* 让它在页面中居中 */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  text-align: left; /* 保持文本左对齐 */
}

.chat-header {
  font-weight: bold;
  background: #c5c8cb;
  color: rgb(84, 78, 78);
  padding: 5px 10px;
  border-radius: 10px 10px 0 0;
}

.chat-content {
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
}

在此之前