Hugo Blowfish主题安装与配置

安装主题
#

主题地址：https://github.com/nunocoracao/blowfish ，这里 使用 Git 子模块安装主题。

# 使用 Git 子模块安装
cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
# 更新
git submodule update --remote --merge

# 手动更新
1.下载主题最新版本的源码
2. 解压缩, 将文件夹重命名为 blowfish，并移动到根目录 themes/ 目录下。你需要覆盖旧版以替换所有的主题文件。
3. 重建站点，并检查网站是否一切正常。

配置主题
#

主题下载
#

在主题下载页下载 config-default.zip,解压后重命名为 config，并移动到根目录。

主题厂家配置
#

参考 exampleSite\config，对自己的网站进行设置。
自己常见配置如下：

# config\_default\hugo.toml
smartTOC = true # 显示文章目录
# config\_default\params.toml
defaultAppearance = "dark" # 使用黑色主题
# 参考config\_default\languages.en.toml，修改制作一个languages.zh-cn.toml
# 参考config\_default\menus.en.toml，修改制作一个menus.zh-cn.toml，用于显示菜单

自定义浏览器图标
#

为了自定义网站图标，您需要将所有以下文件放置在网站根目录的 static 文件夹中，这些文件将会覆盖 themes/even/static/文件夹内的对应文件。使用在线工具，选择图片(使用iloveimg去除头像背景)，按照步骤生成并下载 favicon.zip，解压后放到 static 文件夹。就可以替换主题文件夹 themes\blowfish\static 中的 Favicon 图标。

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
browserconfig.xml
favicon.ico
favicon-16x16.png
favicon-32x32.png
manifest.json
mstile-150x150.png
safari-pinned-tab.svg

调大文档内容宽度
#

创建 assets/css/custom.css 文件，内容如下：

.max-w-fit,
.max-w-prose {
  max-width: 100%;
}

umami analytics
#

最简单的是直接使用 umami 的 cloud 云服务。(注册好了，还未实施成功)

注册账号并获得 website id: https://cloud.umami.is/
将 https://cloud.umami.is/script.js 文件内容存到 static/js/umami.js 中;
layouts/partials/extend-head.html 中添加如下内容: data-website-id 值需要修改。

<script defer src="{{ "js/umami.js" | relURL }}"
data-website-id="XXXXXX"></script>

自动部署
#

仓库-设置-Pages
Build and deployment 选择gh-pages，点击保存，这样就会使用 GitHub Action 来自动部署项目到gh-pages分支

参考文章
#

上面推荐的文章你是否喜欢呢，如果有什么好的推荐或者想要了解最新的工具，欢迎在评论区留言和大家一起交流！喜欢记得关注公众号【可持续学园】，我们下期再见！ 👇

安装主题 #

配置主题 #

主题下载 #

主题厂家配置 #

自定义浏览器图标 #

调大文档内容宽度 #

umami analytics #

自动部署 #

参考文章 #

相关文章