🐟 A canvas implemented animation effect of small fish swimming.

hugo-fixit 收录于 GitHub 和开源项目

2024-11-05 2025-12-27 约 200 字预计阅读 1 分钟 - 次阅读

警告

本文最后更新于 2025-12-27，文中内容可能已过时。

Fly Fish

👉 简体中文说明 | English README

一个 canvas 实现的小鱼游动动画效果。

Demo

https://lruihao.cn

要求

FixIt v0.4.0 或更高版本。

安装组件

安装方法与安装主题相同。有几种安装方式，请选择一种，例如，通过 Hugo 模块安装：

作为 Hugo 模块安装

首先确保你的项目本身是一个 Hugo 模块。

然后将此主题组件添加到你的 hugo.toml 配置文件中：

1
2
3
4
5
[module]
  [[module.imports]]
    path = "github.com/hugo-fixit/FixIt"
  [[module.imports]]
    path = "github.com/hugo-fixit/cmpt-flyfish"

在 Hugo 的第一次启动时，它将下载所需的文件。

要更新到模块的最新版本，请运行：

1
2
hugo mod get -u
hugo mod tidy

作为 Git 子模块安装

将 FixIt 和此 git 存储库克隆到你的主题文件夹中，并将其作为网站目录的子模块添加。

1
2
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/cmpt-flyfish.git themes/cmpt-flyfish

接下来编辑项目的 hugo.toml 并将此主题组件添加到你的主题中：

1
theme = ["FixIt", "cmpt-flyfish"]

配置

为了通过 FixIt 主题在 layouts/_partials/custom.html 文件中开放的自定义块将 cmpt-flyfish.html 注入到 custom-assets 中，你需要填写以下必要配置：

1
2
3
4
5
[params]
  [params.customPartials]
    # ... other partials
    assets = [ "inject/cmpt-flyfish.html" ]
    # ... other partials

配置小鱼主题色，并启用动画：

1
2
3
4
5
[params]
  [params.flyfish]
    enable = true
    light = "rgb(0 119 190 / 10%)"
    dark = "rgb(255 255 255 / 10%)"

参考

Buy me a coffee~

赞赏

支付宝

微信

收录于合集・开源项目 49

Lruihao/html-demo hugo-fixit/cmpt-translate