帰宅部

WEB样式测试

Posted on

本页面用于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{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} \]\[ x = a_0 + \cfrac{1}{a_1 + \cfrac{1}{a_2 + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } } \]

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

详细说明

本站使用 KaTeX 渲染数学公式，并通过 Hugo Goldmark passthrough 保留公式中的原始 LaTeX 内容。

Markdown 中的公式可以直接使用标准 LaTeX 写法，不需要为了 Goldmark 额外转义反斜杠。推荐使用 \(...\) 表示行内公式，使用 \[...\] 表示块级公式；旧的 $...$ 和 $$...$$ 写法仍然兼容。

需要注意，公式中的 \\ 是 LaTeX 本身的换行命令，并不是 Markdown 转义。只有在 JavaScript 字符串中配置分隔符时，才需要把一个反斜杠写成 \\。

滑动方案：

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

1行内公式：\(E=mc^2\)
2
3\[
4\begin{aligned}
5  a &= b+c \\
6  d &= e+f
7\end{aligned}
8\]

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  ↩︎