帰宅部

さらば、すべてのエヴァンゲリオン

WEB 样式测试

本页面用于Hugo Website界面的功能测试。

标题 and (提示栏)

标题栏

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

级数越大，间距越大

嵌套效果

Unicode

🥺 漢 字 の 部 首 画 数 読 み 方 筆 順 適 湜 ① 葮 焱 暒 妏 雫 翱翔 〆 ㋿ ㍻ ｽｷ

(*ゝω・)ﾉ♥♥♥ ･ﾟ:*:ﾟ

code

1// CPP
2#include <iostream>
3using namespace std;
4int main(){
5	cout<<"⑨"<<endl;
6	return 0;
7}

video-loop

エンダーマグノリア最終戦

样式代码
1{\{< video src=/media/video/2025/magnolia.mp4 width=800px caption="`エンダーマグノリア最終戦`">}\}

自定义图片

ぼっち・ざ・ろっく！

图片的布局是极其繁琐的，宽高不同的图片的放置更是地狱。并且希望图片是可以点击放大的。底部有可选的说明文字。

目前方法，可以放多张图，用半角逗号隔开，但是每次指定一排放置，强迫症患者必须手搓，flex居中。建议同宽度的图片一起放。宽度指定的是单张图片的最大宽度，超过此宽度先变成单列排放，更小的情况单列进行图片缩放。

详细说明

code

1代码为了避开渲染，全部添加 \，语法忘记时复制去掉 \
2
3{\{< img src="/media/abc.png, /media/ss.jpeg"  width="500px" >}\}
4{\{< img src="/media/abc.png"  width="50%" cation="说明文字" >}\}
5{\{< img src="/media/abc.png"  width="50%" >}\}
6网页过宽采用超过一定大小后，向两边padding的做法（大部分网站通用做法），保证纵向大小不变。对于宽度过小的情况，采用等比缩小的策略。

markdown 标记测试

間違った 斜体 加粗 超链接 Tex -> $\LaTeX$

id name level
0 ao 99

特殊样式

折叠框

点击展开

啥都没有

猜猜看有什么

🐮🍺

啥都没有哦
🥹

Aplayer

详细说明

code

1{/{< aplayer id=2 url=/media/fly_away.mp3 name="fly away"  artist=上原あずみ >}/}

参数 id url

 1<div id="{{- .Get `id` -}}"></div>
 2<script>
 3const ap = new APlayer({
 4    container: document.getElementById('{{- .Get `id` -}}'),
 5    audio: [{
 6        name: '{{- .Get `name` -}}' ,
 7        artist: '{{- .Get `artist` | default `` -}}',
 8        url: '{{ .Site.BaseURL  }}{{ .Get `url` -}}',
 9        cover: '{{- .Get `cover` | default `` -}}',
10        autoplay: '{{- .Get `auto` | default `true` -}}',
11        lrc: '{{- .Get `lrc` | default `无歌词` -}}'
12    }]
13});
14</script>

Dplayer

详细说明

code

1{/{< dplayer id=1 url=/media/vtest.mp4 >}/}

参数 id path

 1<div align=center>
 2<div id="{{- .Get `id`  -}}"></div>
 3<script>
 4    const dp = new DPlayer({
 5    container: document.getElementById('{{- .Get `id` -}}'),
 6    video: {
 7        url: '{{ .Site.BaseURL  }}{{- .Get `path` -}}',
 8    },
 9});
10</script>
11</div>

Youtube

Twitter

Bilibili

由于B站的接口，实测用手机端访问，User-agent会导致有的视频无法加载被替换，怀疑与反外链有关

PDF 内嵌

用于大页面的$\LaTeX$的加载

详细说明

code

1{\{< pdf id=s src=/media/pdf/Transformer.pdf >}\}

 1<!-- 不可纯数字 -->
 2
 3<div id='{{- .Get `id` -}}'></div>
 4<script>
 5    var options = {
 6            fallbackLink: "<p>This browser don't support embeded PDFs. <a href='[url]'>Download it</a></p>"
 7            };
 8    PDFObject.embed("{{ .Site.BaseURL  }}{{- .Get `path` -}}", "#a{{- .Get `id` -}}", {height:'{{- .Get `h` | default `50rem` -}}'}, options);
 9</script>
10
11<!--
12引擎不支持的时候，使用fallback，给出Link
13-->

Spotify

效果展示

Single

Artist

List

$\LaTeX$

行公式效果：

$$ f(x)=\int_{-\infty}^\infty\widehat f\xi e^{2\pi i\xi x}d\xi $$$$ v_\pi(s) = \sum_{a \in \mathcal{A}} \pi(a|s) q_\pi(s,a) $$$$ \sigma \left( \frac{QK^T}{\sqrt{d}} \right) V $$$$ \begin{equation} \begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} \end{equation} $$$$ \begin{equation} x = a_0 + \cfrac{1}{a_1 + \cfrac{1}{a_2 + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } } \end{equation} $$

内联公式效果：$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$，由$\LaTeX$ 强力驱动

详细说明

基于$KaTeX$支持其所有特性，唯一麻烦的问题是根据goldmark的转译规则，需要注意符号转译

1注意对于 Hugo Goldmark：
2对于单独出现的'\'符号，需要使用转义\\表达
3我们可以用passthrough hook来绕过，需要加上 $$ $$

滑动方案：

隐藏了横向滑动条，PC端使用SHIFT + 滚轮或者触控板操作

 1$$ E = MC^2 $$
 2$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
 3$\LaTeX$
 4
 5left: "$$", right: "$$"
 6left: "\\[", right: "\\]"
 7left: "$", right: "$"
 8left: "\\(", right: "\\)"
 9left: "\begin{equation}", right: "\end{equation}"
10left: "\begin{align}", right: "\end{align}"
11left: "\begin{alignat}", right: "\end{alignat}"
12left: "\begin{gather}", right: "\end{gather}"
13left: "\begin{CD}", right: "\end{CD}"

mermaid

详细说明

用于画图，但是对页面加载负担较大（移动端），并且导致切换系统主题时，会刷新界面，以适配主题

并且对于窄屏幕而言，甘特图，饼图等会出现样式重叠，建议生成后，使用图片嵌入（此处已修改为至少900px）

 1{\{< mermaid >}\}
 2gantt
 3    dateFormat  YYYY-MM-DD
 4    title Adding GANTT diagram functionality to mermaid
 5    section A section
 6    Completed task            :done,    des1, 2014-01-06,2014-01-08
 7    Active task               :active,  des2, 2014-01-09, 3d
 8    Future task               :         des3, after des2, 5d
 9    Future task2               :         des4, after des3, 5d
10    section Critical tasks
11    Completed task in the critical line :crit, done, 2014-01-06,24h
12    Implement parser and jison          :crit, done, after des1, 2d
13    Create tests for parser             :crit, active, 3d
14    Future task in critical line        :crit, 5d
15    Create tests for renderer           :2d
16    Add to mermaid                      :1d
17{\{< /mermaid >}\}

Sequence 测试



sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

GANTT



gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

Pie



pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

footnote

原神1是米哈游开发的一款奇幻题材开放世界动作角色扮演游戏，采用基于抽卡的基本免费及道具收费制。

相对引用：本篇文章

界面交叉引用：id引用

1# 相对地址
2相对引用：[本篇文章]({\{< ref "posts/test.md" >}\})
3
4# 2为元素id，标题的坐标元素默认为其内容，shortcode为自设，引脚为fnref:X
5界面交叉引用：[id引用]({\{< relref "posts/test.md#2" >}\})

reference：

Aplayer 音频播放器

Dplayer 视频播放器

KaTeX $\LaTeX$

MathJAX $\LaTeX$

PDFObject PDF

Mermaid.js Graph

  1. Genshin Impact Official Website ↩︎