修改hugo主题 Sat, Mar 23, 2024
目前hugo的主题我有5个,基本上都已经修改成我想要的样子( binario / hugo.386 / jane / meteor / photophobia ),都是比较简单清爽的主题,其中我把jane差不多改成了和之前我用的even一样,还是简单的看着舒服。
jane主题修改,我去掉了分类和标签,字体调整,去掉继续阅读的按钮,pagination按钮数量减少,添加搜索,去掉页面标题及日期,一些间距的调整,部分css及颜色的调整。目前先这些,还有折腾的想法待实现( 长文章自动分页 / 自定义hugo页面 / 首页摘要显示图片 / … )。
以下2024年3月25日更新:
Hugo首页摘要添加图片,于\themes\jane\layouts\post\summary文件中合适位置添加以下代码,css可以自定义,
{{ if .Params.cover }} <div class="cover-image" style="border: 4px solid #999;box-shadow: 5px 5px #27ae60;margin-bottom: 20px;border-radius: 3px;"> <img src="{{ .Params.cover }}" alt="{{ .Title }}" /> </div> {{ end }}
然后在文章头部添加图片地址(可以是本地路径)
cover: /img/***.webp
例如:
title: “地漏断层”
date: 2024-03-06T12:24:53+08:00
cover: /img/***.webp
Hugo首页文章摘要末尾添加“…”,于\themes\jane\layouts\post\summary文件中{{ .Summary }}后面添加{{ “…” }}即可
长文章分页加more标签就行。hugo长页面分页也可以实现,不过我觉得有些麻烦,暂时意义不大。
还有一些想法暂时未实现,目前看,hugo还有很多功能待研究。
以下2024年3月26日更新:
hugo添加自定义url菜单,在config.toml中添加,确保你的URL以http://或https://开头。
[[menu.main]]
name = “留言”
url = “https://........xyz”
weight = 50
让 hugo 支持渲染 html(iframe)代码,在config.toml中添加
[markup] [markup.goldmark] [markup.goldmark.renderer] unsafe = true
Hugo一些安全设置:
阻止hugo站点被rss订阅 ✔
config.toml里面添加disableRSS = true
阻止hugo站点被搜索引擎收录 ✔
header里面添加
<meta name="robots" content="noindex, nofollow">
阻止hugo站点被其它网站iframe嵌入 ✔
config.toml里面添加
[headers] [headers.values] "X-Frame-Options" = "DENY"
设置hugo站点防盗链 ✔
手动设置站内第三方链接不显示网址并用base64跳转 ✔
<a rel="nofollow" target="_blank" href="#" onclick="window.location.href=atob('base64转换后的码'); return false;">链接文本</a>