我是白天！

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

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

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

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


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 "32" }}" 
  height="{{ .Get "height" | default "32" }}" 
  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;
}

在此之前