emicyx blog

博客测试文章

Fri, 07 Aug 2026 00:00:00 GMT

博客测试文章

这是一篇用于测试的文章，用来确认博客的编辑和发布流程是否正常。

我可以写点什么

支持加粗、斜体、行内代码
支持代码块：

console.log("Hello, emiblog!")

注意：draft: false 表示这篇文章已经公开发布；如果想暂不发布，改成 true 即可。

前端小宠物 pet-widget 开发日记

Fri, 07 Aug 2026 00:00:00 GMT

前端小宠物 pet-widget 开发日记

这两天给博客写了一个会动的"电子宠物"，就是你现在看到右下角那个小家伙——它会随机眨眼、发呆久了会坐下打盹、鼠标还能把它拎起来晃悠。这篇日记记录一下整个开发过程和踩过的坑。

起因

博客搭好之后总觉得页面上少了点"活物"。Fuwari 主题本身已经很完整了，但再精致的静态页面也少一点互动感。于是决定塞一个吉祥物进去，要求也很简单：

不用引框架，纯 CSS + 原生 JS，方便以后迁移
不挡页面操作（把宠物放角落，别碍事）
有几个小动作：眨眼、打盹、能被拖动

整体设计

四种状态

宠物本质上是一个有限状态机，四个状态来回切换：

状态	触发	表现
`standing` 站立	默认 / 拖动放下 / 睡醒	上下漂浮 + 随机眨眼
`sitting` 坐下	无操作超过 `idleTime`（默认 30s）	轻轻摇晃 + 飘音符
`lifted` 拎起	鼠标按住拖动	悬空左右摆动
`dropping` 落下	松手	掉落回弹动画后回站立

所有状态都挂在 body 的 class 上，动画交给 CSS，JS 只负责"什么时候切换状态"。

图片资源

每张图都是 2048×2048 的透明背景 PNG，一个状态一张：

assets/
  standing.png   # 站姿
  blink.png      # 眨眼瞬间（闭眼）
  sitting.png    # 坐姿
  lifted.png     # 被拎起

图很大（单张 2~5MB），所以做了预加载 + 失败兜底：启动时用 Promise.all 把所有图先拉一遍，onerror 也 resolve（返回 ok:false），加载失败的图就跳过，不阻塞初始化。

动画全用 CSS

写轮播级粒子动画太奢侈，这种小宠物用 CSS keyframes 就够，还省 JS 主线程。核心几个：

petFloat：站立时上下漂浮 + 轻微左右摇摆 + 弹性缩放
petShake：坐下时的摇头晃脑
petDrop：松手后的落地回弹（下坠 → 弹起 → 落定）
petSquash：眨眼时身体压扁一下
petDangle：被拎起时以头顶为轴心左右摆动
petNote：坐下时头顶飘出的小音符

外加一个 drop-shadow 投影，宠物就"站"在页面上了。

几个关键实现

空闲坐下

function resetIdle() {
  clearTimeout(idleTimer);
  if (state !== 'standing') return;
  idleTimer = setTimeout(function () {
    if (state === 'standing' && !document.hidden) enterSitting();
  }, cfg.idleTime);
}

每次有交互（睡醒、放下、鼠标靠近）都会重置这个计时器。标签页切到后台时不触发坐下，回到前台再重新计时——不然宠物在你看不见的时候偷懒就很出戏。

随机眨眼

var delay = cfg.blinkMin + Math.random() * (cfg.blinkMax - cfg.blinkMin);
blinkTimer = setTimeout(blinkNow, delay);

间隔在 2.5s~6.5s 之间随机，避免像秒表一样机械。眨眼瞬间换 blink.png，150ms 后换回站姿；如果眨眼图没加载成功，就降级用 CSS 的 petSquash 压扁一下，体验也不至于断档。

拖动

拖动这块踩了点坑：

平滑跟随：不直接把元素钉在鼠标上，而是用 requestAnimationFrame 每帧朝目标位置插值 += (target - cur) * 0.32，拖起来有"重力跟随"的黏滞感，而不是生硬地瞬移。
惯性摇摆：记录横向速度，拖动时让身体向运动方向倾斜，停下来还能回弹，手感立刻不一样。
指针捕获：用 stage.setPointerCapture()，防止拖太快时指针跑到元素外面导致 pointerup 丢失、宠物卡在"拎起"状态。
边界钳制：坐标 clamp 在可视区内，不会被甩到屏幕外。

图片切换的淡入淡出

直接换 src 会"啪"地一下变脸，很生硬。写了个 swapImg(src, fade)：先置 opacity:0，180ms 后再换图并淡入，过渡就自然了。

接入 Astro 博客（Fuwari 主题）

1. 静态资源放进 public

把 pet-widget/ 整个目录拷到 public/ 下，这样 Astro 会原样发布为 /pet-widget/...：

public/pet-widget/
  pet-widget.css
  pet-widget.js
  assets/*.png

2. 全站布局挂载

在 src/layouts/Layout.astro 的 </body> 前加入挂载点、样式和脚本：

<div id="pet-widget"></div>
<link rel="stylesheet" href="/pet-widget/pet-widget.css" is:inline />
<script is:inline>
  window.PetWidgetConfig = {
    size: 200,
    idleTime: 5000,   // 测试用 5s，正式改回 30000
    dock: 'bottom-right',
    assets: {
      standing: '/pet-widget/assets/standing.png',
      blink:    '/pet-widget/assets/blink.png',
      sitting:  '/pet-widget/assets/sitting.png',
      lifted:   '/pet-widget/assets/lifted.png'
    }
  };
</script>
<script src="/pet-widget/pet-widget.js" is:inline defer></script>

3. `is:inline` 是关键

Astro 默认会把 <script> 收集起来打包，插件 is:inline 后脚本会原样输出、不被 Astro 处理。这很重要，因为：

配置脚本要在宠物 JS 之前执行，一旦被 Astro 重新排序就可能读到空配置
宠物脚本用的是全局状态，不需要被打包成模块

另外挂载点放在 body 里、Swup 的容器之外，页面切换时宠物不会被重新初始化、也不会有动画重放的闪断。

调试技巧

空闲 30s 太久，等起来很难受。做了两件事加速验证：

支持 URL 参数覆盖配置：?idle=5000 ?size=160 ?offsetx=100 直接在地址栏改，不用改代码
暴露 window.__petWidget API：控制台直接调 __petWidget.sit() / wake() / blink() 手动触发状态

可配置项一览

配置	默认	说明
`dock`	`bottom-right`	停靠位置：四角任意
`size`	`220`	宠物边长 px
`idleTime`	`30000`	无操作多久后坐下
`blinkMin/Max`	`2500/6500`	眨眼随机间隔
`returnToDock`	`false`	拖放后是否飞回原位
`hideOnMobile`	`false`	小屏（<640px）隐藏
`respectReducedMotion`	`true`	尊重系统"减少动效"设置
`humAudio`	`''`	可选哼歌声效 URL

还没做完的 TODO

[ ] 眨眼 + 下蹲的组合动作
[ ] sitting-closed.png：坐下后偶尔闭眼
[ ] standing.png 换成更精美的正式立绘
[ ] 更多可交互动作（点击摸摸头？）

总之，一个能陪你在写博客时发呆的电子宠物就上线了。如果你也在用 Fuwari/Astro，直接按上面的三步就能把它搬进自己的博客。

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili

emicyx blog

博客测试文章

博客测试文章

我可以写点什么

前端小宠物 pet-widget 开发日记

前端小宠物 pet-widget 开发日记

起因

整体设计

四种状态

图片资源

动画全用 CSS

几个关键实现

空闲坐下

随机眨眼

拖动

图片切换的淡入淡出

接入 Astro 博客（Fuwari 主题）

1. 静态资源放进 public

2. 全站布局挂载

3. is:inline 是关键

调试技巧

可配置项一览

还没做完的 TODO

Markdown Extended Features

GitHub Repository Cards

Admonitions

Basic Syntax

Custom Titles

GitHub Syntax

Spoiler

Expressive Code Example

Expressive Code

Syntax Highlighting

Regular syntax highlighting

Rendering ANSI escape sequences

Editor & Terminal Frames

Code editor frames

Terminal frames

Overriding frame types

Text & Line Markers

Marking full lines & line ranges

Selecting line marker types (mark, ins, del)

Adding labels to line markers

Adding long labels on their own lines

Using diff-like syntax

Combining syntax highlighting with diff-like syntax

Marking individual text inside lines

Regular expressions

Escaping forward slashes

Selecting inline marker types (mark, ins, del)

Word Wrap

Configuring word wrap per block

Configuring indentation of wrapped lines

Collapsible Sections

Line Numbers

Displaying line numbers per block

Changing the starting line number

Simple Guides for Fuwari

Front-matter of Posts

Where to Place the Post Files

Markdown Example

An h1 header

An h2 header

An h3 header

Include Video in the Posts

YouTube

Bilibili

3. `is:inline` 是关键