Hugo 主题开发笔记

Dec 26, 2019 • 预计阅读时间 2 分钟

我的极简 Hugo 主题 Notepadium 已被收录到官方主题推荐列表。

记录一下开发过程中的一些心得。

开发过程中

  • 避免生成多余空行

    Hugo 处理源文件时,会把 go 标记 {{ }} 所在行替换为空行保留在生成后的页面里,要避免这种情况需要使用 {{- -}} 告诉编译器需要移除空白。

    如果你的代码是这样的:

    {{ if ... }}
    {{ end }}
    

    需要替换为

    {{- if ... -}}
    {{- end -}}
    
  • 模块化重复使用的代码

    index.htmllist.html 都要显示文章列表和分页器,而且代码逻辑完全一样。

    那么可以把重复的代码抽离出来放到 partials 里。

    partials/note-list.html 放文章列表布局的代码

    partials/pagination.html 放分页器的代码

    使用的时候直接包含进来就可以了:

    {{- $paginator := .Paginator -}}
    
    ...
    
    {{- partial "note-list.html" $paginator -}}
    {{- partial "pagination.html" $paginator -}}
    

    $paginator 是传给 partial 的参数,在 partial 内部可以直接使用 {{ . }} 获取到这个参数。

上架到官方主题列表

主题测试好了以后可以提交给 Hugo 官方审核,通过之后别人就可以在主题列表中发现你的主题。

上架的步骤如下:

  1. gohugoio/hugoThemes 提交 Issues

    主题是以 Issues 的形式进行评审的,不要提交为 PR。

  2. 主题的 ReadMe 中如果包含图片,需要使用绝对链接地址

    因为在 Hugo 主题页面内会直接提取 ReadMe 的内容进行展示。

    如果是相对地址会导致显示不了图片,审核也不能通过。

  3. 需要提供主题的缩略图,路径是主题根目录的 /images/ 目录,需要提供缩略图和大图

    screenshot.png 大图,w: 1500px, h: 1000px

    tn.png 缩略图,w: 900px, h: 600px

    screenshot.png 显示在 ReadMe 的顶部

  4. 主题里使用到的链接,应该使用相对地址(relURL),因为官方在上架后会给你生成一个 Demo 站点

    如果是使用 BaseURL 进行拼接的路径,或者以 / 开头的路径,会导致生成的 Demo 不能找到资源,审核也不能通过。

    使用到外部资源的链接不能是 // 开头的形式,需要写为 https:// 开头。

  5. 建议内置 exampleSite 在主题里,在主题根目录下创建一个 exampleSite 目录

    把这个示例仓库HugoBasicExample里的 content 目录拷贝进来,不能更改里面的文件内容。

    在里面新建一个配置文件 config.toml ,里面的内容需要自己写,除了第一行必须是 baseURL = "https://example.com", 配置文件的内容需要根据自己的主题进行填充。

    主题需要能让这个例子正常运行起来才能上架,cdexampleSite 目录里,执行 hugo server --themesDir ../.. 测试效果。

Hugo

在越狱后的 iOS 上更新 Lookin 链接库

使用 OpenSSL 计算脚本文件的 SHA384

comments powered by Disqus