🐟 A canvas implemented animation effect of small fish swimming.

Fly Fish

👉 English README | 简体中文说明

A canvas implementation of a small fish swimming animation effect.

Demo

https://lruihao.cn

Requirements

• FixIt v0.4.0 or later.

Install Component

The installation method is the same as installing a theme. There are several ways to install, choose one, for example, install through Hugo Modules:

Install as Hugo Module

First make sure that your project itself is a Hugo module.

Then add this theme component to your hugo.toml configuration file:

1
2
3
4
5

[module]
  [[module.imports]]
    path = "github.com/hugo-fixit/FixIt"
  [[module.imports]]
    path = "github.com/hugo-fixit/cmpt-flyfish"

On the first start of Hugo it will download the required files.

To update to the latest version of the module run:

1
2

hugo mod get -u
hugo mod tidy

Install as Git Submodule

Clone FixIt and this git repository into your theme folder and add it as submodules of your website directory.

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

Next edit hugo.toml of your project and add this theme component to your themes:

1

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

Configuration

In order to Inject the partial cmpt-flyfish.html into the custom-assets through the custom block opened by the FixIt theme in the layouts/_partials/custom.html file, you need to fill in the following necessary configurations:

1
2
3
4
5

[params]
  [params.customPartials]
    # ... other partials
    assets = [ "inject/cmpt-flyfish.html" ]
    # ... other partials

Configuration of the Fly Fish theme color and enable animation:

1
2
3
4
5

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

References

• Develop Theme Components | FixIt
• How to Develop a Hugo Theme Component | FixIt