Hugo | Memos

Hugo PaperMod 改变主题配色（代码块背景颜色）

Hugo PaperMod 主题的 Code block 背景 (background) 颜色总是黑色，然后我使用 F12 检查之后发现，黑色的代码块背景源自一个 CSS 变量 “hljs-bg” ，然后我通过 Google 查到了如何修改这个变量的颜色值: https://github.com/adityatelange/hugo-PaperMod/discussions/645 在网站（不是主题）中创建一个文件，例如 assets/css/extended/theme-vars-override.css 1 2 3 4 5 6 7 8 9 10 11 12 13 source ├──archetypes ├── assets │ └── css │ └── extended │ ├── emacs.css │ └── theme-vars-override.css ├── config ├── content ├── layouts ├── public ├── resources └── themes 在 theme-vars-override.css 里面添加以下内容： 1 2 3 4 5 6 7 8 9 10 11 :root { --theme: rgb(255, 255, 255); --entry: rgb(255, 255, 255); --primary: rgb(30, 30, 30); --secondary: rgb(108, 108, 108); --tertiary: rgb(214, 214, 214); --content: rgb(31, 31, 31); --hljs-bg: rgb(245, 246, 247); --code-bg: rgb(245, 246, 247); --border: rgb(238, 238, 238); } 重新生成网站就行，喜欢什么配色可以自己微调...

Hugo Hexo 添加音乐播放器

直接上代码，就完事了 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 <!DOCTYPE html> <html> <body> <style> .parent { margin-top:25px; position: relative; } .parent .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:100%; } </style> <div class="parent"> <audio controls class="child"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </body> </html>

Hugo Server 远程调试

hugo server 命令一般是在 127.0.0.1 启动服务，而使用以下命令就可以远端预览 hugo server 的结果 1 hugo server --bind=0.0.0.0 --baseURL={启动服务的机器的IP} 比如说我在服务器写了 passage ，在服务器 hugo server ，想在本地浏览器看到 server 效果，这时候 {启动服务的机器的IP} 就是服务器的 IP 我在内网远端预览 1 hugo server --bind=0.0.0.0 --baseURL=172.29.40.118

Migrate to Hugo

引言起初我是使用 Hexo+NexT 来搭建博客的，我对 Hexo 不满意的地方有两个，一个是生成速度，另外一个是依赖太多，以至于我都要把我的 Hexo 环境打包成 docker 分发到每一个写博客的机子。而 Hugo 就完美解决了这两个问题，可也并不是说 Hugo 毫无缺点。Hugo 最大的缺点是生态尚未完善，看着 github 上面那些 star 数量都不超过一千的主题实在是不太敢使用。但是 Hugo 的生成速度足以实时预览，这个是 Hexo 难以匹敌的。同时迁移成本也是我从 Hexo 迁移到 Hugo 的考虑之一，几乎没有迁移成本让我瞬间有了动力，要是说仅有的迁移成本，那也是 Hexo 的站内链接不适用而已。我不用考虑图片迁移问题，毕竟我是使用 Githb+Picgo 来进行图床存储的。如果你是一个 Rust 粉，你也可以考虑 Zola ，只不过 Zola 的生态更加贫瘠，对于我这种前端小白来说不太友好😭 感谢为爱发电的开源作者们 👉 Picgo Github 仓库 👉 Hugo 官方中文文档 👉 Hugo Papermod Theme Github 仓库正文 PaperMod theme 配置小技巧代码块显示行数(Code block line number display) 1 2 # config.yaml pygmentsOptions: linenos=table Hexo 生成的 URL 是和文章标题一一对应的，而 Hugo 会默认将标题的首字母小写，本来就是小站长，好不容易被收录的网站岂能丢掉?...