李瑞豪的博客、微博、哔哩哔哩、即刻、推特、Telegram 的 RSS

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

2024-11-05 16:23:29

Fly Fish

👉 简体中文说明 | English README

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

Demo

https://lruihao.cn

要求

FixIt v0.3.12 或更高版本。

安装组件

安装方法与安装主题相同。有几种安装方式，请选择一种，例如，通过 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
 6
 7
 8
 9
10
11
12
13



[params]
 [params.customPartials]
 head = []
 profile = []
 aside = []
 comment = []
 footer = []
 widgets = []
 assets = [
 "inject/cmpt-flyfish.html",
 ]
 postFooterBefore = []
 postFooterAfter = []

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

1
2
3
4
5



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

参考

自动获取 GitHub README 内容添加到 Hugo 文章

2024-10-06 11:10:22

在这个博客中，我经常会写一些关于开源项目的文章，而这些开源项目通常都是托管在 GitHub 上的。为了方便内容同步，我希望能够自动获取 GitHub 仓库的 README 内容，然后添加到 Hugo 文章中。这样，我就不用再手动复制粘贴 README 内容了。

1 前言

这个愿景我想了很久了，但是用 JS 通过 GitHub API 获取 README 内容的实现方式体验并不好，所以我一直没有实现。直到最近，我发现了 Hugo v0.126.0 版本新增了一个内容适配器（Content adapters）的概念。

Create content adapters to dynamically add content when building your site.

也就是说，我们可以在构建 Hugo 站点时，通过自定义的适配器动态添加内容。理论可行，实践开始。

2 GitHub API

首先，我们需要找到 GitHub API 获取 README 内容的接口。懒得翻文档了，直接浏览器打开 https://api.github.com，在 API 列表中最终找到了获取 README 内容的接口：

1
2
3



GET /repos/{owner}/{repo}/readme HTTP/1.1
Host: api.github.com
Authorization: token {your_token}

有些仓库会有多种语言的 README，还需要获取指定语言的 README 内容：

1
2
3



GET /repos/{owner}/{repo}/contents/README.{lang}.md HTTP/1.1
Host: api.github.com
Authorization: token {your_token}

另外，GitHub API 有访问频率限制，需要在请求头中添加 Authorization 字段，值为 token {your_token}。¹

3 Content Adapters

在项目文件夹中创建 _content.gotmpl，添加以下代码：

1

{{- partial "adapters/projects.html" . -}}

目录结构如下：

1
2
3
4
5
6



content/
├── projects/
│ ├── _content.gotmpl <-- content adapter
│ └── _index.md <-- layout: projects
data/
└── projects.yml <-- projects data

然后，打开 hugo.toml 文件，配置的 projectsAdapters 选项，启用内容适配器：

1
2
3
4
5
6
7



[params]
 [params.projectsAdapters]
 enable = true
 onlyPublic = true
 categories = []
 collections = []
 ignoreList = []

好了，现在准备工作都做完了，剩下要做的就是实现 adapters/projects.html 就好了。

思路：

遍历 data/projects.yml 中的项目数据
通过 GitHub API 获取 README 内容
README 解析为 Markdown 格式，并处理图片链接，部分字符转义
将 README 内容添加到 Hugo 文章中

具体的源码实现可以查看 component-projects 主题组件。

4 实现效果

点击跳到 GitHub 生成 token，选择名为 public_repo 的范围以生成个人访问令牌。 ↩︎

不使用任何框架，只使用原生 HTML、CSS 和 JavaScript 的一些小 demo。

2024-09-13 10:36:29

HTML demos

不使用任何框架，只使用原生 HTML、CSS 和 JavaScript 的一些小 demo。

文件预览

直接浏览器打开 src 目录下的 HTML 文件。

serve 预览

1
2

yarn
yarn serve

然后访问 http://localhost:3000。

⚙️ Versioning, change-log and release.

2024-09-05 02:10:59

FixIt Releaser

Automatically update FixIt internal version number and generate changelog.

Installation

1

npm install fixit-releaser --save-dev

Configuration

Add the following to package.json of FixIt project.

1
2
3
4
5
6



{
 "scripts": {
 "version": "fixit-releaser version --prod",
 "release": "fixit-releaser changelog"
 }
}

Usage

1
2
3
4
5
6



npx fixit-releaser version --prod
# Update the FixIt version from v0.3.12-1ca9fdb7 to v0.3.12.
npx fixit-releaser version --dev
# Update the FixIt version from v0.3.12-1ca9fdb7 to v0.3.12-2ca9fdb7.
npx fixit-releaser changelog --starting-version v0.3.10
# auto-changelog: 6 kB written to CHANGELOG.md

Hugo theme component for JSON feed custom Output Format.

2024-08-22 11:28:23

Hugo JSON Feed

Hugo theme component for JSON feed custom Output Format.

This component enables JSON feeds for your site.

Demo

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:

1
2
3
4
5



[module]
 [[module.imports]]
 path = "github.com/hugo-fixit/FixIt"
+ [[module.imports]]
+ path = "github.com/hugo-fixit/hugo-json-feed"

Configuration

Add “jsonfeed” to all the Page Kinds for which you want to create JSON feeds:

1
2
3
4
5
6
7



[outputs]
 # <baseURL>/feed.json
 home = ["html", "rss", "jsonfeed"]
 # <baseURL>/posts/feed.json etc.
 section = ["html", "rss", "jsonfeed"]
 # <baseURL>/tags/foo/feed.json etc.
 term = ["html", "rss", "jsonfeed"]

If your site uses multiple theme components, you need to merge the outputs configuration of all theme components. For example, if your site uses both the FixIt and hugo-json-feed theme components, you need to merge the outputs configuration of the two theme components:

1
2
3
4
5
6
7



[outputs]
 _merge = "shallow"
 home = ["html", "rss", "jsonfeed", "archives", "offline", "readme", "baidu_urls", "search"]
 page = ["html", "markdown"]
 section = ["html", "rss", "jsonfeed"]
 taxonomy = ["html"]
 term = ["html", "rss", "jsonfeed"]

Parameters

You can set the following parameters in your site configuration file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25



[params]
 # Global Feed config for JSON feed.
 [params.feed]
 # The number of posts to include in the feed. If set to -1, all posts.
 limit = 10
 # whether to show the full text content in feed.
 fullText = true

 # Section page config (all pages in section)
 [params.section]
 # Section feed config for JSON feed.
 [params.section.feed]
 # The number of posts to include in the feed. If set to -1, all posts.
 limit = -1
 # whether to show the full text content in feed.
 fullText = false

 # Term list (category or tag) page config
 [params.list]
 # Term list feed config for JSON feed.
 [params.list.feed]
 # The number of posts to include in the feed. If set to -1, all posts.
 limit = -1
 # whether to show the full text content in feed.
 fullText = false

Front Matter

You can set the following parameters in the front matter of the content file:

1
2
3
4
5
6
7
8



---
title: "Hello World"
date: 2024-08-24T16:06:33+08:00
hiddenFromFeed: true
feed:
 # feed.limit only invalid in section or term page(_index.md).
 limit: 10
 fullText: true

李瑞豪

李瑞豪 RSS 预览

Fly Fish

Demo

要求

安装组件

作为 Hugo 模块安装

作为 Git 子模块安装

配置

参考

1 前言

2 GitHub API

3 Content Adapters

4 实现效果

HTML demos

文件预览

serve 预览

FixIt Releaser

Installation

Configuration

Usage

Hugo JSON Feed

Demo

Install Component

Configuration

Parameters

Front Matter

该作者的社会化媒体