对Fuwari进行一些小的改动（二）改

重要
2025年3月23日文章有较大改动，故更改标题，原标题为《对Fuwari进行一些小的改动（二）》
文章内容包括增加可添加图片标题的功能、增加可调整图片大小、在文章列表卡片中添加更新时间、给fuwari添加音乐播放器

原先的添加图片标题与调整图片大小的方案，现已废弃❌

1
## 一、图片标题
2

3
> 可在图片的下方显示标题<br>
4
> 参考了 **《Astro Blog記事の画像にキャプションを付ける》** 文章中的第一种方式
5

6
https://www.neputa-note.net/2024/07/astro-image-caption/
7

8
### 1.1 示例
9

10
代码：
11
```md title="demo1.md"
12
![シオン(诗音)](/avatar.webp)
13
```
14

15
结果：
16
![シオン(诗音)](/avatar.webp)
17

18
代码：
19
```md title="demo2.md"
20
![シオン(诗音)](/avatar.webp) | ![シオン(诗音)](/avatar.webp)
21
-----------------------------|----------------------------
22
```
23

24
结果：
25
![シオン(诗音)](/avatar.webp) | ![シオン(诗音)](/avatar.webp)
26
-----------------------------|-----------------------------
27

28
:::tip[补充]
29
表格头的下边界可通过`css`调整
30
```css title="src\styles\main.css"
31
thead:has(figure) {
32
  border: none;
33
}
34
```
35
:::
36

37
### 1.2 改动点
38
1. 安装两个插件
39

40
```cmd
41
pnpm add -D @microflash/remark-figure-caption remark-gfm
42
```
43

44
2. 导入两个插件
45

46
```js title="astro.config.mjs" ins={1-2, 9-10}
47
import remarkGfm from 'remark-gfm'
48
import remarkFigureCaption from '@microflash/remark-figure-caption'
49

50
export default defineConfig({
51
    // ...
52
    markdown: {
53
        remarkPlugins: [
54
            // ...
55
            remarkFigureCaption,
56
            remarkGfm,
57
        ]
58
    }
59
})
60
```
61

62
3. 添加样式
63

64
```css title="src\styles\main.css"
65
figure {
66
  width: fit-content;
67
}
68

69
figure > figcaption {
70
  text-align: center;
71
}
72
```
73

74
## 二、调整图片大小与图片居中
75

76
> 参考了`remark-figure-caption`的部分代码
77

78
https://github.com/Microflash/remark-figure-caption
79

80
### 2.1 示例
81

82
代码：
83
```md title="demo3.md"
84
![シオン(诗音) w-50%](/avatar.webp)
85
```
86

87
结果：
88
![シオン(诗音) w-50%](/avatar.webp)
89

90
代码：
91
```md title="demo4.md"
92
![シオン(诗音) m-auto](/avatar.webp)
93
```
94

95
结果：
96
![シオン(诗音) m-auto](/avatar.webp)
97

98
代码：
99
```md title="demo3.md"
100
![シオン(诗音) w-30% m-auto](/avatar.webp)
101
```
102

103
结果：
104
![シオン(诗音) w-30% m-auto](/avatar.webp)
105

106
### 2.2 改动点
107

108
1. 删除之前在`main.css`中添加的样式（如果有的话）
109

110
```css title="src\styles\main.css" del={1-7}
111
figure {
112
  width: fit-content;
113
}
114

115
figure > figcaption {
116
  text-align: center;
117
}
118
```
119

120
2. 在`📁src\plugins`里新建`remark-image-attr.js`，代码如下
121

122
```js title="src\plugins\remark-image-attr.js"
123
import { visit } from "unist-util-visit";
124

125
export default function remarkImageAttr() {
126
    return (tree) => {
127
        var regex1 = / w-([0-9]+)%/;
128
        var regex2 = / m-auto/;
129

130
        visit(
131
      tree,
132
      (node) => node.type === "image",
133
      (node, index, parent) => {
134
                var alt = node.alt;
135
                node.data = {hProperties: {}};
136
                if (parent.type === "figure") {
137
                    parent.data.hProperties = {style: "width: fit-content;"};
138
                }
139
                if (alt.search(regex1) != -1) {
140
                    node.data.hProperties.width = `${alt.match(regex1)[1]}%`;
141
                    node.alt = node.alt.replace(regex1, "");
142
                }
143
                if (alt.search(regex2) != -1) {
144
                    node.data.hProperties.style = "margin-inline: auto;";
145
                    node.alt = node.alt.replace(regex2, "");
146
                    if (parent.type === "figure") {
147
                        parent.data.hProperties.style = null;
148
                    }
149
                }
150
      }
151
    );
152

153
        visit(
154
      tree,
155
      (node) => node.type === 'figcaption',
156
      (node, index, parent) => {
157
                var text = node.children[0].value
158
                node.data.hProperties = { style: "text-align: center;" };
159
                if (text.search(regex1) != -1) {
160
                    if (text.search(regex2) == -1) {
161
                        node.data.hProperties.style = node.data.hProperties.style + `width: ${text.match(regex1)[1]}%;`;
162
                    }
163
                    node.children[0].value = node.children[0].value.replace(regex1, "");
164
                }
165
                if (text.search(regex2) != -1) {
166
                    node.children[0].value = node.children[0].value.replace(regex2, "");
167
                }
168
      }
169
    );
170

171
    }
172
}
173
```
174

175
2. 导入
176

177
```js title="astro.config.mjs" ins={1, 10}
178
import remarkImageAttr from './src/plugins/remark-image-attr.js'
179

180
export default defineConfig({
181
    // ...
182
    markdown: {
183
        remarkPlugins: [
184
            // ...
185
            remarkFigureCaption,
186
            remarkGfm,
187
            remarkImageAttr,
188
        ]
189
    }
190
})
191
```

补充知识

<details></details>是html的语法，用来折叠内容，可以直接写在md文档里

代码：

1
<details>
2
  <summary>Details</summary>
3
  Something small enough to escape casual notice.
4
</details>

结果：

Details

Something small enough to escape casual notice.

详细说明：<details>: The Details disclosure element

可以用 ```` 包裹住 ```，以此类推

代码：

1
`````md title="demo2.md"
2
````text
3
```md title="demo3.md"
4
```
5
````
6
`````

结果：

1
````text
2
```md title="demo3.md"
3
```
4
````

一、图片标题（改）#

感谢Hasenpfote大佬的代码，直接照着改动点改就可以
feat: add image-caption feature

目前该代码还没有合并到Fuwari的主分支内

二、调整图片大小（改）#

在加入图片标题功能后，增加调整图片大小的功能

2.1 示例#

代码：

1
![博主的头像 w-50%](/avatar.webp "シオン(诗音)")

结果：

シオン(诗音)

2.2 改动点#

新增remark-image-width.js文件，文件内容如下：

1
import { visit } from "unist-util-visit";
2

3
export default function remarkImageWidth() {
4
    var regex = / w-([0-9]+)%/
5
    const transformer = async tree => {
6
        const visitor = (paragraphNode, index, parent) => {
7
            if (index === undefined || parent === undefined) return
8

9
            parent.children.forEach((node, index, parent) => {
10
                if (node.type === 'text' && node.data !== undefined && node.data.hName === 'figure') {
11
                    findImgNodes(node).forEach(img => {
12
                        const { parentNode, imgNode } = img
13
                        if (imgNode.properties.alt.search(regex) != -1) {
14
                            if (parentNode !== undefined && parentNode.tagName === 'figure') {
15
                                imgNode.properties.width = `${imgNode.properties.alt.match(regex)[1]}%`
16
                                parentNode.properties.style = `justify-items: center;`
17
                            }
18
                            imgNode.properties.alt = imgNode.properties.alt.replace(regex, "")
19
                        }
20
                    })
21
                }
22
            })
23
        }
24
        visit(tree, 'paragraph', visitor)
25
    }
26
    return transformer
27
}
28

29
function findImgNodes(node, parent = undefined, imgNodes = []) {
30
    if (node.tagName === 'img') {
31
        imgNodes.push({'parentNode': parent, 'imgNode': node})
32
    } else if (node.data !== undefined && node.data.hChildren !== undefined) {
33
        node.data.hChildren.forEach(child => findImgNodes(child, node, imgNodes))
34
    } else if (node.children !== undefined) {
35
        node.children.forEach(child => findImgNodes(child, node, imgNodes))
36
    }
37
    return imgNodes
38
}

导入

1
import remarkImageWidth from './src/plugins/remark-image-width.js'
2

3
export default defineConfig({
4
    // ...
5
    markdown: {
6
        remarkPlugins: [
7
            // ...
8
            remarkImageCaption,
9
            remarkImageWidth,
10
            remarkSectionize,
11
            parseDirectiveNode,
12
        ]
13
    }
14
})

三、更新时间#

在主页的文章卡片列表里添加每篇文章的更新时间

3.1 改动点#

更改PostCard.astro文件里的PostMetadata组件属性设置

1
<PostMetadata published={published} updated={updated} tags={tags}
2
    category={category} hideTagsForMobile={true} hideUpdateDate={false} class="mb-4"></PostMetadata>
3
<PostMetadata published={published} updated={updated} tags={tags}
4
    category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>

四、音乐播放器#

提醒
目前播放器会有加载不出来或者一次性加载出来多个的问题

4.1 改动点#

新增APlayer.svelte组件和Music.astro组件

1
<div class="meting" id="meting">
2
    <!-- require APlayer -->
3
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
4
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
5
    <!-- require MetingJS -->
6
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
7
    <meting-js
8
        server="netease"
9
        type="playlist"
10
        id="7245850391"
11
        order="random"
12
        list-folded="true">
13
    </meting-js>
14
</div>

1
---
2
import WidgetLayout from './WidgetLayout.astro'
3
import APlayer from './APlayer.svelte'
4

5
const COLLAPSED_HEIGHT = '7.5rem'
6

7
interface Props {
8
  class?: string
9
  style?: string
10
}
11
const className = Astro.props.class
12
const style = Astro.props.style
13

14
const isCollapsed = false
15
---
16
<WidgetLayout name="音乐" id="music" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
17
    <div class="flex flex-col gap-1">
18
        <APlayer client:only="svelte"/>
19
    </div>
20
</WidgetLayout>

导入Music.astro组件

1
---
5 collapsed lines
2
import Profile from './Profile.astro'
3
import Tag from './Tags.astro'
4
import Categories from './Categories.astro'
5
import type { MarkdownHeading } from 'astro'
6
import TOC from './TOC.astro'
7
import Series from './Series.astro'
8
import Music from './Music.astro'
9

9 collapsed lines
10
interface Props {
11
    class? : string
12
    headings? : MarkdownHeading[]
13
    series?: string
14
}
15

16
const className = Astro.props.class
17
const headings = Astro.props.headings
18
const series = Astro.props.series
19

20
---
21
<div id="sidebar" class:list={[className, "w-full"]}>
22
    <div class="flex flex-col w-full gap-4 mb-4">
23
        <Profile></Profile>
24
    </div>
25
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
26
        <div id="series" class="flex flex-col w-full gap-4">
27
            { series && <Series series={ series }></Series> }
28
        </div>
29
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
30
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
31
        <div id="music" class="flex flex-col w-full gap-4">
32
            <Music></Music>
33
        </div>
34
    </div>
35
</div>