Hugo theme NexT 主题使用记录

发表于： 更新于： 分类于：
字数： 2294 阅读：≈ 5分钟
总结摘要
Hugo NexT 是一款高质量且优雅的 Hugo 主题，从原来 Hexo 引擎的 NexT 主题中移植过来，保持简单易用的特性和强大的功能。本文记录本人切换 NexT 主题的过程，仅供参考。

主题简介

 Hugo NexT 是一款高质量且优雅的 Hugo 主题，从原来 Hexo 引擎的 NexT 主题中移植过来，保持简单易用的特性和强大的功能。

详见主题官网（ https://hugo-next.eu.org/ ）、主题Github（ https://github.com/hugo-next/hugo-theme-next ）。

使用须知

在使用 Hugo NexT 主题之前，请确认你的电脑上已经安装 Hugo Extended 版本。 Git 的话，看你怎么使用，如果使用就安装。

从Hugo Github网站（ https://github.com/gohugoio/hugo/releases 顶端最下载最新版本，选择带 extended 版本， dpkg -i 安装，用 hugo version 查看确认是否已经安装了Hugo Extended 版本。

从 https://github.com/hugo-next/hugo-theme-next 下载主题最新版（也可以参考官方说明用 Git ）。目前最新版本是v4.8.3。

快速使用

建议先用 hugo new site 命令全新建站，然后解压下載的主题源码包到 hugo 站点 themes 目录下。

把themes/hugo-theme-next/exampleSite/下面所有文件（不要拷贝startup.sh文件）及文件夹原样拷贝到站点根目录下。

删除站点根目录下原hugo.toml或保存成另一文件名。其他不用任何修改。

终端执行 hugo server 或hugo server --disableFastRender 命令，浏览器打开 http://localhost:1313 即可看到 NexT 主题效果。

魔改定制

在上述基础上，根据自己的喜好进行改动。

重要

所有的修改都建议应该在站点根目录下相应目录修改，而不要修改主题下的所有文件，因为主题下次升级时，可能会覆盖之前的文件。

大部分改动均是修改站点根目录下hugo.yaml文件。修改站点名称、域名、描述等内容，此处不细述，根据实据情况来。

主题默认是不显示网站Logo。如图：

修改站点根目录下hugo.yaml文件里如下内容：

上面customLogo为站点显示图片，favicon就不用说了吧。相应图片文件要拷贝到网站根目录/static/imgs/icons/目录下。

拷贝/themes/hugo-theme-next/layouts/_partials/header/brand.html 到 /layouts/_partials/header/brand.html ，修改 /layouts/_partials/header/brand.html 文件：

上图标识1处表示适用于主题的冥想 Muse 模式（默认为双子座 Gemini ）。标识2处表示适用于主题的双子座 Gemini 、双鱼座 Pisces 模式，主题原文件中是在标识4下面，我把她提上来了。

标识3和4处，我用了自己的 class 。自定义样式在 /static/css/custom_style.css  文件：

最终呈现效果如下：

图示效果是light模式，并且改了底色。

修改menu小图标

主题原显示图标如下图中菜单文字前的样式：

如不喜欢，可以选择自己中意的。从 https://fontawesome.com/ 上找到喜欢icon。主题默认用的是 6.7.2 Free 版本。选择后，记住图标名字，如 folder-plus。

修改站点根目录下hugo.yaml文件里pre: 后面的内容即可，如下：

原主题是可以设置二级下拉菜单的，但二级菜单怎么加icon？我还找到解决方法。目前测试，加了pre:不管用。  我是采用变通的办法，把二级菜单直接提升为一级了 😛。

站点统计

下图为站点左侧边栏下面的站点统计：

主题默认使用的是不蒜子统计站点，推荐使用 51LA 作站点统计。在 51La 后台添加一个应用，绑定当前域名，开启数据挂件，复制此应用的 统计ID（注意不是数字的那个ID号，而是那个掩码ID，一大串字母数字组合那个）。

修改站点根目录下hugo.yaml文件里siteState.views.plugin: 部分，设为 51la 。

修改站点根目录下hugo.yaml文件里analytics: 部分内容，如下：

把 51La 后台应用的掩码ID复制到 laId 后面，其他注释掉即可。

我的博客网站已经更改为用 umami 作为站点统计，具体见 网站统计工具 Umami 自部署。

文章内的浏览和评论统计（见下图），主题里是由评论插件（如 Waline）实现的（不蒜子只支持文章访问），需要配置Waline服务，不然就会一直转圈圈。具体见下面评论系统部分。

评论系统

主题内置支持 livere 、waline 、 waline3 、utterances 、artalk 、 giscus 评论系统，可自己先用。我初步选用 waline3，具体见 评论系统 Waline 自部署。

部署成功后，修改配置站点根目录下hugo.yaml文件里comments: 部分内容，如下即可：

上图serverURL为自建 Waline3 系统的网址。

目前我已经使用 comentario 评论系统，主题目前不支持，在主题不支持的情况下，只能自行修改了，详见 评论系统 Comentario 自部署 。

全文搜索

2025年12月29日记录：

主题默认是内置本地全文搜索的，但是目前发现不管我怎么设置都不起作用，想试用 Algolia 搜索，目前 Algolia 搜索还没通过我的申请（2025年12月25日申请的），今天12月29日了，好几天了，不是说一到两天工作日的吗。

2026年1月23日更新记录：

之前的确是，不管本地搜索还是已经通过申请的Algolia搜索，怎么设置都不起作用，折腾了老长一段时间，也在 Github 提问问过主题开发者也是没定论，后来从开发者给出的错误提示，加上网络开发者工具的辅助，我终于发现原来是我自己的错。

在这篇博文里 The songs My Love and Fool Again ，标题之前是The songs My Love & Fool Again，就是因为这个特殊字符&，造成了搜索不起作用，把它改了就好了。估计是主题没处理好字符的转化。这样处理后，本地搜索没问题了。

但 Algolia 搜索还是不管用，最后发现不能使用 Algolia 的自动爬取功能，你得自己上传生成的algolia.json索引文件才行。这个就估计可能是 algolia 更新了采集标准，主题没同步上。

启用 Algolia 搜索，应该修改站点根目录下hugo.yaml文件里如下内容：

如上的`appId`、`apiKey`、`indexName`，得根据自己的 Algolia 实际填写。

其他修改要点

  • 友情链接 的具体内容是站点根目录 /data/flinks/zh-cn.yaml 文件。
  • 侧边栏和底边栏都可以自定义添加内容，在站点配置hugo.yaml文件里 customFilePath部分：
1
2
3
4

    customFilePath:
      sidebar: #custom_sidebar.html
      footer: #custom_footer.html
      style: /css/custom_style.css
  • 文章 front-matter 里，使用 weight关键字置顶文章：如  weight: 2 则是在第2个置顶。
  • 文章 front-matter 里，加
1
2

expand: true
extlink: https://gitee.com/hugo-next/hugo-theme-next/

可以直接点击文章标题跳转到链接页面。

效果对比

原先的 hugo-pacman-theme 主题：

现在的 NexT 主题效果：