安装

  1. 下载 git

  2. 下载 go 或 Hugo

    或者用 git 拉取

       git clone https://github.com/gohugoio/hugo.git

    或者用 go 基于源码安装

       go install -tags extended github.com/gohugoio/hugo@latest
   hugo version

    或者用 brew/chocolatey 安装

       brew install hugo 
   #choco install hugo-extended

  3. 验证安装成功

    hugo version

创建站点和主题

注意：需要使用 PowerShell 或者 终端 之类的工具（WSL、Git Bash等）

windows PowerShell 和 PowerShell 不是同一个工具

  1. 新建站点
    hugo new site <your site name>
  1. 新建安装主题 Papermod
    cd <your site name>
    git init
    git submodule add https://github.com/theNewDynamic/gohugo-theme-papermod themes/papermod
  1. 新建内容 运行以下命令，会自动生成文件放在 content/posts 文件夹下
    hugo new posts/<your-post-name>.md
  1. 编辑内容
    ---
    title: "My First Post"
    summary: 预览卡片上展示的描述
    date: 2023-05-19    #注意日期格式，否则在归档中无法获取到文章
    series: ["project"]
    weight: 1
    aliases: ["/hugo-configuration"]
    tags: ["project","hugo","papermod"]
    author: "HermyGong"
    draft: true # 值为 true 时，不会被发布
    ---
    文章内容blabla~

启动运行

在 终端/Terminal 输入 hugo serve 即可。 访问 http://localhost:1313/

自定义

修改站内导航栏

编辑根目录下 config.yml 文件。weight 可用于排序。

        menu:
            main:
                - name: 📒文章
                  url: posts/
                  weight: 1
                - name: 🗓️归档
                  url: archives/
                  weight: 2
                #- name: 🧩标签
                #  url: tags/
                #  weight: 5 
                # - name: 🗂️系列
                #  url: series/
                #  weight: 6
                - name: 🎨作品 
                  url: profileMode/
                  weight: 7
                - name: 🔍搜索
                  url: search/
                  weight: 8

修改目录显示在左侧

参考： https://www.sulvblog.cn/posts/blog/hugo_toc_side/

修改文章元数据post_meta显示样式

参考： https://www.sulvblog.cn/posts/blog/hugo_postmeta/

修改归档页为中文时间轴样式

参考： https://www.sulvblog.cn/posts/blog/hugo_archives_chinese/

添加评论区

国际化

  • i18n
    根据这几天的观察，发现 papermod 主题下自带了 i18n 这个国际化翻译插件，可能不需要额外引入了。改天研究一下。

  • Typescript
    用 Typescript 自带的特性实现中英双语翻译 https://lesleylai.info/zh/bilingual-blog

画廊

Sulv 的源码中，我发现了在 .\themes\papermod\layouts\shortcodes\gallery.html 注释了使用 hugo-easy-gallery https://github.com/liwenyip/hugo-easy-gallery/

2024.1.2 更新：由于hugo-easy-gallery已经很久没有更新维护了，所以最终还是选择了 Sulv 推荐的nanogallery2，可以查看此文档: https://www.sulvblog.cn/posts/blog/hugo_gallery/

hugo 的主题————很适合放一些摄影作品，铺满整个屏幕 https://themes.gohugo.io/themes/gallerydeluxe/

Sam 这个主题也不错，当然看起来样式不是很复杂，maybe 找段 CSS 也可实现~ https://victoria.dev/hugo-theme-sam/portfolio/

引用样式优化

markdown本身的引用样式比较单一，可以使用hugo-notice丰富样式 https://github.com/martignoni/hugo-notice
使用在 blank.css 中自定义渲染风格以实现引用样式的优化

优化渲染风格

https://dvel.me/posts/hugo-papermod-config/
不仅使我的文章布局排版更加美观，也优化了在切换主题颜色时，评论区不随之切换的问题。

文章lastmod自动更新时间

https://www.jacksonlucky.net/posts/use-lastmod-with-papermod/
jackson是个了不起的美国老头儿，曾是一名优秀的法官，同时对go语言和hugo颇有研究。however，关于lastmod的配置，我使用后会报错，于是我自己调整得更为简单，但it works. 仅需在post_meta.html中添加如下代码

  {{- if (.Param "ShowLastMod") -}}
     {{- if ne $lastmod $date -}}
        <span> <span>更新于</span>
         {{ .Lastmod | time.Format (default "2006-01-02" site.Params.DateFormat)}}   </span>
      {{- end }}
      &nbsp;&nbsp;&nbsp;
    {{- end }}

Todo

  • 添加我的个人教育信息，参考：https://adityatelange.in/education/

  • 添加 评论区

  • 装修 作品页

  • 装修 首页，参考： https://www.sulvblog.cn https://www.oasistrek.com/

  • 优化 底部外链样式

  • 更新 社交个人主页链接

  • 添加 切换多语言（国际化）

  • markdown checkbox 样式失效

  • 引入AI工具，自动帮我总结文章的 summary 和 description


参考链接

感谢以下博主的经验分享和开源代码~

https://www.sulvblog.cn/posts/blog/

https://kyxie.github.io/zh/blog/tech/papermod/

https://loyayz.com/website/

https://dvel.me/posts/hugo-papermod-config/