kudzues/hexo-theme-shoka

Fork 0

mirror of https://github.com/amehime/hexo-theme-shoka.git synced 2026-04-05 02:16:56 +08:00

Files

amehime 4fc27aec75 update

2020-11-08 23:04:01 +08:00

18 KiB

Raw Blame History

title, date, categories, tags, math, mermaid, quiz, valine

title

date

`links` 链接块

本功能参考NexT，基于Hexo Tag功能，用来建立友链或其他网址链接功能。

文章中的使用格式：

使用links标签块，包围yml语法书写的内容，字段包括

&#123;% links %&#125;
- site: #站点名称
  owner: #管理员名字
  url: #站点网址
  desc: #简短描述
  image: #一张图片
  color: #颜色代码
&#123;% endlinks %&#125;

举个栗子：

&#123;% links %&#125;
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
  color: "#e9546b"

- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  image: images/avatar.jpg

- site: 優萌初華
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  color: "#9d5b8b"
&#123;% endlinks %&#125;

{% links %}

site: 優萌初華 owner: 霜月琉璃 url: https://shoka.lostyu.me desc: 琉璃的医学 & 编程笔记 image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg color: "#e9546b"
site: 優萌初華 owner: 霜月琉璃 url: https://shoka.lostyu.me image: images/avatar.jpg
site: 優萌初華 url: https://shoka.lostyu.me desc: 琉璃的医学 & 编程笔记 color: "#9d5b8b" {% endlinks %}

以上标签块里的内容，还可以保存到一个yml文件中，然后使用linksfile标签。其中，path位于<root>/source目录下。

&#123;% linksfile [path] %&#125;

举个栗子：

&#123;% linksfile friends/_data.yml %&#125;

`code`代码块

使用markdown-it-prism进行代码高亮，支持显示行号、行高亮mark、命令行提示符command、代码块标题。

基本格式：[language] [title] [url] [link text] [mark] [command]

选项	描述	默认值
language	- 支持的语言戳此	null \
	- 如果不需要代码高亮，但希望显示代码块样式，则设为`raw`	\
	- 留空或设为`info`，将不显示代码高亮和代码块样式
title	代码块的标题文字	null
url	代码块标题右侧显示的链接	null
link text	上述链接显示的标题	link
mark	行高亮显示，格式为`mark:行号,行号开始-行号结束,其他行号`。	null \
	例如`mark:1,4-7,10`，将高亮显示第1、4、5、6、7、10行
command	命令行提示符，格式为`command:("提示内容":行号,行号
	例如`command:("[root@localhost] $":1,9-10

```java 行高亮 https://shoka.lostyu.me 参考链接 mark:1,6-7
import java.util.Scanner;
...
Scanner in = new Scanner(System.in);
// 输入Scan之后，按下键盘 Alt + “/” 键，Eclipse下自动补全。

System.out.println(in.nextLine());
System.out.println("Hello" + " world.");
```

```bash 命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
git add -A
git commit -m "update"
git push
```

import java.util.Scanner;
...
Scanner in = new Scanner(System.in);
// 输入Scan之后，按下键盘 Alt + “/” 键，Eclipse下自动补全。

System.out.println(in.nextLine());
System.out.println("Hello" + " world.");

pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
git add -A
git commit -m "update"
git push

`quiz` 练习题与答案

这个功能是用来显示练习题的。需要在Front Matter中添加quiz: true，以正确显示题型标签。

---
title: 练习题与答案
quiz: true
---

1. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}

2. 有基类`SHAPE`，派生类`CIRCLE`，声明如下变量：  {.quiz .multi}
    ```cpp
    SHAPE shape1,*p1;
    CIRCLE circle1,*q1;
    ```
    下列哪些项是“派生类对象替换基类对象”。
    - `p1=&circle1;` {.correct}
    - `q1=&shape1;`
    - `shape1=circle1;` {.correct}
    - `circle1=shape1;`
{.options}
    > - :heavy_check_mark: 令基类对象的指针指向派生类对象
    > - :x: 派生类指针指向基类的引用
    > - :heavy_check_mark: 派生类对象给基类对象赋值
    > - :x: 基类对象给派生类对象赋值
    > {.options}

3. 下列叙述正确的是 []{.gap} 。 {.quiz}
    - 虚函数只能定义成无参函数
    - 虚函数不能有返回值
    - 能定义虚构造函数
    - A、B、C都不对 {.correct}
{.options}

10. 如果定义`int e=8; double f=6.4, g=8.9;`，则表达式 `f+int(e/3*int(f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill}
    > 注意运算顺序和数据类型
    > [8.4]{.mistake}

点击选项可以显示答案，以及答案解析。

下列叙述正确的是 []{.gap} 。 {.quiz}
- 虚函数只能定义成无参函数
- 虚函数不能有返回值
- 能定义虚构造函数
- A、B、C都不对 {.correct} {.options}
有基类SHAPE，派生类CIRCLE，声明如下变量： {.quiz .multi}
```
SHAPE shape1,*p1;
CIRCLE circle1,*q1;
```
下列哪些项是“派生类对象替换基类对象”。
- p1=&circle1; {.correct}
- q1=&shape1;
- shape1=circle1; {.correct}
- circle1=shape1; {.options}
- ✔️ 令基类对象的指针指向派生类对象
- ❌ 派生类指针指向基类的引用
- ✔️ 派生类对象给基类对象赋值
- ❌ 基类对象给派生类对象赋值 {.options}
编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}
如果定义int e=8; double f=6.4, g=8.9;，则表达式 f+int(e/3*int(f+g)/2)%4 的值为 [9.4]{.gap}。 {.quiz .fill}

注意运算顺序和数据类型 [8.4]{.mistake}

使用说明

本功能基于markdown-it-bracketed-spans和markdown-it-attrs

标签	含义
`{.quiz}`	选择题
`{.quiz .multi}`	多选题
`{.quiz .true}`	正确的判断题
`{.quiz .false}`	错误的判断题
`{.quiz .fill}`	填空题
`[]{.gap}`	空白下划线
`[答案内容]{.gap}`	答案内容带下划线
`{.options}`	ABCDE选项
`{.correct}`	选择题的正确选项
`>`	答案解析
`[8.4]{.mistake}`	错题备注

`emoji` 绘文字

本功能基于markdown-it-emoji，所有标签参考戳此

:kissing_heart:
:ring:
:notes:

😘 💍 🎶

`effects` 文字特效

本功能基于markdown-it-ins、 markdown-it-bracketed-spans和markdown-it-attrs

本主题风格颜色通用样式：default、primary、success、info、warning、danger

++下划线++
++波浪线++{.wavy}
++着重点++{.dot}
++紫色下划线++{.primary}
++绿色波浪线++{.wavy .success}
++黄色着重点++{.dot .warning}
~~删除线~~
~~红色删除线~~{.danger}
==荧光高亮==
[赤橙黄绿青蓝紫]{.rainbow}
[红色]{.red}
[粉色]{.pink}
[橙色]{.orange}
[红色]{.yellow}
[绿色]{.green}
[靛青]{.aqua}
[蓝色]{.blue}
[紫色]{.purple}
[灰色]{.grey}
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
H~2~0
29^th^

:::warning 这段代码因为自动被pangu.js处理了一下，加了几个空格，导致直接复制代码不能正常显示。正确的代码是++下划线++ ~~删除线~~ ==荧光高亮==，不能有空格哦。 :::

++下划线++ ++波浪线++{.wavy} ++着重点++{.dot} ++紫色下划线++{.primary} ++绿色波浪线++{.wavy .success} ++黄色着重点++{.dot .warning} ~~删除线~~ ~~红色删除线~~{.danger} ==荧光高亮== [赤橙黄绿青蓝紫]{.rainbow} [红色]{.red} [粉色]{.pink} [橙色]{.orange} [黄色]{.yellow} [绿色]{.green} [靛青]{.aqua} [蓝色]{.blue} [紫色]{.purple} [灰色]{.grey} 快捷键 [Ctrl]{.kbd} + [C]{.kbd .red} H20 29^th^

`spoiler`隐藏文字

本功能基于markdown-it-spoiler和markdown-it-attrs

!!黑幕黑幕黑幕黑幕黑幕黑幕!! ： 鼠标滑过显示内容
!!模糊模糊模糊模糊模糊模糊!!{.bulr} ： 选中文字显示内容

!!黑幕黑幕黑幕黑幕黑幕黑幕!! ：鼠标滑过显示内容 !!模糊模糊模糊模糊模糊模糊!!{.bulr} ：选中文字显示内容

`label` 标签块

本功能基于markdown-it-bracketed-spans和markdown-it-attrs 有以下颜色可选

[default]{.label}
[primary]{.label .primary}
[info]{.label .info}
[:heavy_check_mark:success]{.label .success}
[warning]{.label .warning}
[:broken_heart:danger]{.label .danger}

[default]{.label} [primary]{.label .primary} [info]{.label .info} [✔️success]{.label .success} [warning]{.label .warning} [💔danger]{.label .danger}

`note` 提醒块

本功能基于markdown-it-container 标签为：

--|-- 开始行|:::[风格颜色] 结束行|:::

:::default
默认默认
:::

:::primary
基本基本
:::

:::info
提示提示
:::

:::success
成功成功
:::

:::warning
警告警告
:::

:::danger
危险危险
:::

:::danger no-icon
危险危险
:::

:::default 默认默认 :::

:::primary 基本基本 :::

:::info 提示提示 :::

:::success 成功成功 :::

:::warning 警告警告 :::

:::danger 危险危险 :::

:::danger no-icon 没有图标 :::

`tab`标签卡

本功能基于markdown-it-container 标签为：

--|-- 开始行|;;;[同一ID] [标签名称] 结束行|;;;

;;;id1 卡片1
这里是卡片1的内容
**加粗**
[success]{.label .success}

&#123;% links %&#125;
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
  color: "#e9546b"
&#123;% endlinks %&#125;
;;;

;;;id1 卡片2
这里是卡片2的内容
:::danger
危险危险
:::
- 第一行
- 第二行
;;;

;;;id2 ②号标签卡片1
这里是卡片1的内容
;;;

;;;id2 ②号标签卡片2
这里是卡片2的内容
;;;

;;;id1 卡片1 这里是卡片1的内容加粗 [success]{.label .success}

{% links %}

site: 優萌初華 owner: 霜月琉璃 url: https://shoka.lostyu.me desc: 琉璃的医学 & 编程笔记 image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg color: "#e9546b" {% endlinks %} ;;;

;;;id1 卡片2 这里是卡片2的内容 :::danger 危险危险 :::

第一行
第二行 ;;;

;;;id2 ②号标签卡片1 这里是卡片1的内容 ;;;

;;;id2 ②号标签卡片2 这里是卡片2的内容 ;;;

`collapse` 折叠块

本功能基于markdown-it-container 标签为：

--|-- 开始行|+++[风格颜色] [标题文字] 结束行|+++

+++ 默认默认 这里是一段文字
++下划线++
+++


+++primary 紫色
:::info
参考信息
:::

- 第一行
- 第二行
+++


+++info  蓝色
;;;id3 卡片1
这里是卡片1的内容
;;;

;;;id3 卡片2
这里是卡片2的内容
;;;
+++

+++success 绿色
&#123;% links %&#125;
- site: 優萌初華
  url: https://shoka.lostyu.me
  color: "#e9546b"
&#123;% endlinks %&#125;
+++

+++warning 黄色
!!警告警告警告警告警告!!{.bulr}
[label]{.label .success}
+++

+++danger 红色
[danger]{.label .danger}
+++

+++ 默认默认这里是一段文字 ++下划线++ +++

+++primary 紫色 :::info 参考信息 :::

第一行
第二行 +++

+++info 蓝色 ;;;id3 卡片1 这里是卡片1的内容 ++波浪线++{.wavy} ;;;

;;;id3 卡片2 这里是卡片2的内容 ;;; +++

+++success 绿色 {% links %}

site: 優萌初華 url: https://shoka.lostyu.me color: "#e9546b" {% endlinks %} +++

+++warning 黄色 !!警告警告警告警告警告!!{.bulr} [label]{.label .success} +++

+++danger 红色 [danger]{.label .danger} +++

`taskList` 待办事项

本功能基于markdown-it-task-checkbox。可以利用markdown-it-attrs添加风格颜色，只可以给ul标签添加，需要新建两行。

- [ ] 这是一个小叉叉
- [x] 这是一个红色勾勾

{.danger}

- [ ] 未完成
- [x] 完成

{.primary}

- [ ] 未完成
- [x] 默认颜色

这是一个小叉叉
这是一个红色勾勾

{.danger}

未完成
完成

{.primary}

未完成
默认颜色

`furigana`文字注音

原本用于日语汉字假名注音，但别的注音也可以。为了兼容性，采用markdown-it-ruby的基本格式：{文字^注音}，并且为了兼容表格，将分隔符由|换成了^。注音分隔基于furigana-markdown-it显示说明看这里

--|-- {取り返す^とりかえす}|{取り返す^とりかえす} {可愛い犬^か+わい・い・いぬ}|{可愛い犬^か+わい・い・いぬ} {可愛い犬^か・わい・いいぬ}|{可愛い犬^か・わい・いいぬ} {アクセラレータ^accelerator} | {アクセラレータ^accelerator} {accelerator^アクセラレータ} | {accelerator^アクセラレータ} {食べる^たべる} | {食べる^たべる} {食べる^=たべる} | {食べる^=たべる} {あいうえお^*} | {あいうえお^} {あいうえお^*❤} | {あいうえお^❤} {常用账号^contact}|{常用账号^contact}

`media`多媒体

本功能基于Hexo Tag功能，使用media标签，目前可选择两种类型，即audio和video。

&#123;% media audio %&#125;
...音频列表
&#123;% endmedia %&#125;

&#123;% media video %&#125;
...视频列表
&#123;% endmedia %&#125;

标签包绕一段yml格式的内容，格式与背景音乐的配置类似。

亦可以直接使用网易云、虾米、QQ音乐的播放列表、单曲。

&#123;% media audio %&#125;
- title: 列表1
  list:
    - https://music.163.com/#/playlist?id=2943811283
    - https://music.163.com/#/playlist?id=2297706586
- title: 列表2
  list:
    - https://music.163.com/#/playlist?id=2031842656
&#123;% endmedia %&#125;


&#123;% media video %&#125;
- name: "测试1"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
- name: "测试2"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
&#123;% endmedia %&#125;

{% media audio %}

title: 列表1 list:
- https://music.163.com/#/playlist?id=2943811283
- https://music.163.com/#/playlist?id=2297706586
title: 列表2 list:
- https://music.163.com/#/playlist?id=2031842656 {% endmedia %}

{% media video %}

name: "测试1" url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
name: "测试2" url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0 {% endmedia %}

`math`数学公式

本功能基于markdown-it-katex 在Front Matter中添加math: true以支持KaTex

---
title: 数学公式显示
math: true
---

行内公式：$\sqrt{3x-1}+(1+x)^2$

独立块显示：
$$\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}$$

行内公式：\sqrt{3x-1}+(1+x)^2

独立块显示： $$\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \

\nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}$$

`mermaid`流程图

本功能基于markdown-it-mermaid 在Front Matter中添加mermaid: true以支持Mermaid

---
title: 流程图显示
mermaid: true
---

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

```mermaid
sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
```

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end

18 KiB Raw Blame History Unescape Escape

links 链接块

code代码块

quiz 练习题与答案

使用说明

emoji 绘文字

effects 文字特效

spoiler隐藏文字

label 标签块

note 提醒块

tab标签卡

collapse 折叠块

taskList 待办事项

furigana文字注音

media多媒体

math数学公式

mermaid流程图

18 KiB

Raw Blame History

`links` 链接块

`code`代码块

`quiz` 练习题与答案

`emoji` 绘文字

`effects` 文字特效

`spoiler`隐藏文字

`label` 标签块

`note` 提醒块

`tab`标签卡

`collapse` 折叠块

`taskList` 待办事项

`furigana`文字注音

`media`多媒体

`math`数学公式

`mermaid`流程图