Hugo

昨天抄来改改一篇很长的 cc 教程，里面有不少图片，发现我的主题似乎没法点击放大图片，于是求助 gemini3 实现方式 用Hugo Render Hook（渲染钩子），它接管了 Markdown 中图片语法  的渲染过程。 用 fancybox 库实现图片放大之类的 代码 layouts/_default/_markup/render-image.html 修改渲染逻辑 [html] 显示已折叠代码（40 行） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 {{- /* 1. 解析 Markdown 里的图片路径 */ -}} {{- $u := urls.Parse .Destination -}} {{- $src := $u.String -}} {{- /* 2. 如果不是绝对路径（如 http://...），则尝试在资源中查找 */ -}} {{- if not $u.IsAbs -}} {{- $path := strings.TrimPrefix "./" $u.Path }} {{- /* 3. 尝试从“页面资源”或“全局资源”中查找该图片 */ -}} {{- with or (.PageInner.Resources.Get $path) (resources.Get $path) -}} {{- /* 4. 如果找到了，获取它在网站最终生成的正确相对链接 */ -}} {{- $src = .RelPermalink -}} {{- /* 5. 假如原链接带参数(?size=small)或锚点(#top)，把它们拼回去 */ -}} {{- with $u.RawQuery -}} {{- $src = printf "%s?%s" $src . -}} {{- end -}} {{- with $u.Fragment -}} {{- $src = printf "%s#%s" $src . -}} {{- end -}} {{- end -}} {{- end -}} {{- /* 6. 构建 img 标签属性：合并默认属性和自动生成的属性 */ -}} {{- $attributes := merge .Attributes (dict "alt" .Text "src" $src "title" (.Title | transform.HTMLEscape) "loading" "lazy") -}} <div class="post-img-view"> <!-- href: 指向图片大图的链接（Fancybox 需要知道点开后显示什么） data-fancybox="gallery": 告诉 Fancybox JS 插件，这个链接要用灯箱打开，而不是跳转页面 --> <a data-fancybox="gallery" href="{{ $src }}"> <img {{- range $k, $v := $attributes -}} {{- if $v -}} {{- printf " %s=%q" $k $v | safeHTMLAttr -}} {{- end -}} {{- end -}}> </a> </div> layouts/partials/extend_head.html 引入 fancybox 资源 ...

新logo 叫 gpt 给我画了个 logo，元素就是姓名首字母啦，还是蛮喜欢的 本次博客换了个主题和评论系统，参考文章放在末尾了。算是找到比较靠谱的几篇文章。由于我使用较新的版本，所以并不是能很好的复现文章中的效果，不过也足够满意了 装修点 原先使用hugo-theme-stack 主题是由于接触 hugo 的教程中使用的就是这个，为了避免不必要的麻烦，初次基本都是按部就班复刻教程为主，这次心血来潮还是想换一个，挑了挑就觉得 papermod 不错，简单不复杂，不是很爱花哨的，但是也不想博客太丑了点 评论区 原先为了自部署，用了 waline，结果发现 papermod 没有直接支持。由于我前端功力不够，又不会 go，在 gpt-5 的帮助下也没成功用上，只能放弃用个简单的，挑了挑还是选择Giscus Hugo博客系统添加Giscus评论功能 - Whohhの博客 参考这篇文章倒是一点困难没有就完成了，只是还是想要有自己部署的心里才舒服，不明白这是什么心态，精力有限，现在博客是无人问津的状态，也不需要操心这件事情 便于阅读 Mermaid图 这个还是特别有用的，尤其是在 LLM 的帮助下，不少文章中画一个 markdown 中能渲染的流程图框架图之类的变得异常轻松 以下摘用自台运鹏大佬的文章 Mermaid js 可以可以让我们用代码的方式画流程图（如上图），在文章的概念比较多或者关系复杂时，流程图就可以让读者更容易看懂，故而也引入了 mermaid 的实现 首先创建 layouts/_default/_markup/render-codeblock-mermaid.html，写入以下内容： 1 2 3 4 5 <!-- 因为正常写会有 ```meraid ... ``` --> <pre class="mermaid"> {{- .Inner | htmlEscape | safeHTML }} </pre> {{ .Page.Store.Set "hasMermaid" true }} 这样就可以将 mermaid 这种特殊的 codeblock 加入渲染机制里，同时设置 hasMermaid 为 true，方便后面判断是否加载 mermaid js。接着我们创建 layouts/partials/mermaid.html，来让 mermaid js 对我们写的代码进行渲染 ...

参考 把 Obsidian 变为 Hugo 博客的集成管理平台 | 胡说 参考这位佬的文章，一共三篇。主要以下几个点 实现 关于我的博客是使用 github 管理，但是部署是在 cloudflare 上。这里原先的流程是这样的 编辑器打开仓库 （可选）git pull hugo new post/xxx.md 编辑 md，往往是我在别的编辑器（Obsidian） copy 进来的 编辑完后 git commit 然后 git push 这样的流程最大的问题出现在 写博客的位置和发布时的割裂 这也是我抓紧时间切换 md 编辑器到 Obsidian 的原因。插件万岁 使用插件有以下 Auto Link Title 粘贴链接自动获取标题 Charts 生图 Dataview 查看数据 Emoji Toolbar 挑选 emoji Git 进行 git 管理 Homepage 制作看板页 Image auto upload 结合 picgo 实现粘贴图片自动上传 QuickAdd 制作按钮 具体参考文章开头引用的 大佬的博客 有几个坑 倒是有热心网友在评论区提到了。看一下即可。

惯例先放网址，我这里参考了 好多，但是终究没有能抄的作业 hugo-theme-stack/config.yaml at master · CaiJimmy/hugo-theme-stack · GitHub 独立部署 | Waline waline/assets/waline.sqlite at main · walinejs/waline · GitHub 知乎 # 博客建站10 - 选择博客评论系统 系统架构 网站示例： Ray Blog 服务器: Cloudflare pages + 一台 aws 白嫖的服务器独立部署 waline 服务器系统： Ubuntu 24.04 LTS 博客框架： The world’s fastest framework for building websites 网站主题： Stack | Card-style Hugo theme designed for bloggers 安装 waline 这里根据官方文档独立部署目录下的指引 以及评论区的提示，我就不走多余的路。直接拉取官方镜像 直接写 docker-compose.yml 显示已折叠代码（17 行） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 services: waline: container_name: waline image: lizheming/waline:latest restart: always ports: - 8360:8360 volumes: - ${PWD}/data:/app/data environment: TZ: 'Asia/Shanghai' SQLITE_PATH: '/app/data' JWT_TOKEN: 'Your token' SITE_NAME: 'Your site name' SITE_URL: 'https://example.com' SECURE_DOMAINS: 'example.com' AUTHOR_EMAIL: 'mail@example.com' 这里配置的环境变量似乎都没怎么用上。说实话我没看明白这个配置。直接运行后。在上一篇文章提到的 nginx 中进行反代。 ...