过程

  1. 尝试修改代码栏背景

    无果

  2. 更换主题至PaperModX

  3. 设置文章中链接以新标签的方式打开

    参考:在 Hugo Goldmark Markdown 中设置以新标签打开链接 - Dvel’s Blog

  4. 统一风格

  5. 使用今日诗词 - 一言API作为slogan

    步骤如下:

    1. 找到位置,发现位于themes\PaperModX\layouts\partials\home_info.html
    2. 根据api文档添加调用代码
  6. 美化标签页

    参考Hugo博客添加标签云 | Sulv’s Blog

  7. 添加archive页

    步骤如下:

    1. 新增archive.md文件
    2. 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;
        }
      
  8. 添加搜索功能

    步骤如下

    1. 新增search.md文件
    2. hugo.yml新增
      outputs:
      home:
         - HTML
         - RSS
         - JSON # is necessary
      
  9. 整合search,category,tags至discover,以使导航栏更为简洁

    步骤如下

    1. 参考PaperMod 搜索页展示标签列表 | loyayz
    2. 修改对应标题、url
    3. 修改themes\PaperModX\layouts\_default\search.html中的代码
  10. 修改profile-mode中的副标题为一言诗句

    步骤如下:

    1. 找到对应位置themes\PaperModX\layouts\partials\index_profile.html
    2. 参考第五步
  11. 添加Records页面

    步骤如下

    1. 参考NeoDB API 创建观影页面 - 大大的小蜗牛
    2. 添加themes\PaperModX\layouts\_default\records.htmlstatic\css\records.css
    3. 添加content\records.md
  12. 添加rss_subscription页面

    步骤如下

    1. 大体上与第11步相同
    2. themes\PaperModX\layouts\_default\single.html的基础上进行修改,得到themes\PaperModX\layouts\_default\rss_subscription.html
  13. 部署

    步骤如下:

    1. 主要参考Host on GitHub Pages | Hugo
    2. 报错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
  14. 添加social icons

    参考Icons | PaperMod

  15. 数据自动更新

    代码位于.github\workflows\sync.yml

  16. 添加最后修改时间

    参考Hugo 中最后更新的时间显示,步骤如下:

    1. 修改hugo.yml文件,添加以下内容
      # 最后修改时间的获取顺序: git > lastmod(自设定) > fileModTime > default
      frontmatter:
      lastmod:
      - :git
      - lastmod
      - :fileModTime
      - :default
      
      enableGitInfo: true
      
    2. 修改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 }}
    
  17. 除archive外的列表均按最后修改时间进行排序

    参考Lists of content in Hugo | Hugo 修改themes\PaperModX\layouts\_default\list.html中相关内容为 {{- $pages := .Pages.ByLastmod.Reverse.ByWeight }} 。先根据最后修改时间进行逆向排序,再根据weight排序

  18. 实际测试发现第十七步存在问题

    表现为并没有按照最后修改时间进行逆向排序。猜测可能是和ByWeight的定义有关。

    我的解决方法是:

    1. 新增一个paramrating
    2. {{- $pages := .Pages.ByLastmod.Reverse.ByParam "rating" }}
  19. 修改url。参考URL management | Hugo, 我现在的配置如下

    permalinks:
    # posts: /:year/:title/
    posts: /:year/:slug/
    

想法

  1. Hexo给我的感觉就是折腾少,约等于开箱即用。这里要感谢Fluid这款主题,做得很棒。
  2. Hugo我则没有找到一款我比较中意的主题,前前后后换了三四个,最后选择在hugo-PaperModX的基础上自己进行修改。(也可能只是因为我的需求提升了)
  3. Hugo确实和其所宣传的一样,很快,部署的时间只要原来的一半,还有本地的实时预览。但是缓存还是有些讨人厌,就算我加上了--disableFastRender还是需要手动重启,无痕浏览等措施才能看到一些设置的变化。不过看issue说这也是一种设计。
  4. 再次体会到了教程还是要以官方教程为主。在部署至Github Page时,我首先是修改自己以前的代码,跑不通然后就去问ChatGPT,再然后是网上搜教程。最后反倒是在Host on GitHub Pages | Hugo的帮助下解决的。
  5. 还是官方教程的事。我比较喜欢从代码出发。直接去看代码。但后面遇到问题后发现有些坑其实没必要踩,教程里写得好好的呢。直接从代码出发看似省了时间,其实添了不少麻烦。

待修复问题

  1. 部署后My Rss Subscription | EuDs’s Blog无法正常显示
  2. 网站icon时有时无
  3. actionSync NeoDB Data中,触发的Deploy Hugo site to Pages所使用的并非是最新的代码?

参考