✦ 粉刷匠02 ✦ 软装小队登场

再次：代码基本是从 GPT 复制粘贴，能用就行

显示文章内目录

文章内目录是 Hugo 本身就支持的功能，在 congfig.toml 中添加：

[parmas]
tocInline = true  # 显示文章内目录

[markup]
  [markup.tableOfContents]
    endLevel = 2  # 我希望只显示二级目录
    ordered = false
    startLevel = 2

然后在 single. html 里的 {{.Content}} 之前添加以下代码，再在 css 中调整一下样式就好了。

{{ if .Site.Params.tocInline }}
<div id="toc">
{{ .TableOfContents}}
</div>
{{ end }}

本来想做这样的滚动目录：为Hugo主题添加动态跟随目录Scrollspy效果 | 砖瓦匠杜重，不过暂时没想好怎么塞进页面排版，暂时搁置。

给加粗和倾斜上个色

对文字加粗和倾斜的显示效果不太满意，于是改成用不同颜色表示，同样可以与普通文本产生区分。

/*修改加粗字体样式*/
.content strong { 
color:#65a30d;
font-weight: normal;
}
/*修改斜体样式*/
.content em,i { 
color:#90909e;
font-style:normal;
}

更改后效果：加粗倾斜

把图片塞进文章需要几步

用 Github + PicX 搭建图床

本地图片加载速度比较慢，markdown 里引用还要好好给图片命名并写路径，不喜欢；目光看向了图床，直接用链接来插入图片。因为我不会放很多图片加上本站大概没什么流量，看了一圈决定直接拿 Github 仓库来做图床，但是推送图片的过程看起来有点麻烦，还好也有软件简化这个过程。

很多教程用的 PicGo，需要下载，不想安装软件，pass。

找到了 PicX ，网页版图床工具，2020 年的开源项目近期也有更新，应该比较靠谱，并且配置和使用都很方便：

按照使用手册的步骤生成 Github token 并复制，前往在线使用，选择 token 登陆，填入刚刚生成 token 点击一键配置，会自动创建仓库，完成配置后会自动跳转到图片上传页面，支持复制粘贴，上传后会自动复制图片链接到剪贴板。

图床设置 ->图片链接格式设置，打开，选择 Markdown，就可以在编辑时直接粘贴进 obsidian 了。需要的话还可以给在设置里给图片添加水印。

根据使用手册中图片链接规则配置的说明，图床设置 ->图片链接规则配置选择了 Github Pages，国内外 IP 都可以访问，稳定性好，只需要每次上传后再点一下右下角的【一键部署】 就好，也不麻烦。

测试了一下图片显示正常，最后把上传页面加入浏览器收藏夹，用 AI 给仓库写了个 Readme（大意就是本仓库图片所有权归我所有），收工！

去除照片的位置信息

发照片时不想包含拍摄的位置信息，不确定图床会不会处理，总之在 Hugo 里也隐藏一下，官方文档里就有 EXIF 数据的相关内容，在 config.toml 中加入以下设置，让 Hugo 在处理图像时不使用日期信息并忽略 GPS 坐标。

[imaging]
  [imaging.exif]
    disableDate = true
    disableLatLong = true

图文混排

通过在文章样式 article.css 中添加 .content img {} 的样式实现图文混排，代码来自：如何自定义 hugo 图文混排的图片展示位置 - 消夏錄，样式微调。马一下 markdown 内的写法：

#图片居右 ![alt >](url "title")
#图片居左 ![alt <](url "title")
#图片居中 ![alt ><](url "title")

代码块样式调整

去除滚动条并限制显示高度

依然是在 Rubber Duck’s Bizarre Adventure 看到的，链接失踪了把代码贴在这里，复制到设置代码块样式的 css 后面即可，我是在 style.css 中找到的。

/*隐藏滚动条*/
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}

加了一条 max-height: 250px; 来限制代码块的最大高度

代码块高亮样式

用显示网页源代码检查发现是代码输出时没有 <highlight> 标签，怪我没有在代码块标注语言……不标也可以，在 config.toml 中设置：

[markup. highlight]
	guessSyntax = true /* 自动判断语言并应用高亮样式，值为false时，不标注语言就不会套用高亮样式 */
    style = "nord" /* 选择喜欢的chroma样式 */

Chroma 样式已经集成在 Hugo 中，style 指定样式名称就可以，全部的样式可以在这里预览：Chroma Style Gallery

添加「返回顶部」按钮

代码来自 Rubber Duck’s Bizarre Adventure ，按钮被我改成了 font awesome 的箭头图标（整理时发现文章链接消失了（；゜０゜）。

新建一个 backtotop.html，代码全部放进去，保存，在 footer.html 中引用。

<!--返回顶部按钮 -->
<button onclick="smoothScrollTop()" id="back-to-top">
<i class="fas fa-angle-up"></i>
</button>

<!--返回顶部CSS -->
<style>
#back-to-top {
display:none;
position: fixed;
border:none;
bottom: 20px;
right: 55px;
width: 55px;
background-color:transparent;
font-size: 25px;
cursor: pointer;
color:#666666;
}
  
#back-to-top:hover {
color:#CC2A41;
}
</style>

<!--返回顶部JS -->

<script>
function backToTop() {
document.documentElement.scrollIntoView({
behavior: 'smooth',
})
}

window.onload = function () {
let scrollTop =
this.document.documentElement.scrollTop || this.document.body.scrollTop
let totopBtn = this.document.getElementById('back-to-top')
if (scrollTop > 0) {
totopBtn.style.display = 'inline'
} else {
totopBtn.style.display = 'none'
}
}
  
window.onscroll = function () {
let scrollTop =
this.document.documentElement.scrollTop || this.document.body.scrollTop
let totopBtn = this.document.getElementById('back-to-top')
if (scrollTop < 200) {
totopBtn.style.display = 'none'
} else {
totopBtn.style.display = 'inline'
totopBtn.addEventListener('click', backToTop, false)
}
}
</script>

鼠标点击烟花特效

在 ■■Loading：《hugo 装修日志 02》■■ - 天堂错误文件看到的，很喜欢，抄之。

更改字体：仓耳今楷

原主题是 JetBrains，本来很喜欢的，但添加文章后发现大段中文的效果不是很好！改之

用了 obsidian 里一直在用的仓耳今楷 02W04，字体官网标明是“允许个人非商业免费使用”，因为 ttf 文件较小，所以先直接放在 static 目录下，并在 font. css 中引用，引用代码如下。

@font-face {
font-style: normal;
font-family: "TsangerJinKai";
font-display: swap;
src: local("TsangerJinKai02W04"), url("../lib/TsangerJinKai/TsangerJinKai02W04.ttf") format("truetype");
}; 
#url要修改为字体文件的路径

但推送后字体加载速度还是略慢。后来看到了这个： Hugo站点Stack主题使用自定义字体，也许之后试试 CDN 引入提高加载速度。

自制主题配色

/assets/scss/colors 目录下复制一份 classic 样式改个名字叫 pp，设置喜欢的颜色， config.toml 里改成 colortheme = "pp"，收获一份清爽主题！

$color-background: #f1f6fe;
$color-footer-mobile-1: darken($color-background, 2%);
$color-footer-mobile-2: darken($color-background, 10%);
$color-background-code: darken($color-background, 2%);
$color-border: #9EB8D9;
$color-meta: #71717a;
$color-meta-code: lighten($color-meta, 10%);
$color-link: #fab6dd;
$color-text: #38383c;
$color-accent-1: #5a68df;
$color-accent-2: #ec4899;
$color-accent-3: #71717a;
$color-accent-4:#484a4f; /*单独给h3做个颜色*/
$color-quote: darken($color-accent-3, 10%);

结束咯！写点废话

从 11 号开始，缝缝补补七八天的装修过程居然两篇就写完了（难以置信脸）

应该还会继续慢慢折腾吧，shortcodes 还没接触，还有很多想玩的（瘫倒）

对自己说：还是要写啊！不能被装修掏空啊！你有自制力一点！

ㆆᵕㆆ…