帰宅部
POSTED

WEB样式测试

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

标题and (提示栏)

标题栏

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

级数越大，间距越大

嵌套效果

Unicode

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

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

code

// CPP
#include <iostream>
using namespace std;
int main(){
	cout<<"⑨"<<endl;
	return 0;
}

video-loop

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

自定义图片

ぼっち・ざ・ろっく！
ぼっち・ざ・ろっく！

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

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

详细说明

code

代码为了避开渲染，全部添加 \，语法忘记时复制去掉 \

{\{< img src="/media/abc.png, /media/ss.jpeg"  width="500px" >}\}
{\{< img src="/media/abc.png"  width="50%" cation="说明文字" >}\}
{\{< img src="/media/abc.png"  width="50%" >}\}
网页过宽采用超过一定大小后，向两边padding的做法（大部分网站通用做法），保证纵向大小不变。对于宽度过小的情况，采用等比缩小的策略。

markdown标记测试

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

id name level
0 ao 99

特殊样式

折叠框

点击展开

啥都没有

猜猜看有什么

🐮🍺

啥都没有哦

Aplayer

详细说明

code

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

参数id url

<div id="{{- .Get `id` -}}"></div>
<script>
const ap = new APlayer({
    container: document.getElementById('{{- .Get `id` -}}'),
    audio: [{
        name: '{{- .Get `name` -}}' ,
        artist: '{{- .Get `artist` | default `` -}}',
        url: '{{ .Site.BaseURL  }}{{ .Get `url` -}}',
        cover: '{{- .Get `cover` | default `` -}}',
        autoplay: '{{- .Get `auto` | default `true` -}}',
        lrc: '{{- .Get `lrc` | default `无歌词` -}}'
    }]
});
</script>

Dplayer

详细说明

code

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

参数id path

<div align=center>
<div id="{{- .Get `id`  -}}"></div>
<script>
    const dp = new DPlayer({
    container: document.getElementById('{{- .Get `id` -}}'),
    video: {
        url: '{{ .Site.BaseURL  }}{{- .Get `path` -}}',
    },
});
</script>
</div>

Youtube

Twitter

Bilibili

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

PDF内嵌

Transformer.pdf Open ↗ Save ↓

Loading…

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

详细说明

code

{\{< pdf id=s src=/media/pdf/Transformer.pdf >}\}
<!-- 不可纯数字 -->

<div id='{{- .Get `id` -}}'></div>
<script>
    var options = {
            fallbackLink: "<p>This browser don't support embeded PDFs. <a href='[url]'>Download it</a></p>"
            };
    PDFObject.embed("{{ .Site.BaseURL  }}{{- .Get `path` -}}", "#a{{- .Get `id` -}}", {height:'{{- .Get `h` | default `50rem` -}}'}, options);
</script>

<!--
引擎不支持的时候，使用fallback，给出Link
-->

Spotify

效果展示

Single

Artist

List

LaTeX\LaTeX

行公式效果：

f(x)=∫−∞∞f^(ξ)e2πiξx dξ f(x)=\int_{-\infty}^{\infty}\widehat{f}(\xi)e^{2\pi i\xi x}\,d\xi vπ(s)=∑a∈Aπ(a∣s)qπ(s,a) v_\pi(s) = \sum_{a \in \mathcal{A}} \pi(a|s) q_\pi(s,a) σ(QKTd)V \sigma \left( \frac{QK^T}{\sqrt{d}} \right) V A→aBb↓↑cC=D \begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} x=a0+1a1+1a2+1a3+1a4 x = a_0 + \cfrac{1}{a_1 + \cfrac{1}{a_2 + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } }

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

详细说明

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

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

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

滑动方案：

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

行内公式：\(E=mc^2\)

\[
\begin{aligned}
  a &= b+c \\
  d &= e+f
\end{aligned}
\]

mermaid

详细说明

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

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

{\{< mermaid >}\}
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
{\{< /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引用 

# 相对地址
相对引用：[本篇文章]({\{< ref "posts/test.md" >}\})

# 2为元素id，标题的坐标元素默认为其内容，shortcode为自设，引脚为fnref:X
界面交叉引用：[id引用]({\{< relref "posts/test.md#2" >}\})

reference

Aplayer 音频播放器

Dplayer 视频播放器

KaTeX LaTeX\LaTeX

MathJAX LaTeX\LaTeX

PDFObject PDF

Mermaid.js Graph

  1. Genshin Impact Official Website  ↩︎