过程
尝试修改代码栏背景
无果
更换主题至PaperModX
设置文章中链接以新标签的方式打开
统一风格
使用今日诗词 - 一言API作为slogan
步骤如下:
- 找到位置,发现位于
themes\PaperModX\layouts\partials\home_info.html
- 根据api文档添加调用代码
- 找到位置,发现位于
美化标签页
添加archive页
步骤如下:
- 新增archive.md文件
- 在
themes\PaperModX\assets\css\common\archive.css
替换并添加相应代码.archive-entry { position: relative; padding: 5px; margin: 10px 0; transition: var(--link-transition); /* 添加过渡效果,使颜色和阴影变化平滑 */ } .archive-entry:hover .archive-entry-title { color: var(--link-hover-color); /* 鼠标悬停时的文字颜色 */ box-shadow: var(--link-hover-underline-shadow); /* 鼠标悬停时的下划线阴影效果 */ } .archive-entry-title { margin: 5px 0; font-weight: 400; transition: var(--link-transition); display: inline-block; }
添加搜索功能
步骤如下
- 新增search.md文件
- 在
hugo.yml
新增outputs: home: - HTML - RSS - JSON # is necessary
整合search,category,tags至discover,以使导航栏更为简洁
步骤如下
- 参考PaperMod 搜索页展示标签列表 | loyayz
- 修改对应标题、url
- 修改
themes\PaperModX\layouts\_default\search.html
中的代码
修改profile-mode中的副标题为一言诗句
步骤如下:
- 找到对应位置
themes\PaperModX\layouts\partials\index_profile.html
- 参考第五步
- 找到对应位置
添加Records页面
步骤如下
- 参考NeoDB API 创建观影页面 - 大大的小蜗牛
- 添加
themes\PaperModX\layouts\_default\records.html
与static\css\records.css
- 添加
content\records.md
添加rss_subscription页面
步骤如下
- 大体上与第11步相同
- 在
themes\PaperModX\layouts\_default\single.html
的基础上进行修改,得到themes\PaperModX\layouts\_default\rss_subscription.html
部署
步骤如下:
- 主要参考Host on GitHub Pages | Hugo
- 报错
Branch "x" is not allowed to deploy to github-pages due to environment protection rules.
。 参考Branch “x” is not allowed to deploy to github-pages due to environment protection rules. · community · Discussion #39054
添加social icons
数据自动更新
代码位于
.github\workflows\sync.yml
添加最后修改时间
参考Hugo 中最后更新的时间显示,步骤如下:
- 修改
hugo.yml
文件,添加以下内容# 最后修改时间的获取顺序: git > lastmod(自设定) > fileModTime > default frontmatter: lastmod: - :git - lastmod - :fileModTime - :default enableGitInfo: true
- 修改
themes\PaperModX\layouts\partials\post_meta.html
,添加
{{- if not .Lastmod.IsZero -}} <span class="meta-item"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen" style="user-select: text;"> <path d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z" /> </svg> <span>lastmod in {{ .Lastmod | time.Format (default "January 2, 2006" site.Params.DateFormat) }}</span></span> {{- end }}
- 修改
除archive外的列表均按最后修改时间进行排序
参考Lists of content in Hugo | Hugo 修改
themes\PaperModX\layouts\_default\list.html
中相关内容为{{- $pages := .Pages.ByLastmod.Reverse.ByWeight }}
。先根据最后修改时间进行逆向排序,再根据weight排序实际测试发现第十七步存在问题
表现为并没有按照最后修改时间进行逆向排序。猜测可能是和
ByWeight
的定义有关。我的解决方法是:
- 新增一个param
rating
{{- $pages := .Pages.ByLastmod.Reverse.ByParam "rating" }}
- 新增一个param
修改url。参考URL management | Hugo, 我现在的配置如下
permalinks: # posts: /:year/:title/ posts: /:year/:slug/
想法
- Hexo给我的感觉就是折腾少,约等于开箱即用。这里要感谢Fluid这款主题,做得很棒。
- Hugo我则没有找到一款我比较中意的主题,前前后后换了三四个,最后选择在hugo-PaperModX的基础上自己进行修改。(也可能只是因为我的需求提升了)
- Hugo确实和其所宣传的一样,很快,部署的时间只要原来的一半,还有本地的实时预览。但是缓存还是有些讨人厌,就算我加上了
--disableFastRender
还是需要手动重启,无痕浏览等措施才能看到一些设置的变化。不过看issue说这也是一种设计。 - 再次体会到了教程还是要以官方教程为主。在部署至Github Page时,我首先是修改自己以前的代码,跑不通然后就去问ChatGPT,再然后是网上搜教程。最后反倒是在Host on GitHub Pages | Hugo的帮助下解决的。
- 还是官方教程的事。我比较喜欢从代码出发。直接去看代码。但后面遇到问题后发现有些坑其实没必要踩,教程里写得好好的呢。直接从代码出发看似省了时间,其实添了不少麻烦。
待修复问题
- 部署后My Rss Subscription | EuDs’s Blog无法正常显示
- 网站icon时有时无
- action
Sync NeoDB Data
中,触发的Deploy Hugo site to Pages
所使用的并非是最新的代码?
参考
- 博客系统迁移:Hexo 到 Hugo
- 将hexo文章头转为hugo格式-腾讯云开发者社区-腾讯云
- Hugo 与 Hexo 的异同 | reuixiy
- Hugo博客目录放在侧边 | PaperMod主题 | Sulv’s Blog
- Hugo的工作原理 - Hugo 中文帮助文档
- Hugo博客添加标签云 | Sulv’s Blog
- Options | Fuse.js
- PaperMod 搜索页展示标签列表 | loyayz
- NeoDB API 创建观影页面 - 大大的小蜗牛
- Host on GitHub Pages | Hugo
- Hugo 中最后更新的时间显示@代码旅行 :: Do Faith No Fear | 信仰永恒,无所畏惧 :)
- Lists of content in Hugo | Hugo
- 使用Hugo搭建个人网站(七)-Hugo和Github Action正确修改文章的最后更新日期 - 寂静·流年
- URL management | Hugo