待定

博客整体布局

目前博客采用『papermod』主题。主题主要参考 置顶 hugo博客搭建 | PaperMod主题 | Sulv’s Blog和 Hugo+PaperMod 双语博客搭建 Home-Info+Profile Mode - YUNYI BLOG 进行修改

博客内容共分为两块:

  1. 「技术」, 主要是自己日常学习的笔记记录；
  2. 「日常」, 记录一些日常或者是观点输出 (后续考虑将输出部分单独成列)

美化

修改代码块高亮

在config.toml 文件中加入以下部分的设置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

markup: # Markdown和代码高亮设置

  highlight:

    codeFences: true # 启用代码围栏，支持代码高亮

    guessSyntax: true # 自动猜测代码的语法

    lineNos: true # 显示行号

    style: solarized-dark # 代码高亮的样式，选择solarized-dark主题

Responsive Image

image.png

style 可以进行设置, 有些主题代码的颜色不太好看, 或者是在黑暗模式下会遮挡部分这点要注意, 可以分别调整的好像, 另外好像还有点设置, 但是我忘记在哪里引入了 /(ㄒoㄒ)/~~

替换全局字体

主要参考这篇博文Hugo博客自定义字体 | Sulv’s Blog

将全局的字体替换为霞鹜文楷屏幕阅读版

其中有个问题，我按照上述博文引用字体，发现页面上一直无法渲染成功，最后发现自己定义字体名字并未成功，要点击下载的 ttf 文件，其中标题框对应的字体名字才能成功，如果有跟我一样无法成功引用的朋友可以按照这个方法试一试。Responsive Image

image.png
Responsive Image
image.png

后续因为想字体稳定一些，我选择了将字体存储在存储桶中，然后用 cdn 加速分发这个字体。

如果有朋友考虑用这种方法的话可以考虑字图网的公益字体 cdn，✨中文网字计划-提供便捷实用的全字符集中文渲染方案里面有丰富的字体可供选择。同时我已经将霞鹜文楷屏幕阅读版提交到了对应的 issue，该站点的站长老哥回复说会尽快上线，对此表示衷心的感谢🙏

功能

短代码

短代码添加了『B站视频引用』，『油管视频引用』和『站内文章引用』 参考文章 Hugo博客自定义shortcodes | Sulv’s Blog

其中站内文章连接访问，我之前曾经出现过错误. 运行 hugo serve 的命令会卡住不动Responsive Image

image.png

1
2
3
4
5
6
7
8
9

D:\Obsidian\Blog>hugo server --gc --disableFastRender --cleanDestinationDir

port 1313 already in use, attempting to use an available port
Watching for changes in D:\Obsidian\Blog\{archetypes,assets,content,i18n,layouts,static}
Watching for config changes in D:\Obsidian\Blog\config.yaml
Start building sites …
hugo v0.134.1-2f89169baa87a9db47e288b60705f4e99e21a945+extended windows/amd64 BuildDate=2024-09-05T10:17:50Z VendorInfo=gohugoio

WARN  deprecated: .Site.Social was deprecated in Hugo v0.124.0 and will be removed in a future release. Use .Site.Params instead.

这样一个情况的出现是因为 A 文章中引用了 B 文章，B 文章中引用了 A 文章，造成了一个死循环。只有单向引用的情况不会出现问题。

上述代码功能不再使用，感觉不太方便，ob 和 hugo 主题两边不通用，要是万一想取消个文件夹很多东西得变化。

短代码添加 『admonition』 参考如何移植HUGO Loveit主題的admonition shortcodes | 懶懶部落 admonition，因为目前工作流是 obsidian 作为编辑器，并且非常凑巧的是 obsidian 里面也有一个 callouts 的插件用于插入 admonition，所以希望整个工作流能顺畅一些，两边都尽可能不要有太多格式上的变动，我搜索了一下选择适配了 ob 版 admonition 格式的方案

添加 mermaid 作图

Hugo博客添加mermaid作图 | Sulv’s Blog

添加 LaTeX 语法显示

Hugo博客添加LaTeX语法支持 | 🚀 田少晗的个人博客

博客目录放在侧边

Hugo博客目录放在侧边 | PaperMod主题 | Sulv’s Blog

添加 Twikoo 评论系统

2024.9.20

参考这两篇文章 Hugo博客添加Twikoo评论 | Sulv’s Blog 和云函数部署 | Twikoo 文档 教程中使用 Vercel 进行搭建的，我考虑了一下使用 netify 进行搭建，因为 netify 的访问（国内）有时候会比 Vercel 和 CloudFlare 好，为了方便国内外的都可以更顺利地看到评论，最终选择了 netify。

添加站点统计

使用 busuanzi 添加站点统计不蒜子 - 极简网页计数器 2024.9.26

使用 netify+Supabase 搭建 Umami 进行站点流量统计用 Umami 搭建自己的数据分析平台 - 柃夏chapu

2024.9.28

设置 umami 忽视本地 localhost 的访问数据 –> umami设置不收录本地localhost数据