小心!野兽凶猛!
我是白天!
世界上最好的也是最坏的一只狗,这里是狗的地盘!
内容物包括:狗和狗看过的玩过的各种东西,可能是书影音也可能是去过的地方,和一些狗的大烧烤.
网友们评价说我的博客内容还挺独特的,真的吗?其实我也不知道,但问题不大,总之这是我的地盘。
如果你想联系我/想和我换友链可以选择【在联邦宇宙私信我】或者发送邮件给:kuwangduck@duck.com,我会争取在两个月内回复你的
。
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短代码
我就是为了这个玛德琳包的这顿饺子
抄的作业,然后找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">
- 使用
:=
赋值$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);
}
再看一遍我们玛德琳

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;
}