2025-04-10 16:35:34

MMT webfont package

The webfont package for the MMT typeface.

Demo

MMT typeface online demo

Installation

Browser

The link embedding method can be used by web pages, mini-programs, and other platforms that support loading CSS styles.

1

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mmt-webfont/dist/result.css">

1

@import url('https://cdn.jsdelivr.net/npm/mmt-webfont/dist/result.css');

NPM

To use the MMT webfont in your project, you can install it via npm:

1

npm install mmt-webfont

Then, you can import the CSS file in your project:

1

import 'mmt-webfont/dist/result.css'

Usage

Restricted font usage area:

1
2
3

article {
 font-family: 'MMT';
}

2025-04-09 10:13:22

Vercel API Proxy

API proxies powered by Vercel.

[toc]

Hosts

• https://api.lruihao.cn
• https://cell-api.vercel.app

API List

Go to the Vercel API Proxy and select the API you want to use.

Gravatar

• API: /gravatar/avatar/(.*)
• Method: GET/POST

Get the avatar of the email fee47a2f4f2cc71f99a02b0a73ecfee0 by Gravatar API.

1
2

GET /gravatar/avatar/fee47a2f4f2cc71f99a02b0a73ecfee0 HTTP/1.1
Host: cell-api.vercel.app

Google

• API: /gravatar/avatar/(.*)
• Method: *

Get favicons by Google API.

1
2

GET /google/s2/favicons?sz=64&domain=lruihao.cn HTTP/1.1
Host: cell-api.vercel.app

Netease Comment

• API: /netease/comment
• Method: GET/POST
• Request parameter:

  name	Required	type	description
  type	no	string	Type is text, returns text, is Json, returns Json by default
  id	no	int	Specify the playlist id to get the hot reviews, default is NetEase Cloud Hot Songs List

Request example:

1
2

GET /netease/comment?mid=2280569152 HTTP/1.1
Host: cell-api.vercel.app

Response example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
 "code": 1,
 "data": {
 "musicId": 40915177,
 "musicName": "父亲写的散文诗",
 "musicUrl": "http://music.163.com/song/media/outer/url?id=40915177",
 "artist": "许飞",
 "picUrl": "http://p1.music.126.net/h00CveXrABOfiWmFDLzRDg==/3405187515194971.jpg",
 "content": "一首歌 一万个人的故事",
 "nickname": "Gallianoo",
 "avatarUrl": "http://p2.music.126.net/3U7kD9M39sfkrPdWVvaGog==/109951163278309929.jpg",
 "likedCount": 4743,
 "time": 1457059879799,
 "timeStr": "2016-03-04"
 }
}

2025-01-20 15:56:38

本指南完整解释了弹性盒子（Flexible Box）的所有内容，重点介绍了父元素（弹性容器）和子元素（弹性项目）的所有不同可能属性。

背景

Flex 布局（弹性盒子）模块（截至 2017 年 10 月为 W3C 候选推荐）旨在提供一种更有效的方法来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态（因此有“弹性（flex）”一词）。

Flex 布局的主要思想是赋予容器调整其项目宽度/高度（和顺序）的能力，以最佳填充可用空间（主要是适应各种显示设备和屏幕尺寸）。一个弹性容器会扩展项目以填充可用的空闲空间，或缩小它们以防止溢出。

最重要的是，Flex 布局是方向无关的，与常规布局（块布局是基于垂直的，而行内布局是基于水平的）相比。虽然这些布局在页面上工作良好，但它们缺乏灵活性（不带双关意味）来支持大型或复杂的应用程序（特别是在方向变化、调整大小、拉伸、收缩等方面）。

基础知识和术语

由于 flexbox 是一个整体模块，而不是单个属性，因此它涉及很多内容，包括其整个属性集。其中一些属性应设置在容器（父元素，称为“弹性容器”）上，而其他属性应设置在子元素（称为“弹性项目”）上。

如果“常规”布局基于块和内联流方向，则弹性布局基于“弹性流方向”。请看规范中的这张图，它解释了弹性布局背后的主要思想。

项目将按照主轴（main axis）或横轴（cross axis）进行布局。

• 弹性容器（flex container）
  包含弹性项目的父元素。
• 弹性项目（flex item）
  弹性容器的子元素。
• 主轴（main axis）
  弹性容器的主轴是弹性项目排列的主要轴。请注意，主轴不一定是水平的；这取决于属性 flex-direction（见下文）。
• 主轴起点（main-start） | 主轴终点（main-end）
  弹性项目从主轴起点开始排列，直到主轴终点。
• 主轴尺寸（main size）
  弹性项目的宽度或高度，取决于主轴的方向，是项目的主尺寸。弹性项目的主尺寸属性是主维度上的 width 或 height 属性。
• 横轴（cross axis）
  与主轴垂直的轴称为横轴。其方向取决于主轴的方向。
• 横轴起点（cross-start） | 横轴终点（cross-end）
  弹性行（flex line）填充项目并放置在容器中，从横轴起点开始，向横轴终点方向排列。
• 横轴尺寸（cross size）
  弹性项目的宽度或高度，取决于横轴的方向，是项目的横尺寸。横尺寸属性是横向维度上的 width 或 height 属性。

弹性布局属性

父元素（弹性容器）的属性

display

这定义了一个弹性容器；根据给定的值，可以是内联或块级。这为其所有直接子元素启用弹性上下文。

1
2
3

.container {
 display: flex | inline-flex;
}

请注意，CSS 列对弹性容器没有影响。

flex-direction

这建立了主轴，从而定义了弹性项目在弹性容器中放置的方向。Flexbox 是一个单向布局概念（除了可选的换行）。将弹性项目主要视为在水平行或垂直列中布局。

1
2
3

.container {
 flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：在 ltr 中从左到右；在 rtl 中从右到左
• row-reverse：在 ltr 中从右到左；在 rtl 中从左到右
• column：与 row 相同，但从上到下
• column-reverse：与 row-reverse 相同，但从下到上

flex-wrap

默认情况下，所有弹性项目都将尝试适应一行。你可以更改此属性并允许项目根据需要换行。

1
2
3

.container {
 flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：所有弹性项目都在一行上。
• wrap：弹性项目将换行到多行，从上到下。
• wrap-reverse：弹性项目将从下到上换行到多行。

flex-flow

这是 flex-direction 和 flex-wrap 属性的简写，它们共同定义了弹性容器的主轴和横轴。默认值是 row nowrap。

1
2
3

.container {
 flex-flow: column wrap;
}

justify-content

这定义了沿主轴的对齐方式。它有助于分配当所有弹性项目在一行上都不可调整大小或可调整大小但已达到最大尺寸时剩余的额外空间。它还对项目溢出行时的对齐方式施加了一些控制。

1
2
3

.container {
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start（默认）：项目向弹性方向的起点对齐。
• flex-end：项目向弹性方向的终点对齐。
• start：项目向 writing-mode 方向的起点对齐。
• end：项目向 writing-mode 方向的终点对齐。
• left：项目向容器的左边缘对齐，除非这与 flex-direction 不符，则表现为 start。
• right：项目向容器的右边缘对齐，除非这与 flex-direction 不符，则表现为 end。
• center：项目在行中居中对齐
• space-between：项目在行中均匀分布；第一个项目在起始线，最后一个项目在终止线
• space-around：项目在行中均匀分布，周围有相等的空间。请注意，视觉上这些空间并不相等，因为所有项目在两侧都有相等的空间。第一个项目在容器边缘有一个单位的空间，但下一个项目之间有两个单位的空间，因为下一个项目有自己的间距。
• space-evenly：项目分布，使得任何两个项目之间的间距（以及到边缘的空间）相等。

请注意，这些值的浏览器支持是有差异的。例如，某些版本的 Edge 从未支持 space-between，而 start/end/left/right 尚未在 Chrome 中实现。MDN 有详细的图表。最安全的值是 flex-start、flex-end 和 center。

还有两个附加关键字可以与这些值配对：safe 和 unsafe。使用 safe 确保无论你如何进行这种类型的定位，都不会将元素推到屏幕外（例如，推到顶部）以至于内容无法滚动到（称为“数据丢失”）。

align-items

这定义了当前行上弹性项目沿横轴的默认布局行为。可以将其视为横轴（垂直于主轴）的 justify-content 版本。

1
2
3

.container {
 align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）
• flex-start / start / self-start：项目放置在横轴的起点。这些之间的区别很微妙，主要是关于遵守 flex-direction 规则或 writing-mode 规则。
• flex-end / end / self-end：项目放置在横轴的终点。区别再次很微妙，主要是关于遵守 flex-direction 规则与 writing-mode 规则。
• center：项目在横轴上居中对齐
• baseline：项目对齐，使它们的基线对齐

safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用（尽管请注意浏览器支持），并帮助你防止对齐元素使内容变得不可访问。

align-content

这在横轴上有额外空间时对齐弹性容器的行，类似于 justify-content 在主轴上对齐单个项目。

1
2
3

.container {
 align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal（默认）：项目按默认位置打包，仿佛未设置任何值。
• flex-start / start：项目打包到容器的起点。（更多支持的）flex-start 遵守 flex-direction，而 start 遵守 writing-mode 方向。
• flex-end / end：项目打包到容器的终点。（更多支持的）flex-end 遵守 flex-direction，而 end 遵守 writing-mode 方向。
• center：项目在容器中居中对齐
• space-between：项目均匀分布；第一行在容器的起点，最后一行在终点
• space-around：项目均匀分布，每行周围有相等的空间
• space-evenly：项目均匀分布，周围有相等的空间
• stretch：行拉伸以占据剩余空间

safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用（尽管请注意浏览器支持），并帮助你防止对齐元素使内容变得不可访问。

gap, row-gap, column-gap

gap 属性明确控制弹性项目之间的空间。它仅在项目之间应用间距，而不是在外边缘。

1
2
3
4
5
6
7
8

.container {
 display: flex;
 ...
 gap: 10px;
 gap: 10px 20px; /* 行间距 列间距 */
 row-gap: 10px;
 column-gap: 20px;
}

这种行为可以被认为是最小的间隙，如果间隙更大（由于类似 justify-content: space-between; 的原因），则间隙仅在该空间变小的情况下生效。

它不仅适用于 flexbox，gap 也适用于网格和多列布局。

子元素（弹性项目）的属性

order

默认情况下，弹性项目按源顺序布局。但是，order 属性控制它们在弹性容器中出现的顺序。

1
2
3

.item {
 order: 5; /* 默认值是 0 */
}

具有相同顺序的项目恢复为源顺序。

flex-grow

这定义了弹性项目在必要时增长的能力。它接受一个无单位的值，作为比例。它决定了弹性容器内可用空间的多少应该由该项目占据。

如果所有项目的 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子元素。如果其中一个子元素的值为 2，则剩余空间将占据其他元素的两倍（或至少尝试这样做）。

1
2
3

.item {
 flex-grow: 4; /* 默认值是 0 */
}

负数无效。

flex-shrink

这定义了弹性项目在必要时收缩的能力。

1
2
3

.item {
 flex-shrink: 3; /* 默认值是 1 */
}

负数无效。

flex-basis

这定义了在分配剩余空间之前元素的默认大小。它可以是一个长度（例如 20%、5rem 等）或一个关键字。auto 关键字表示“查看我的宽度或高度属性”（这曾经由 main-size 关键字暂时完成，直到被弃用）。content 关键字表示“根据项目的内容调整大小”——这个关键字尚未得到很好的支持，因此很难测试，也很难知道它的兄弟 max-content、min-content 和 fit-content 的作用。

1
2
3

.item {
 flex-basis: | auto; /* 默认值是 auto */
}

如果设置为 0，则不考虑内容周围的额外空间。如果设置为 auto，则根据其 flex-grow 值分配额外空间。请参见此图。

flex

这是 flex-grow、flex-shrink 和 flex-basis 的简写。第二个和第三个参数（flex-shrink 和 flex-basis）是可选的。默认值是 0 1 auto，但如果你使用单个数字值设置它，例如 flex: 5;，则会将 flex-basis 更改为 0%，因此它类似于设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0%;。

1
2
3

.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建议你使用此简写属性，而不是单独设置各个属性。简写智能地设置其他值。

align-self

这允许覆盖单个弹性项目的默认对齐方式（或由 align-items 指定的对齐方式）。

请参阅 align-items 解释以了解可用值。

1
2
3

.item {
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

请注意，float、clear 和 vertical-align 对弹性项目没有影响。

为 Flexbox 添加前缀

我们可以使用 Sass@mixin 来帮助处理一些浏览器前缀问题。

 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
26
27
28
29
30
31
32

@mixin flexbox() {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}

@mixin flex($values) {
 -webkit-box-flex: $values;
 -moz-box-flex: $values;
 -webkit-flex: $values;
 -ms-flex: $values;
 flex: $values;
}

@mixin order($val) {
 -webkit-box-ordinal-group: $val; 
 -moz-box-ordinal-group: $val; 
 -ms-flex-order: $val; 
 -webkit-order: $val; 
 order: $val;
}

.wrapper {
 @include flexbox();
}

.item {
 @include flex(1 200px);
 @include order(2);
}

参考

本文内容翻译自 Chris Coyier 的 A Complete Guide to Flexbox，感谢原作者的辛勤付出。

除此之外，你还可以通过一些小游戏来学习 Flexbox：

• Flexbox Froggy - 一个有趣的游戏，可以帮助你学习 Flexbox。
• Flexbox Defense - 一个塔防游戏，可以帮助你学习 Flexbox。

题外话

这篇文章的翻译早就想做了，但是一直没有时间，拖了一年，今天终于抽出时间来完成了。

2025-01-14 17:10:09

action-component-list | FixIt

This is a GitHub Action to generate a list of all hugo-fixit theme components.

How to use

You can reference different stable versions of this action. For more information, see Versioning in the GitHub Actions toolkit.

To include the action in a workflow in another repository, you can use the uses syntax with the @ symbol to reference a specific branch, tag, or commit hash.

1. Star this repository 😉

2. Go to your repository

3. Add the following section to your README.md file, you can give whatever title you want. Just make sure that you use <!-- HUGO_FIXIT_COMPONENTS:START --><!-- HUGO_FIXIT_COMPONENTS:END --> in your readme. The workflow will replace this comment with the actual blog post list:

   1 2 3 4

   # Hugo FixIt Components <!-- HUGO_FIXIT_COMPONENTS:START --> <!-- HUGO_FIXIT_COMPONENTS:END -->

4. Create a folder named .github and create a workflows folder inside it, if it doesn’t exist.

5. Create a new file named fixit-component-list.yml with the following contents inside the workflows folder:

   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 26 27 28 29 30 31 32 33 34

   name: Generate hugo-fixit component list on: schedule: # Run workflow automatically - cron: '0 0 * * *' # Runs every day at 00:00 UTC workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly permissions: contents: write # To write the generated contents to the readme jobs: generate-component-list: name: Update this repo's README with the list of hugo-fixit theme components runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Generate hugo-fixit component list id: test-action uses: hugo-fixit/action-component-list@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: comment_tag_name: HUGO_FIXIT_COMPONENTS template: '- [{$repo.name}]({$repo.html_url}): {$repo.description}' - name: Print Output id: output run: echo "${{ steps.test-action.outputs.repos }}" - name: Commit changes uses: stefanzweifel/git-auto-commit-action@v5 with: commit_message: 'Docs: update hugo-fixit component list' commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'

6. Go to repository settings, Click on Actions > General. Update the “Workflow permissions” to “Read and write permissions”. Click on save.

7. Wait for it to run automatically, or you can also trigger it manually to see the result instantly.

Inputs

Outputs

Example

Insert the following code block in your Markdown file to display the list of hugo-fixit components.

1
2
3
4

The list of hugo-fixit components will be displayed here.

<!-- HUGO_FIXIT_COMPONENTS:START -->
<!-- HUGO_FIXIT_COMPONENTS:END -->

The list of hugo-fixit components will be displayed here.

• fixit-bundle
  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
• cmpt-flyfish
  🐟 A canvas implemented animation effect of small fish swimming.
• cmpt-mdevtools
  Mobile devtools component powered by vConsole and eruda.
• cmpt-translate
  🌐 A component for site automatic translation.
• component-projects
  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
• hugo-atom-feed
  Hugo theme component for ATOM feed custom Output Format.
• hugo-json-feed
  Hugo theme component for JSON feed custom Output Format.
• shortcode-asciinema
  A Hugo theme component with asciinema-embed shortcode.
• shortcode-caniuse
  A Hugo theme component with caniuse shortcode.
• shortcode-docs-bookmark
  🔖 Embed bookmark of FixIt Docs.
• shortcode-mmt-netease
  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
• shortcode-rewards
  A Hugo theme component with reward-log or sponsor-log shortcode.

2025-01-08 17:20:48

shortcode-asciinema | FixIt

Demo

安装主题#CLI | FixIt

要求

适用于所有 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/shortcode-asciinema"

在 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/shortcode-asciinema.git themes/shortcode-asciinema

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

1

theme = ["FixIt", "shortcode-asciinema"]

记录终端

你可以使用 asciinema 命令记录终端并将其上传到 asciinema.org。

1
2
3

asciinema rec demo.cast
# press <ctrl-d> or type "exit" when you're done
asciinema upload demo.cast

使用 Shortcode

以下是一个使用示例：

1

{{< asciinema-embed 697494 >}}

呈现效果如下：

参考

• 开发主题组件 | FixIt
• 如何开发 Hugo 主题组件 | FixIt

2024-12-06 10:32:22

在这篇文章中，我们将探讨如何使用 CSS 获取视口尺寸，并展示一个简单的实现示例。

1 效果

调整浏览器窗口大小，你会发现视口的宽度和高度会实时更新（旧浏览器可能不支持）。

重要的是，这个效果是纯 CSS 实现的，不需要 JavaScript，真的震惊了！

2 实现原理

1. 定义 CSS 自定义属性（@property） --vw 和 --vh，分别表示视口的宽度和高度。
2. 使用 tan() 和 atan2() 函数计算视口的宽度和高度。
3. 使用 counter 和 counter-reset 属性将计算结果显示在页面上。

2.1 计算视口尺寸

我们可以使用 vw 和 vh 获取浏览器视口尺寸，但是这是相对单位，所以需要转换为 px 才行。我们先利用自定义属性把相对单位转成 px，然后最关键的一步是巧妙地利用了三角函数 $tan(arctan(a)) = a$ 来实现这个转换。

2.2 三角函数

在三角函数中，$tan(θ)$ 表示一个角度 $θ$ 的正切值，它等于对边（opposite）与邻边（adjacent）的比值。反过来，$arctan(a)$ 表示一个数值 $a$ 的反正切值，它返回一个角度 $θ$，使得 $tan(θ) = a$，因此得到公式：

$$ tan(arctan(a)) = a $$

CSS 中的 tan() 和 atan2() 函数可以用来计算正切值和反正切值。

tan() 函数的语法如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 单个 <angle> 值 */
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));

/* 单个 <number> 值 */
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 – 1));

/* 其他值 */
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));

atan2() 函数接受两个参数，对于所给两值 x 和 y，函数 atan2(y, x) 计算并返回正半横轴与从原点到点 (x, y) 的射线的夹角。函数的语法如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 两个 <number> 值 */
transform: rotate(atan2(3, 2));

/* 两个 <dimension> 值 */
transform: rotate(atan2(1rem, -0.5rem));

/* 两个 <percentage> 值 */
transform: rotate(atan2(20%, -30%));

/* 其他值 */
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));

3 代码示例

以下是完整的 HTML 和 CSS 代码，你也可以在我的 html-demo 中查看。

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CSS Viewport Size</title>
 <style>
 /* 自定义属性是为了把 vw 和 vh 转成 px */
 @property --vw {
 syntax: '<length>';
 inherits: true;
 initial-value: 100vw;
 }
 @property --vh {
 syntax: '<length>';
 inherits: true;
 initial-value: 100vh;
 }
 /*
 核心公式：
 tan(θ) = opposite / adjacent
 θ = arctan(opposite / adjacent)
 tan(arctan(a)) = a
 */
 :root {
 --width: tan(atan2(var(--vw), 1px));
 --height: tan(atan2(var(--vh), 1px));
 }
 body::before {
 content: counter(width) ' X ' counter(height);
 counter-reset: width var(--width) height var(--height);
 display: block;
 font-size: 150px;
 font-weight: 900;
 position: fixed;
 width: fit-content;
 height: fit-content;
 inset: 0;
 margin: auto;
 }
 </style>
</head>
<body>
</body>
</html>

4 兼容性

主要是 counter 和 counter-reset 属性的兼容性问题，看漫山红遍，层林尽染。