Hugo + HBstart 主题构建导航页

诗往哥2024年12月25日约 1111 字大约 4 分钟

安装 HBstart 主题

克隆仓库

git clone --depth 1 https://github.com/hbstack/theme-start

复制 Example Site

cp -r theme-start/exampleSite ./start-page

更改工作目录

cd start-page

重新初始化站点

rm go.mod go.sum config/_default/module.yaml
hugo mod init github.com/user/repo

导入主题和搜索引擎

目录：config/_default 。

toml

文件名：module.toml

[[imports]]
  path = 'github.com/hbstack/theme-start'
[[imports]]
  path = 'github.com/hbstack/theme-start/engines/google'
[[imports]]
  path = 'github.com/hbstack/theme-start/engines/bing'

yaml

文件名：module.yaml

imports:
- path: github.com/hbstack/theme-start
- path: github.com/hbstack/theme-start/engines/google
- path: github.com/hbstack/theme-start/engines/bing

json

文件名：module.json

{
   "imports": [
      {
         "path": "github.com/hbstack/theme-start"
      },
      {
         "path": "github.com/hbstack/theme-start/engines/google"
      },
      {
         "path": "github.com/hbstack/theme-start/engines/bing"
      }
   ]
}

安装依赖项

npm ci

启动 Hugo 服务器

hugo server

自定义搜索引擎

搜索引擎属性

名字	类型	描述
weight	number	较低的权重获得更高的优先级。

内置搜索引擎

名字	标识符	模块
百度	baidu	`github.com/hbstack/theme-start/engines/baidu`
必应	bing	`github.com/hbstack/theme-start/engines/bing`
一只叛逆的鸭子	duckduckgo	`github.com/hbstack/theme-start/engines/duckduckgo`
谷歌	google	`github.com/hbstack/theme-start/engines/google`
搜狗	sogou	`github.com/hbstack/theme-start/engines/sogou`
维基百科	wikipedia	`github.com/hbstack/theme-start/engines/wikipedia`
雅虎	yahoo	`github.com/hbstack/theme-start/engines/yahoo`
Yandex	yandex	`github.com/hbstack/theme-start/engines/yandex`

搜索引擎配置

目录：config/_default 。

toml

文件名：hugo.toml

[module]
  [[module.imports]]
    path = 'github.com/hbstack/theme-start/engines/google'
  [[module.imports]]
    path = 'github.com/hbstack/theme-start/engines/bing'
  [[module.imports]]
    path = 'github.com/hbstack/theme-start/engines/baidu'
  [[module.imports]]
    path = 'github.com/hbstack/theme-start/engines/duckduckgo'
[params]
  [params.hb]
    [params.hb.theme_start]
      [params.hb.theme_start.search_engines]
        [params.hb.theme_start.search_engines.baidu]
          weight = 3
        [params.hb.theme_start.search_engines.bing]
          weight = 2
        [params.hb.theme_start.search_engines.duckduckgo]
          weight = 4
        [params.hb.theme_start.search_engines.google]
          weight = 1

yaml

文件名：hugo.yaml

module:
  imports:
  - path: github.com/hbstack/theme-start/engines/google
  - path: github.com/hbstack/theme-start/engines/bing
  - path: github.com/hbstack/theme-start/engines/baidu
  - path: github.com/hbstack/theme-start/engines/duckduckgo
params:
  hb:
    theme_start:
      search_engines:
        baidu:
          weight: 3
        bing:
          weight: 2
        duckduckgo:
          weight: 4
        google:
          weight: 1

json

文件名：hugo.json

{
   "module": {
      "imports": [
         {
            "path": "github.com/hbstack/theme-start/engines/google"
         },
         {
            "path": "github.com/hbstack/theme-start/engines/bing"
         },
         {
            "path": "github.com/hbstack/theme-start/engines/baidu"
         },
         {
            "path": "github.com/hbstack/theme-start/engines/duckduckgo"
         }
      ]
   },
   "params": {
      "hb": {
         "theme_start": {
            "search_engines": {
               "baidu": {
                  "weight": 3
               },
               "bing": {
                  "weight": 2
               },
               "duckduckgo": {
                  "weight": 4
               },
               "google": {
                  "weight": 1
               }
            }
         }
      }
   }
}

调整 HB start 主题外观

背景图像

把背景图像保存为：background.*（目前支持webp/png/jpg），粘贴到目录 assets/images 里面。

Favicons

把 logo 图像保存为：logo.png，粘贴到目录 assets/images 里面。

管理应用程序

目录：config/_default 。

toml

文件名：menus.toml

[[apps]]
  identifier = 'group-1'
  name = 'Group 1'
[[apps]]
  name = 'Foo'
  parent = 'group-1'
  url = 'https://example.org/foo'
[[apps]]
  identifier = 'group-2'
  name = 'Group 2'
[[apps]]
  name = 'Bar'
  parent = 'group-2'
  url = 'https://example.org/bar'

yaml

文件名：menus.yaml

apps:
  - identifier: group-1
    name: Group 1
  - name: Foo
    parent: group-1
    url: https://example.org/foo
  - identifier: group-2
    name: Group 2
  - name: Bar
    parent: group-2
    url: https://example.org/bar

json

文件名：menus.json

{
   "apps": [
      {
         "identifier": "group-1",
         "name": "Group 1"
      },
      {
         "name": "Foo",
         "parent": "group-1",
         "url": "https://example.org/foo"
      },
      {
         "identifier": "group-2",
         "name": "Group 2"
      },
      {
         "name": "Bar",
         "parent": "group-2",
         "url": "https://example.org/bar"
      }
   ]
}

url处添加网址后，能获取favicon就显示，不能获取favicon就显示第一个汉字或字母。
也可以自定义icon，以 menus.yaml 举例，代码如下，其中的icon可以Hugomods 中找。

apps:
  - identifier: group-1
    name: Group 1
  - name: Foo
    parent: group-1
    url: https://example.org/foo
    weight: 1
    params:
      icon:
        vendor: simple
        name: bilibili

在 Hugomods 搜索 bilibili 会显示三个结果，对应关系如下表。

vendor	name
font-awesome-brands	bilibili
simple-icons	bilibili
tabler	'outline/brand-bilibili'

注意

outline/brand-bilibili要加英文单引号或双引号后，才能在 YAML 中起作用。

设置 HB start 主题简繁英

推送到 GitHub

打开 GitHub 新建一个存储库，在 start-page 目录中输入cmd按回车，依次输入下面的代码并按回车。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/user/repo.git
git push -u origin main

如果在其他设备上修改了远程仓库代码，需要进行下面的操作。

#同步仓库
git pull origin main

#再修改/添加，并添加修改/新文件
git add .

#然后提交
git commit -m '描述'

#最后推送
git push origin main

部署

通过 Cloudflare Pages 部署站点

登录 Cloudflare 。
下拉找到 Workers 和 Pages，单击创建，选 Pages ，再点连接到Git。
根据提示选择好Git存储库。
设置构建配置。
- 构建命令：npm ci && hugo
- 构建输出：public
环境变量。
- HUGO_VERSION：Hugo版本号如0.111.3。
- NODE_VERSION：Node.js版本号大于 16 就可以，如 19 。
- EMBEDDED_DART_SASS_VERSION：Dart Sass版本号如 1.62.1 。