帰宅部

Web 样式测试

Posted on Dec 7, 2021

标题 and (提示栏)

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

级数越大，间距越大

嵌套效果

Unicode

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

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

code

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

custom img

对于长度过长的图片进行合适的缩放，同时也是导入图片的推荐写法。 对于普通markdown的导入语法，只适合宽度合适的图片（如：16x9）

1{\{< img src="/media/abc.png"  width="500px" >}\}
2{\{< img src="/media/abc.png"  width="50%" >}\}
3{\{< img src="/media/abc.png" alt="message" width="50%" hight="50%" >}\}
4网页过宽采用超过一定大小后，向两边padding的做法（大部分网站通用做法），保证纵向大小不变。对于宽度过小的情况，采用等比缩小的策略。
5注意此处的开头的/

markdown 标记测试

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

id name level
0 ao 99

特殊样式

Aplayer

1{/{< aplayer id=2 url=/media/atest.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

1{/{< dplayer id=1 path=/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

Bilibili

pdf 内嵌

1{\{< pdf id=s path=/media/pdf/[email protected] >}\}

用于大页面的LaTex的加载

 1<!-- <div>
 2    <iframe height='{{- .Get `h` | default `auto` -}}' height="auto" src='{{ .Site.BaseURL  }}{{- .Get `path` -}}' type="application/pdf" width="100%"></iframe>
 3</div> -->
 4<!-- 不可纯数字 -->
 5
 6<div id='a{{- .Get `id` -}}'></div>
 7<script>
 8    var options = {
 9            fallbackLink: "<p>can't show PDF in this browser  <a href='[url]'>download it</a></p>"
10            };
11    PDFObject.embed("{{ .Site.BaseURL  }}{{- .Get `path` -}}", "#a{{- .Get `id` -}}", {height:'{{- .Get `h` | default `50rem` -}}'}, options);
12</script>
13
14<!--
15A 不出来（WebKit引擎）的时候，使用fallbackLink
16-->
17{\{< pdf id=s path=/media/pdf/[email protected] >}\}

Spotify

Single

Artist

List

$\LaTeX$

基于$\KaTeX$支持其所有特性，唯一麻烦的问题是遇到特殊符号需要转义

 1注意对于 Hugo Goldmark：
 2对于单独出现的'\'符号，需要使用转义\\表达
 3类似还有 , @ < > &
 4
 5举例：
 6# 原始
 7\begin{CD}   
 8   A @>a>> B \\
 9@VbVV @AAcA \\
10   C @= D
11\end{CD}
12
13# 开始标记如下
14\\begin{CD}
15   A \@\>a\>\> B \\\\
16\@VbVV \@AAcA \\\\
17   C \@= D
18\\end{CD}

滑动方案：

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

行公式效果：

$$ 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) $$ $$ P(a|b) = \frac{P(b|a) \cdot P(a)}{(P(b|a) \cdot P(a)) + (P(b|\lnot a) \cdot P(\lnot a))} = \frac{0.05 \cdot 0.9}{((0.05 \cdot 0.9) + (0.95 \cdot 0.1))} = \frac{0.045}{((0.05 \cdot 0.9) + (0.95 \cdot 0.1))} = \frac{0.045}{(0.045 + (0.95 \cdot 0.1))} = \frac{0.045}{(0.045 + 0.095)} $$ \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$ 强力驱动

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

reference：

Aplayer 音频播放器

Dplayer 视频播放器

$\KaTeX$ $\LaTeX$

PDFObject PDF

Mermaid.js Graph

  1. Genshin Impact Official Website ↩︎