{ "version": "https://jsonfeed.org/version/1", "title": "Syutoi", "subtitle": "A place to write, read and think.", "icon": "https://hexo.syutoi.com/images/favicon.png", "description": "一个安静、清晰的写作与阅读空间。", "home_page_url": "https://hexo.syutoi.com", "items": [ { "id": "https://hexo.syutoi.com/syutoi-long-read/", "url": "https://hexo.syutoi.com/syutoi-long-read/", "title": "从一条笔记到一篇长文：整理、写作与回看", "date_published": "2026-09-19T04:00:00.000Z", "content_html": "

笔记不必从完整的结论开始。有时候，它只是读到一句话时留下的疑问，或一次实践后还没有解释清楚的现象。将这些零散记录写成文章，需要的不是一次性想清楚所有问题，而是逐步建立可供自己和别人理解的顺序。

\n

这篇示例把一次写作过程分成几个阶段。你可以顺着正文阅读，也可以使用侧栏目录直接跳到某个小节；图表、引用、代码和脚注都属于同一份文档。

\n\n

一、先保存问题

\n

最早的记录通常很短：发生了什么，我原本期待什么，以及哪些地方让我困惑。此时不急着给问题起一个宏大的名字，先保留足够具体的背景。比如“页面加载有点慢”很难复查，而“在手机网络下打开有十张图片的文章，首屏等待明显增加”就给下一次观察留下了入口。

\n

记录背景时，也要区分亲眼看到的情况与自己的推测。前者可以成为讨论的共同起点，后者需要进一步验证。把两者写在相邻但独立的句子里，日后回看时就不容易把当时的猜想误认成结论。

\n

二、给材料一个暂时的位置

\n

材料可以按问题、时间或来源组织。分类的目的不是建立永远正确的体系，而是让下一次需要它时能够找到。一个暂时叫作“待整理”的目录并不意味着失败，只要其中每条记录仍然带着来源和写下它的原因。

\n

同一条材料也可能服务不同问题。与其反复复制内容，不如保留原始记录，再用链接说明它与当前文章的关系。这样，当原始信息被修正时，读者仍有机会回到来源，而不是面对几个已经互不一致的副本。

\n\n

三、确定文章要回答的问题

\n

读者不一定与作者拥有相同的背景。开头需要说明这篇文章讨论什么，以及读完之后能得到怎样的认识。范围可以小，但要明确；一篇回答清楚一个问题的文章，比同时触及十个问题却没有展开更容易被使用。

\n

写作过程中出现新的方向是正常的。可以先记到旁边，等当前问题的解释完成后，再判断它适合成为补充说明、后续文章，还是应该删除的岔路。保留材料和保留在正文里，是两件不同的事情。

\n
\n

写作中的取舍，不是在判断一个想法有没有价值，而是在判断它是否帮助当前这段说明继续向前。

\n
\n

四、让段落承担明确的工作

\n

每段可以有一个主要任务：提出问题、描述现象、给出证据、解释原因，或说明限制。任务清楚时，段落之间的连接也更容易检查。如果连续几段都在重复同一个判断，可能需要补充证据，而不是再换一种说法。

\n

句子长短可以变化，但重要信息不宜全部挤在同一句中。写到包含多个转折的长句时，试着按意思拆开，观察每个部分是否仍然必要。中文与 English 术语混排时，也应先保证概念被解释清楚，而不是依赖读者自行猜测缩写。

\n

五、用表格做真正的比较

\n

表格适合让读者横向比较几个稳定的维度。如果每个单元格都需要一大段独立论述，普通小节可能更合适。下面的表格只是一个写作过程记录，不意味着每次写作都必须经过完全相同的步骤。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
阶段主要问题可留下的结果
收集我观察到了什么？带背景的原始记录
整理哪些材料回答同一问题？分类与来源链接
写作读者需要按什么顺序理解？段落和示例
回看哪些结论仍缺乏支持？修订清单
\n

在窄屏上，表格可以在自身区域内横向滚动。正文不应该为了放下表格而把整个页面撑宽，也不应该把每一列压成难以阅读的竖排文字。

\n

六、示例应当能够独立理解

\n

代码示例需要保留必要的输入与输出。只给出中间一行，可能对已经熟悉问题的人足够，却会让第一次接触的人不知道该从哪里开始。示例可以简短，但删减之后仍应能说明作者声称的行为。

\n
const notes = [
  { title: "一次观察", reviewed: true },
  { title: "一个待验证的问题", reviewed: false }
];

const pending = notes.filter(note => !note.reviewed);
console.log(pending.map(note => note.title));
\n

这里的代码只是把尚未回看的记录筛选出来。它不承担整个笔记系统的设计，也不需要为这个简单说明引入额外框架。读者可以复制它，再根据自己的材料尝试修改。

\n

七、引用与脚注各有用途

\n

引用应当帮助读者理解当前讨论，而不是代替作者解释。引用之后，仍需要指出它与文章问题的关系。对于不适合打断正文的补充，可以放在脚注中，让有需要的读者继续查看。[1]

\n

脚注也不能成为堆放所有不确定信息的地方。如果某个限制会改变整篇文章的结论，它应该出现在正文中；如果只是术语来源或一个延伸入口，放在脚注里就比较合适。

\n

八、图片需要说明它在解释什么

\n

图片可以帮助读者看见文字难以描述的关系，但它也需要上下文。放入一张图片之前，可以问自己：读者应当从中注意什么？它与前一段、后一段分别是什么关系？如果移除图片后文章仍然完整，它也许只是气氛；这没有问题，但不应让它阻碍正文。

\n

\"横向布局示例\"

\n

替代文字和图片说明面向不同的阅读情况。替代文字帮助无法看到图片的读者了解内容；说明可以进一步交代图片来源、观察重点或补充背景。两者不必机械地重复。

\n

九、为不同阅读方式留出空间

\n

有人从头读到尾，有人先查看目录，有人通过搜索结果来到文章中间。清晰的标题和稳定的锚点让这些路径都能成立。链接应当描述目的地，折叠内容则适合不影响主线的补充，不适合隐藏理解结论所必需的前提。

\n
\n一个可选的回看清单\n\n
\n

十、发布之后继续修订

\n

文章发布并不意味着问题永远得到解决。新的材料、读者的反馈和作者自己的实践，都可能带来修订。重要的是让修改有迹可循：实质性的变化可以更新日期，并在适当位置说明哪些结论发生了改变。

\n

回看旧文章时，不必把过去不够成熟的表达全部抹去。可以保留有价值的观察，补上当时不知道的限制，再把已经失效的步骤明确标记出来。这样的文章既是给读者的说明，也是作者思考过程的一部分。

\n

如果你正在检查主题，可以继续访问 无摘要文章、长标题边界 或返回 示例入口。

\n
\n
\n
    \n

  1. 这是一条示例脚注，用于检查长文中从正文跳到页尾、再返回引用位置的阅读路径。实际写作时应写明真实来源。 ↩︎

    \n
    2. \n
\n
\n", "tags": [ "Syutoi", "示例", "写作", "阅读" ] }, { "id": "https://hexo.syutoi.com/syutoi-boundaries/", "url": "https://hexo.syutoi.com/syutoi-boundaries/", "title": "当一个标题足够长时——在中文、English Words、数字 2026 与标点之间检查换行，让桌面和手机上的读者都能看到完整标题", "date_published": "2026-09-19T03:00:00.000Z", "content_html": "

长标题不是省略内容的理由

\n

页面标题保留完整文字，并随容器宽度换行。文章列表和上一篇、下一篇链接也需要容纳这样的标题。

\n

没有空格的标识符

\n

AnIntentionallyLongIdentifierWithoutSpacesForTestingResponsiveInlineCodeAndNaturalWrappingAcrossNarrowMobileScreens01234567890123456789

\n

很长的可见地址

\n

https://example.com/a-long-path-for-checking-that-visible-links-wrap-without-expanding-the-page-width-and-still-remain-selectable

\n

重复标题

\n

第一个小节可通过独立锚点访问。

\n

重复标题

\n

第二个小节也应有唯一锚点，目录不能把两个链接指向同一处。

\n

特殊字符

\n

<article>、&、双引号 " 和单引号 ' 都是文字的一部分。它们在正文、代码与元信息中应分别采用正确的转义方式。

\n

返回 示例入口。

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/syutoi-minimal/", "url": "https://hexo.syutoi.com/syutoi-minimal/", "title": "一张安静的文字卡片", "date_published": "2026-09-19T02:00:00.000Z", "content_html": "

这篇文章没有封面，也不在文章列表显示摘要。它不需要图片或其他装饰，就可以保留标题、日期和阅读全文入口。

\n

正文依然完整显示。没有小节标题时，侧栏不应生成空目录；没有分类和标签时，也不应出现空的分类、标签导航。

\n

回到 示例入口 可以继续检查其他页面。

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/special/", "url": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/special/", "title": "Step.4 主题特殊功能", "date_published": "2020-08-13T13:45:48.000Z", "content_html": "
\n

历史文档：本页保留上游主题的说明与示例，部分私有语法现仅显示为原文，不代表当前功能。当前写法与替代方案请参阅 Syutoi 写作与迁移示例。

\n
\n

:::primary\n:rocket:快速开始 - :love_letter:依赖插件 - :pushpin:基本配置 - :rainbow:界面显示 - :unicorn:特殊功能\n:::

\n

:::info\n以下介绍可以使用的markdown或者标签代码。\n功能大部分基于hexo-renderer-multi-markdown-it渲染器，尤其是代码块的显示，与默认渲染器不兼容。\n:::

\n

links 链接块

\n

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

\n

文章中的使用格式：

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

--|--|--\nsite|站点名称|必填\nowner|管理员名字|可选，默认为site的值\nurl|站点链接|必填\ndesc|站点描述|可选，默认为url的值\nimage|站点图片|可选，默认为images/404.png\ncolor|方块颜色|可选，默认为#666

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

举个栗子：

\n
&#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;
\n
\"\"優萌初華琉璃的医学 & 编程笔记\"\"優萌初華https://shoka.lostyu.me優萌初華琉璃的医学 & 编程笔记
\n
    \n
  1. 以上标签块里的内容，还可以保存到一个yml文件中，然后使用linksfile标签。\n其中，path位于<root>/source目录下。
    2. \n
\n
&#123;% linksfile [path] %&#125;
\n

举个栗子：

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

code代码块

\n

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

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
选项描述默认值
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
\n
```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
```
\n
行高亮参考链接
import java.util.Scanner;
...
Scanner in = new Scanner(System.in);
// 输入Scan之后，按下键盘 Alt + “/” 键，Eclipse下自动补全。

System.out.println(in.nextLine());
System.out.println("Hello" + " world.");
\n
命令行提示符 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
\n

quiz 练习题与答案

\n

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

\n
几个例子
---
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}
\n

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

\n
    \n
  1. \n

    下列叙述正确的是 []{.gap} 。 {.quiz}

    \n\n
    2. \n
  2. \n

    有基类SHAPE，派生类CIRCLE，声明如下变量： {.quiz .multi}

    \n 
    SHAPE shape1,*p1;
    CIRCLE circle1,*q1;
    \n

    下列哪些项是“派生类对象替换基类对象”。

    \n\n
    \n
      \n
    • :heavy_check_mark: 令基类对象的指针指向派生类对象
      • \n
    • :x: 派生类指针指向基类的引用
      • \n
    • :heavy_check_mark: 派生类对象给基类对象赋值
      • \n
    • :x: 基类对象给派生类对象赋值\n{.options}
      • \n
    \n
    \n
    3. \n
  3. \n

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

    \n
    4. \n
  4. \n

    如果定义int e=8; double f=6.4, g=8.9;，则表达式 f+int(e/3*int(f+g)/2)%4 的值为 [9.4]{.gap}。 {.quiz .fill}

    \n
    \n

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

    \n
    \n
    5. \n
\n

使用说明

\n

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

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

emoji 绘文字

\n

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

\n
:kissing_heart:
:ring:
:notes:
\n

:kissing_heart: :ring: :notes:

\n

effects 文字特效

\n

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

\n
\n

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

\n
\n
++下划线++
++波浪线++{.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^
\n

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

\n

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

\n

spoiler隐藏文字

\n

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

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

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

\n

label 标签块

\n

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

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

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

\n

note 提醒块

\n

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

\n

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

\n
:::default
默认默认
:::

:::primary
基本基本
:::

:::info
提示提示
:::

:::success
成功成功
:::

:::warning
警告警告
:::

:::danger
危险危险
:::

:::danger no-icon
危险危险
:::
\n

:::default\n默认默认\n:::

\n

:::primary\n基本基本\n:::

\n

:::info\n提示提示\n:::

\n

:::success\n成功成功\n:::

\n

:::warning\n警告警告\n:::

\n

:::danger\n危险危险\n:::

\n

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

\n

tab标签卡

\n

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

\n

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

\n
;;;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的内容
;;;
\n

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

\n
\"\"優萌初華琉璃的医学 & 编程笔记
\n

;;;

\n

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

\n\n

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

\n

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

\n

collapse 折叠块

\n

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

\n

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

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


+++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}
+++
\n

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

\n

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

\n\n

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

\n

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

\n

+++success 绿色

\n
優萌初華https://shoka.lostyu.me
\n

+++

\n

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

\n

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

\n

taskList 待办事项

\n

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

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

{.danger}

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

{.primary}

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

{.danger}

\n\n

{.primary}

\n\n

furigana文字注音

\n

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

\n

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

\n

media多媒体

\n

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

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

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

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

\n

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

\n
举个栗子
&#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;
\n\n\n

math数学公式

\n

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

\n
---
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}$$
\n

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

\n

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

\n

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

\n

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

\n

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

\n

\\end{array}$$

\n

mermaid流程图

\n

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

\n
---
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
```
\n
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
\n
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
\n", "tags": [ "计算机科学", "二进制杂谈", "Theme Syutoi Documentation", "Hexo", "教程" ] }, { "id": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/display/", "url": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/display/", "title": "Step.3 界面显示", "date_published": "2020-08-13T13:12:48.000Z", "content_html": "
\n

历史文档：本页保留上游主题的说明与示例，部分私有语法现仅显示为原文，不代表当前功能。当前写法与替代方案请参阅 Syutoi 写作与迁移示例。

\n
\n
\n

:rocket:快速开始 - :love_letter:依赖插件 - :pushpin:基本配置 - :rainbow:界面显示 - :unicorn:特殊功能

\n
\n

首页置顶文章

\n

在文章的Front Matter设置sticky: true，则该文章将显示在首页最上方的置顶文章列。\n多篇文章按照发布时间倒序排列，不分页。

\n
---
title: 置顶文章
sticky: true
---
\n

首页精选分类

\n

想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示的分类加上封面图。

\n
    \n
  1. \n

    首先，修改站点配置：\n找到category_map:，配置每个分类对应的英文映射，比如：

    \n 
    category_map:
      计算机科学: computer-science
      Java: java
      C++: cpp
      二进制杂谈: note
      计算机程序设计（C++）-西安交通大学: course-1
      零基础学Java语言-浙江大学-翁恺: course-1
      面向对象程序设计-Java语言-浙江大学-翁恺: course-2
    \n
    \n

    注意：hexo会自动处理路径中的特殊字符，~`!@#$%^&*()-_+=[]{}|\\;:"'<>,.?以及空格，这些全部会被替换成-\n所以避免在设置中使用上述字符，否则可导致无法抓取到目录下的cover.jpg

    \n
    \n
    2. \n
  2. \n

    在<root>/source/_posts文件夹相应的目录里，存放封面图\n例子：如 第1周 计算 这篇文章。\n所处的分类是

    \n 
    categories:
    - [计算机科学, Java, 零基础学Java语言-浙江大学-翁恺]
    \n

    现在需要在首页显示零基础学Java语言-浙江大学-翁恺这个分类，翻转卡片后，显示这个分类下的文章们。\n而该分类经过英文映射，它的路径将是/computer-science/java/course-1/。

    \n

    那么，请在<root>/source/_posts/computer-science/java/course-1/的目录下放置cover.jpg文件。\n只要分类路径对应的目录下存在cover.jpg文件，这个分类就会在首页显示。\n在进行hexo g时，本分类的封面图会自动被复制到public目录里相应的位置。

    \n
    3. \n
  3. \n

    事实上，为了方便文章管理，这个分类下所有文章的md文件，我都会放在<root>/source/_posts/computer-science/java/course-1/这个目录下。

    \n

    且站点配置文件里，永久链接设置如下

    \n 
    permalink: :title/
    \n

    hexo g后，文章的html文件们将全部生成到<root>/public/computer-science/java/course-1/目录。\n具体可以查看本博客的github仓库。

    \n
    4. \n
  4. \n

    文章详情界面中的系列文章，显示的是与当前文章同一分类的其他文章，并按照文章名正序排序。

    \n
    5. \n
\n
\n

o(*￣▽￣*)ゞ\n其实，不设置category_map也可以，只要在分类路径对应的文件夹下存在cover.jpg文件就行。\n现在，这项功能与category_dir的配置也无关，hexo g生成后，图片会自动被转移到category_dir的相关子目录下。

\n
\n

文章封面图

\n\n

图片展示与相册

\n

在文章的Front Matter设置fancybox: false，可以关闭文章页的图片展示功能。\n使用Justified-Gallery对Gallery Post内图案进行排列。

\n

下面介绍一些小技巧：

\n
    \n
  1. 让图案下方显示title的markdown代码
    2. \n
\n
![这里是alt](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "这里是title")
\n

\"这里是alt\"

\n
    \n
  1. 设置图片的大小
    2. \n
\n
![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定宽度和高度"){height="100px" width="400px"}

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定宽度"){width="400px"}

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定高度"){height="100px"}
\n

\"\"{height="100px" width="400px"}

\n

\"\"{width="400px"}

\n

\"\"{height="100px"}

\n
    \n
  1. 除了在Front Matter里配置photos可以显示相册图案列表外，还可以这样写
    2. \n
\n
## 图案列表No.1
![](https://tva3.sinaimg.cn/large/6833939bly1giclfdu6exj20zk0m87hw.jpg "这里是title")
![](https://tva3.sinaimg.cn/large/6833939bly1giclflwv2aj20zk0m84qp.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclg5ms2rj20zk0m8u0x.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclhnx9glj20zk0m8npd.jpg)
{.gallery}

## 图案列表No.2
![](https://tva3.sinaimg.cn/large/6833939bly1gicitht3xtj20zk0m8k5v.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclil3m4ej20zk0m8tn8.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1gicljgocqbj20zk0m8e81.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1gipetfk5zwj20zk0m8e81.jpg)
{.gallery data-height="120"}
\n

data-height用来设置每行的高度，默认为220

\n

图案列表No.1

\n

\"\"\n\"\"\n\"\"\n\"\"\n{.gallery}

\n

图案列表No.2

\n

\"\"\n\"\"\n\"\"\n\"\"\n{.gallery data-height="120"}

\n

自定义页面配色

\n

主题配色全部在<root>/themes/syutoi/source/css/_colors.styl文件中，可以自行查看。

\n

在<root>/source/_data/目录新建文件colors.styl，在此文件中添改样式。

\n
\n

自定义colors.styl文件将覆盖主题默认样式，为了避免出错，请保证原有样式名均存在，在原有样式基础上进行增删改。

\n
\n

主题支持在<root>/source/_data/目录建立三个自定义styl文件：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
自定义文件名对应默认样式文件样式功能
colors.styl_colors.styl页面配色
iconfont.styl_iconfont.styl图标样式
custom.styl-任意自定义样式
\n

自定义主题图片

\n

如果想要修改主题的<root>/themes/syutoi/source/images/目录内的某张图片，请在<root>/source/_data/目录新建目录images，并在这个文件夹中添加++同名++文件，部署时将自动覆盖主题内的默认图片。

\n

可以用此方法自定义头像、打赏二维码等图片，并且避免覆盖更新主题时遗失自定义文件。

\n

自定义语言包

\n

本功能参考NexT，主要可以用来定义菜单等处显示的文字，且可以方便主题无脑覆盖升级。

\n

在<root>/source/_data/目录新建文件languages.yml。

\n

按照以下格式添加配置项：

\n
# language
zh-CN:
  # items
  post:
    copyright:
      # the translation you perfer
      author: 本文博主
en:
  menu:
    travellings: Travellings
\n

可以参考主题目录下的example/source/_data文件夹。

\n
\n

站点配置及文件的Front Matter中，language项只支持zh-CN、zh-HK、zh-TW、ja、en。\n类似写成zh_CN这样是不可以的。

\n
\n", "tags": [ "计算机科学", "二进制杂谈", "Theme Syutoi Documentation", "Hexo", "教程" ] }, { "id": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/config/", "url": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/config/", "title": "Step.2 基本配置", "date_published": "2020-08-13T12:56:48.000Z", "content_html": "
\n

历史文档：本页保留上游主题的说明与示例，部分私有语法现仅显示为原文，不代表当前功能。当前写法与替代方案请参阅 Syutoi 写作与迁移示例。

\n
\n
\n

:rocket:快速开始 - :love_letter:依赖插件 - :pushpin:基本配置 - :rainbow:界面显示 - :unicorn:特殊功能

\n
\n

站点别称

\n
alternate: Yume Syutoi
\n

这里设置的名称代替Logo，显示在页面顶部，以及页尾:copyright:处

\n

静态文件目录

\n
statics: / #//cdn.jsdelivr.net/gh/amehime/shoka@latest/
\n

默认值是/，指使用本地静态文件\n可以修改成//cdn.jsdelivr.net/gh/您的github用户名/您的项目名@latest/这种形式，以使用jsDelivr进行加速。\nPS：jsDelivr并不是实时更新，重新生成文件后需要耐心等待

\n
css: css
js: js
images: images
\n

静态文件所处目录的实际目录名，这些一般不改。

\n

夜间模式

\n
darkmode: # true
\n

默认情况下，是否开启夜间模式取决于（优先级从高到低）：

\n
    \n
  1. 访客点击页面头部切换按钮的自行选择
    2. \n
  2. 访客切换了浏览设备的主题色调
    3. \n
  3. 您的darkmode配置项
    4. \n
\n

自动定位

\n
auto_scroll: # false
\n

默认情况下，再次打开页面时，会自动滚动到上次浏览的位置。\n这个选项设为false时将停用此功能。

\n

加载动画

\n
# 是否显示页面加载动画loading-cat
loader:
  start: true # 当初次打开页面时，显示加载动画
  switch: true # tab切换到其他页面时，显示加载动画
\n

tab切换后只是显示loading动画，实际并未重新加载页面

\n

页面特效

\n

单击页面的烟花效果配置如下

\n
fireworks:
  enable: true # 是否启用
  color: # 烟花颜色
    - "rgba(255,182,185,.9)"
    - "rgba(250,227,217,.9)"
    - "rgba(187,222,214,.9)"
    - "rgba(138,198,209,.9)"
\n

加载谷歌字体

\n
font:
  enable: true
  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Mulish
    size:

  # Font settings for alternate title.
  logo:
    external: true
    family: Fredericka the Great
    size: 3.5

  # Font settings for site title.
  title:
    external: true
    family: Noto Serif JP
    size: 2.5

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts.
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Inconsolata
\n

此功能基本参考NexT。\n加粗标题的字体总是使用Noto Serif，为了正确友好的显示日文中的汉字，会先后加载headings和title的字体设置。

\n

iconfont图标

\n

主题没有直接使用Font Awesome，是因为用不到那么多icon感觉非常浪费，因此在Iconfont上重新建立了一个项目。\nfont-family设为ic，所有字体样式前缀为i-，具体参见<root>/themes/syutoi/source/css/_iconfont.styl。

\n
# project of https://www.iconfont.cn/
# //at.alicdn.com/t/font_1832207_c8i9n1ulxlt.css => 1832207_c8i9n1ulxlt
iconfont: "1832207_c8i9n1ulxlt"
\n

如果需要添加或修改，请留言告诉我您的Iconfont用户名，我将把您添加到目前的项目中。

\n

添加权限为只读，此后您可以任意全选，批量保存到购物车中，添加至您自己的项目里，并将主题配置文件中的iconfont值改为您的项目。

\n

注意，您的项目应设置FontClass/Symbol 前缀为i-。

\n

在<root>/source/_data/目录新建文件iconfont.styl，把新增或修改的图标样式复制到这个文件中。

\n
\n

自定义iconfont.styl文件将覆盖主题默认样式，为了避免出错，请保证原有样式名均存在，在原有样式基础上进行增删改。

\n
\n

菜单与社交按钮

\n
menu:
  home: / || home
  about: /about/ || user
  posts:
    default: / || feather
    archives: /archives/ || list-alt
    categories: /categories/ || th
    tags: /tags/ || tags
  # friends: /friends/ || heart
  # links: /links/ || magic

social:
  github: https://github.com/yourname || github || "#191717"
  #google: https://plus.google.com/yourname || google
  twitter: https://twitter.com/yourname || twitter || "#00aff0"
  zhihu: https://www.zhihu.com/people/yourname || zhihu || "#1e88e5"
  music: https://music.163.com/#/user/home?id=yourid || cloud-music || "#e60026"
  weibo: https://weibo.com/yourname || weibo || "#ea716e"
  about: https://about.me/yourname || address-card || "#3b5998"
  #email: mailto:yourname@mail.com || envelope || "#55acd5"
  #facebook: https://www.facebook.com/yourname || facebook
  #stackoverflow: https://stackoverflow.com/yourname || stack-overflow
  #youtube: https://youtube.com/yourname || youtube
  #instagram: https://instagram.com/yourname || instagram
  #skype: skype:yourname?call|chat || skype
  #douban: https://www.douban.com/people/yourname/ || douban
\n

如上，使用||作为分隔符，依次为 链接 || 图标 || 颜色。\n注意，只需要写图标名称，如github，则会自动转换为ic i-github。\n十六进制颜色码需要""包绕。

\n

menu 支持一级子目录，子目录设置中的第一项必须为default，用来定义父级按钮的样式。

\n

菜单显示文字可以在语言包中定义，具体请戳这里

\n

边栏配置

\n

边栏可以选择在左侧，或右侧\n修改头像文件的地址，相对于静态文件目录images中配置的路径。

\n
sidebar:
  # Sidebar Position.
  position: left
  #position: right
  # Replace the default avatar image and set the url here.
  avatar: avatar.jpg
\n

可以将自己的图片放在<root>/source/_data/images/目录，甚至以同名覆盖主题内默认的头像图片，具体请戳这里

\n

底部widgets

\n

目前页面底部可以显示两个小部件，即随机文章和最近评论。

\n
widgets:
  random_posts: true # 显示随机文章
  recent_comments: true # 显示最近评论
\n

字数及阅读时间统计

\n

安装好hexo-symbols-count-time插件后，不需要修改站点配置文件，直接使用插件默认配置就行。

\n

需要修改主题配置文件，找到两处cout，修改为true：

\n
# 页尾全站统计
footer:
  since: 2010
  count: true

# 文章界面统计
post:
  count: true
\n

文章评论

\n

如何获取LeanCloud的appId和appKey。

\n
valine:
  appId: #Your_appId
  appKey: #Your_appkey
  placeholder: ヽ(○´∀`)ﾉ♪ # Comment box placeholder
  avatar: mp # Gravatar style : mp, identicon, monsterid, wavatar, robohash, retro
  pageSize: 10 # Pagination size
  lang: zh-CN
  visitor: true # 文章访问量统计
  NoRecordIP: false # 不记录IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  powerMode: true # 默认打开评论框输入特效
  tagMeta:
    visitor: 新朋友
    master: 主人
    friend: 小伙伴
    investor: 金主粑粑
  tagColor:
    master: "var(--color-orange)"
    friend: "var(--color-aqua)"
    investor: "var(--color-pink)"
  tagMember:
    master:
      # - hash of master@email.com
      # - hash of master2@email.com
    friend:
      # - hash of friend@email.com
      # - hash of friend2@email.com
    investor:
      # - hash of investor1@email.com
\n

tag标签显示在评论者名字的后面，默认是tagMeta.visitor对应的值。\n在tagMeta和tagColor中，除了visitor这个key不能修改外，其他key都可以换一换，但需要保证一致性。

\n
举个栗子
tagMeta:
  visitor: 游客
  admin: 管理员
  waifu: 我老婆
tagColor:
  visitor: "#855194"
  admin: "#a77c59"
  waifu: "#ed6ea0"
tagMember:
  admin:
    # - hash of admin@email.com
  waifu:
    # - hash of waifu@email.com
\n

在文章Front Matter中也可以配置上述参数，访问该文章页面时，将覆盖全局配置。\n尤其可以用来配置一个特殊的placeholder。

\n
valine:
  placeholder: "1. 提问前请先仔细阅读本文档⚡\\n2. 页面显示问题💥，请提供控制台截图📸或者您的测试网址\\n3. 其他任何报错💣，请提供详细描述和截图📸，祝食用愉快💪"
---
\n

评论通知与管理工具建议使用这个Valine-Admin。\n注意SITE_URL需要以/结尾。

\n

如果某一篇文章需要关闭评论功能，则在文章Front Matter中配置：

\n
---
title: 关闭评论
comment: false
---
\n

背景音乐

\n

在主题配置文件中，设置全局播放列表。\n在文章的 Front Matter 中，设置文章专有播放列表，访问该文章页面时，将覆盖全局配置。

\n
单列表
audio:
  - https://music.163.com/song?id=1387098940
  - https://music.163.com/#/playlist?id=2088001742
  - https://www.xiami.com/collect/250830668
  - https://y.qq.com/n/yqq/playsquare/3535982902.html
\n

如上，可以直接使用网易云、虾米、QQ音乐的播放列表、单曲，可以同时填写多个。

\n
多列表
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
\n

如果需要自定义媒体文件，可以按照以下格式填写：

\n
单列表
audio:
  - name: "曲目1"
    url: "播放地址"
    artist: "艺术家"
    cover: "封面"
    lrc: "歌词"
  - name: "曲目2"
    url: "播放地址"
    artist: "艺术家"
    cover: "封面"
    lrc: "歌词"
\n
多列表
audio:
    - title: 列表1
      list:
        - name: "曲目1"
          url: "播放地址"
          artist: "艺术家"
          cover: "封面"
          lrc: "歌词"
        - name: "曲目2"
          url: "播放地址"
          artist: "艺术家"
          cover: "封面"
          lrc: "歌词"
    - title: 列表2
      list:
        - https://music.163.com/#/playlist?id=2031842656
\n

如果要关闭当前页面的背景音乐播放器，则在文章Front Matter中配置：

\n
---
title: 关闭背景音乐
audio: false
---
\n

随机图库

\n\n
- https://i.loli.net/2020/10/30/qAMYEFXxJcKRsiG.gif
- https://i.loli.net/2020/10/30/rjdhcSgEN8COBPA.jpg
- https://i.loli.net/2020/10/30/HKyzSd7NI3mlBpt.jpg
- https://i.loli.net/2020/10/30/Y1CBXqgeokEs457.jpg
- https://i.loli.net/2020/10/30/Z5W6r2BSoiThHG1.jpg
\n\n
比如
image_server: "https://acg.xydwz.cn/api/api.php"
\n

加载第三方组件

\n
vendors:
  css:
    # 略略略
  js:
    # 略略略
\n

包括

\n

--|--|--\npace | 加载进度条|全局\npjax | 页面无刷新加载|全局\nanime | js动画效果|全局\nalgolia instantsearch| 基于algolia的站内搜索|全局\nlazyload | 图片懒加载|全局\nquicklink | 链接资源预加载|全局\nfetch | 获取播放列表|全局\nkatex copy_tex|数学公式显示及复制|按需\nfancybox | 图片放大显示及排列|按需\nvaline | 基于LeanCloud的评论系统及文章阅读次数统计|按需\nchart | 图表显示|按需

\n

以上文件加载全部基于jsDelivr，并对全局加载的组件进行了文件合并。\n如果不明白啥意思，则不要轻易修改。

\n
\n

主题版本升级的时候，可能会修改这里。\n如果修改过主题默认_config.yml，记得更新主题时，末尾的vendors也要及时修改。

\n
\n", "tags": [ "计算机科学", "二进制杂谈", "Theme Syutoi Documentation", "Hexo", "教程" ] }, { "id": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/dependents/", "url": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/dependents/", "title": "Step.1 依赖插件", "date_published": "2020-08-13T12:46:48.000Z", "content_html": "
\n

历史文档：本页保留上游主题的说明与示例，部分私有语法现仅显示为原文，不代表当前功能。当前写法与替代方案请参阅 Syutoi 写作与迁移示例。

\n
\n
\n

:rocket:快速开始 - :love_letter:依赖插件 - :pushpin:基本配置 - :rainbow:界面显示 - :unicorn:特殊功能

\n
\n
\n

请务必将hexo-renderer-multi-markdown-it升级到最新版，目前为 0.1.5

\n
\n

Theme Syutoi依赖以下Hexo插件

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
插件名称npm地址功能依赖程度
hexo-renderer-multi-markdown-it链接md文件渲染器，压缩css/js/html必需
hexo-autoprefixer链接给生成的css文件们添加浏览器前缀必需
hexo-algoliasearch链接站内搜索功能搜索按钮失灵
hexo-symbols-count-time链接文章或站点字数及阅读时间统计统计没有
hexo-feed链接生成Feed文件Feed文件没有
\n
\n

没有正确安装以上插件的话，本主题会报错or无法正确显示or部分功能失效。\nhexo-renderer-multi-markdown-it请注意升级到最新版

\n
\n

安装完以上插件后，修改站点配置文件，加入相关配置。

\n

multi-markdown-it安装与配置

\n

安装

\n
    \n
  1. \n

    安装前，记得务必卸载掉默认的hexo-renderer-marked，以及别的markdown文件渲染器。

    \n 
    npm un hexo-renderer-marked --save
    # 或者
    yarn remove hexo-renderer-marked
    \n
    2. \n
  2. \n

    安装

    \n 
    npm i hexo-renderer-multi-markdown-it --save
    # 或者
    yarn add hexo-renderer-multi-markdown-it
    \n
    3. \n
  3. \n

    如果安装缓慢，或者失败\n如报错

    \n 
    ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
    \n

    因为有一步需要下载puppeteer里的Chromium内核，基于天朝内部网络现状，这一步能不能成功要靠科学和运气，所以为了避免安装失败，需要加上--ignore-scripts跳过Chromium内核的下载。

    \n 
    npm i hexo-renderer-multi-markdown-it --save --ignore-scripts
    # 或者
    yarn add hexo-renderer-multi-markdown-it --ignore-scripts
    \n

    puppeteer主要是用来渲染mermaid流程图，只要文章中不使用mermaid就没有任何问题，如果要使用mermaid建议还是想办法完全安装。

    \n
    4. \n
\n

配置

\n
    \n
  1. 加入markdown配置，用来渲染md文件
    2. \n
\n
markdown:
  render: # 渲染器设置
    html: false # 过滤 HTML 标签
    xhtmlOut: true # 使用 '/' 来闭合单标签 （比如 <br />）。
    breaks: true # 转换段落里的 '\\n' 到 <br>。
    linkify: true # 将类似 URL 的文本自动转换为链接。
    typographer: 
    quotes: '“”‘’'
  plugins: # markdown-it插件设置
    - plugin:
        name: markdown-it-toc-and-anchor
        enable: true
        options: # 文章目录以及锚点应用的class名称，syutoi主题必须设置成这样
          tocClassName: 'toc'
          anchorClassName: 'anchor'
    - plugin:
        name: markdown-it-multimd-table
        enable: true
        options:
          multiline: true
          rowspan: true
          headerless: true
    - plugin:
        name: ./markdown-it-furigana
        enable: true
        options:
          fallbackParens: "()"
    - plugin:
        name: ./markdown-it-spoiler
        enable: true
        options:
          title: "你知道得太多了"
\n
    \n
  1. 加入minify配置，压缩css/js/html
    2. \n
\n
minify:
  html:
    enable: true
    exclude: # 排除hexo-feed用到的模板文件
      - '**/json.ejs'
      - '**/atom.ejs'
      - '**/rss.ejs'
  css:
    enable: true
    exclude:
      - '**/*.min.css'
  js:
    enable: true
    mangle:
      toplevel: false
    output:
    compress:
    exclude:
      - '**/*.min.js'
\n
    \n
  1. 停用默认代码高亮功能，否则代码块的mac样式不能正常显示。\n找到highlight和prismjs，把enable改成false。
    2. \n
\n
highlight:
  enable: false

prismjs:
  enable: false
\n

autoprefixer配置建议

\n
autoprefixer:
  exclude:
    - '*.min.css'
\n

缺少这个插件，首页卡片翻转效果在部分浏览器中无法正确显示。

\n

algolia配置建议

\n
algolia:
  appId: #Your appId
  apiKey: #Your apiKey
  adminApiKey: #Your adminApiKey
  chunkSize: 5000
  indexName: #"syutoi"
  fields:
    - title #必须配置
    - path #必须配置
    - categories #推荐配置
    - content:strip:truncate,0,2000
    - gallery
    - photos
    - tags
\n

feed配置建议

\n
keywords: #站点关键词，用“,”分隔

feed:
    limit: 20
    order_by: "-date"
    tag_dir: false
    category_dir: false
    rss:
        enable: true
        template: "themes/syutoi/layout/_alternate/rss.ejs"
        output: "rss.xml"
    atom:
        enable: true
        template: "themes/syutoi/layout/_alternate/atom.ejs"
        output: "atom.xml"
    jsonFeed:
        enable: true
        template: "themes/syutoi/layout/_alternate/json.ejs"
        output: "feed.json"
\n", "tags": [ "计算机科学", "二进制杂谈", "Theme Syutoi Documentation", "Hexo", "教程" ] }, { "id": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/", "url": "https://hexo.syutoi.com/computer-science/note/theme-syutoi-doc/", "title": "Hexo主题Syutoi & multi-markdown-it渲染器使用说明", "date_published": "2020-08-13T12:45:48.000Z", "content_html": "
\n

历史文档：本页保留上游主题的说明与示例，部分私有语法现仅显示为原文，不代表当前功能。当前写法与替代方案请参阅 Syutoi 写作与迁移示例。

\n
\n
\n

跳票N久终于更新的简单的使用说明

\n\n

已经支持hexo 5。

\n
\n
\n

因博主被学业和工作掏空，本项目已停滞更新大半年，问题也无法及时回复大家，这个悲惨状态可能还要持续半年的样子。

\n

有很多热心小伙伴在评论区或者项目issue帮忙回答问题，非常非常感谢！

\n

本项目是完全开源的，也有做一些example示例，大家可以随便拿随便改。\n但是很抱歉，博主我暂时不能提供更多的支持，这个写的乱七八糟的文档，暂时也没有时间把它写得更专业一些。\n非常对不住大家！

\n

iconfont的添加申请，我看到留言后会尽快加上，希望各位小伙伴能看到。

\n
\n
\n

当前版本更新至 0.2.5，更新记录点此

\n
\n
\n

:rocket:快速开始 - :love_letter:依赖插件 - :pushpin:基本配置 - :rainbow:界面显示 - :unicorn:特殊功能

\n
\n

设计缘由

\n

前几年在Bear和Evernote上整理了大量笔记，非常喜欢Bear默认的markdown渲染样式。\n后来因为换了安卓手机，用不了Bear，四处搜寻替代品，没有满意的。\n然后阴差阳错知道了Hexo，又得知Github也可以免费建私有仓库了，故再次转移阵地到了自建博客，并部署在Github Pages。

\n

因为这个博客是用来记笔记的，故起名书架。\n对应的主题即Theme.Syutoi，可以说是为了笔记阅读而生的主题。\n样式严重参考Bear，部分代码严重参考NexT。

\n

Hexo的默认及常用渲染器均使用highlight.js进行代码高亮，而我喜欢Prism.js，故重写了一个渲染器配合主题食用。\n渲染器取名multi，因为集成了很多很多很多markdown-it插件，以及压缩静态文件的功能。\n（最新版的默认渲染器也支持Prism.js了，可喜可贺，但不想用，哈哈哈哈哈哈哈

\n

墙内Github Pages访问速度时而感人，所以用了jsDelivr加速，主要是因为它可以按需合并依赖文件。

\n

快速安装

\n
# cd your-blog
git clone https://github.com/syutoi/hexo-theme-syutoi.git ./themes/syutoi
\n

打开主题目录，内有example文件夹，提供了配置文件的demo供参考。

\n

安装依赖插件

\n

在应用主题之前，必须至少安装 hexo-renderer-multi-markdown-it 渲染插件 和 hexo-autoprefixer。

\n

插件安装与配置教程戳此

\n

应用主题

\n

修改站点配置

\n

修改站点配置文件<root>/_config.yml，把主题改为 syutoi

\n
theme: syutoi
\n

修改主题配置

\n

主题配置的所有参数在<root>/themes/syutoi/_config.yml文件中。

\n

为了方便主题升级，请在根目录新建一个yml文件，命名为_config.syutoi.yml。\n也就是说，所有主题的自定义配置均保存于<root>/_config.syutoi.yml文件。

\n

主题的基础配置可以参考这里\n界面显示相关的配置参考这里

\n

更新记录

\n

标签含义：\n❗ 需要手动操作的更新信息\n⚠️ 需要注意的更新信息\n🔧 已修复的问题\n⌛ TODO

\n

0.2.4 👉 0.2.5

\n

💡 避免直接修改主题文件，添加各种自定义：

\n\n

🔧 修复一些BUG

\n

0.2.3 👉 0.2.4

\n

⚠️ 评论功能更新

\n\n

⚠️ 配置新增

\n\n

⚠️ 背景音乐功能增强，配置戳此

\n\n

⚠️ 增加media标签，在文章中插入音频和视频播放列表，方法戳此\n⌛ 视频播放器有待增强（显示分段标签，字幕）

\n

🔧 随机图库支持非渣浪图床的任意图片\n🔧 还有许多小BUG

\n

0.2.2 👉 0.2.3

\n

❗ 增加主题文件外自定义语言包的功能，配置戳此\n🔧 提高低版本浏览器兼容性

\n

0.2.1 👉 0.2.2

\n

⚠️ 弃用mediumzoom，改成fancybox，配置戳此\n💡 增加语言包：繁体中文和日语\n💡 quiz功能优化，根据语言显示题型标签\n🔧 修复评论功能中反复初始化leancloud-storage\n🔧 修复audio: false时不能隐藏播放按钮、停止播放

\n

0.2 👉 0.2.1

\n

⚠️ 配置文件添加 loader 参数，配置戳此\n💡 二级list区别显示\n🔧 修复浏览位置定位BUG\n🔧 修复firework动画延迟\n🔧 优化评论功能

\n

0.1.9 👉 0.2

\n

⚠️ 评论功能大改

\n\n

⚠️ 增加单击页面烟花效果，配置戳此\n💡 弃用Velocity，改用anime.js，方便未来添加更多!!花里胡哨的!!功能!!严重拖慢页面滑行速度!!\n🔧 新增多枚icon，包括豆瓣i-douban等\n🔧 一些显示问题

\n", "tags": [ "计算机科学", "二进制杂谈", "Theme Syutoi Documentation", "Hexo", "教程" ] }, { "id": "https://hexo.syutoi.com/computer-science/java/course-1/week-2/", "url": "https://hexo.syutoi.com/computer-science/java/course-1/week-2/", "title": "第2周 判断", "date_published": "2020-04-13T11:12:45.000Z", "content_html": "
\n

以下为个人学习笔记和习题整理\n课程：零基础学Java语言-浙江大学-翁恺 @ 中国大学MOOC\nhttps://www.icourse163.org/course/ZJU-1001541001

\n
\n

课堂笔记

\n

关系运算

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
运算符意义
==相等
!=不相等
\n
\n

|大于\n=|大于或等于\n<\t| 小于\n<=|小于或等于

\n
\n\n
Math.abs(f1-f2)<0.0000001
\n\n

判断语句 if else

\n
if(x < 0) 
{
\t...
}
else if(x == 0) 
{
\t...
}
else
{
\t...
}
\n

多路分支 switch case

\n
switch (type)
{
    case 1:
    case 2:
        ...
        break;
    default:
        System.out.println(...);
        break;
}
\n\n

小测验

\n
    \n
  1. \n

    写出以下代码段的执行结果：

    \n 
    int num=34, max=30;
    if ( num >= max*2 )
        System.out.println("zhang");
        System.out.println("huang");
    System.out.println("zhu");
    \n
    \n

    huang\nzhu

    \n
    \n
    2. \n
  2. \n

    写出以下代码段的执行结果：

    \n 
    int limit = 100;
    int num1 = 15;
    int num2 = 40;
    if ( limit <= limit)
    {
        if ( num1 == num2 )
            System.out.println("lemon");
        System.out.println("lime");
    }
    System.out.println("grape");
    \n
    \n

    lime\ngrape

    \n
    \n
    3. \n
\n

编程题

\n

题目1. 时间换算（5分）

\n\n

解题代码

\n
import java.util.Scanner;

public class Main {

\tpublic static void main(String[] args) {
\t\tScanner in = new Scanner(System.in);
\t\t
\t\tint bjt = in.nextInt();
\t\t
\t\tint utc = bjt - 800;
\t\tif(utc < 0)
\t\t{
\t\t\tutc += 2400; // 时为负数，则进行隔日计算
\t\t}
\t\t
\t\tSystem.out.println(utc);
\t}

}
\n

题目2. 信号报告（5分）

\n\n

解题代码

\n
import java.util.Scanner;

public class Main {

\tpublic static void main(String[] args) {
\t\tScanner in = new Scanner(System.in);
\t\t
\t\tint rs = in.nextInt();\t\t
\t\tint readability = rs / 10;
\t\tint strength = rs % 10;
\t\t
\t\tswitch(strength)
\t\t{
\t\t\tcase 1:
\t\t\t\tSystem.out.print("Faint signals, barely perceptible");
\t\t\tbreak;
\t\t\tcase 2:
\t\t\t\tSystem.out.print("Very weak signals");
\t\t\tbreak;
\t\t\tcase 3:
\t\t\t\tSystem.out.print("Weak signals");
\t\t\tbreak;
\t\t\tcase 4:
\t\t\t\tSystem.out.print("Fair signals");
\t\t\tbreak;
\t\t\tcase 5:
\t\t\t\tSystem.out.print("Fairly good signals");
\t\t\tbreak;
\t\t\tcase 6:
\t\t\t\tSystem.out.print("Good signals");
\t\t\tbreak;
\t\t\tcase 7:
\t\t\t\tSystem.out.print("Moderately strong signals");
\t\t\tbreak;
\t\t\tcase 8:
\t\t\t\tSystem.out.print("Strong signals");
\t\t\tbreak;
\t\t\tcase 9:
\t\t\t\tSystem.out.print("Extremely strong signals");
\t\t\tbreak;
\t\t}
\t\t
\t\tswitch(readability)
\t\t{
\t\t\tcase 1:
\t\t\t\tSystem.out.print(", unreadable.");
\t\t\tbreak;
\t\t\tcase 2:
\t\t\t\tSystem.out.print(", barely readable, occasional words distinguishable.");
\t\t\tbreak;
\t\t\tcase 3:
\t\t\t\tSystem.out.print(", readable with considerable difficulty.");
\t\t\tbreak;
\t\t\tcase 4:
\t\t\t\tSystem.out.print(", readable with practically no difficulty.");
\t\t\tbreak;
\t\t\tcase 5:
\t\t\t\tSystem.out.print(", perfectly readable.");
\t\t\tbreak;
\t\t}
\t}

}
\n", "tags": [ "计算机科学", "Java", "零基础学Java语言-浙江大学-翁恺" ] }, { "id": "https://hexo.syutoi.com/computer-science/java/course-1/week-1/", "url": "https://hexo.syutoi.com/computer-science/java/course-1/week-1/", "title": "第1周 计算", "date_published": "2020-04-12T12:46:25.000Z", "content_html": "
\n

以下为个人学习笔记和习题整理\n课程：零基础学Java语言-浙江大学-翁恺 @ 中国大学MOOC\nhttps://www.icourse163.org/course/ZJU-1001541001

\n
\n

课堂笔记

\n

读输入、字符串输出

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

System.out.println(in.nextLine());
// 让in这个对象做读入下一行的动作，结果交给System.out这个对象去打印一行。

// 字符串的 + 用来连接两个字符串形成更长的字符串。
System.out.println("Hello" + " world.");
System.out.println("Hello" + 2);
System.out.println("Hello" + 2 + 3);
System.out.println(2 + 3 + "Hello");
\n

tips：

\n\n
in.close();//释放
\n

变量

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
abstractdoimplementsprotectedthrows
booleandoubleimportpublictransient
breakelseinstanceofreturntrue
byteextendsintshorttry
casefalseinterfacestaticwhile
catchfinallongstrictfpvoid
charfinallynativesupervolatile
classfloatnewswitch
const*fornullsynchronized
continuegoto*packagethis
defaultifprivatethrow
\n\n

常量 final

\n
final int AMOUNT = 100;
// final是一个修饰符，表示这个变量的值一旦初始化，就不能再修改了。
\n

变量类型

\n

整数 int

\n
int price = in.nextInt();
\n\n

浮点数 double

\n\n
System.out.println(1.2-1.1);
// 结果为 0.09999999999999987
\n\n

赋值运算

\n

强制类型转换

\n\n
double a = 1.0;
double b = 2.0;
int i = (int)a/b; //会报错
int i = (int)(a/b); //不会报错
\n

运算符优先级

\n\n
result = a = b = 3 + c;
result = 2;
result = (result = result * 2) * 6 * (result = 3 + result);
\n

复合赋值

\n\n
total += (sum+100)/2;
total = total + (sum+100)/2;

total * = sum+12;
total = total*(sum+12);

total /= 12+6;
total = total / (12+6);
\n\n
a = 14;
t1 = a++; // t1先被赋值为 a 即14， a自加到 15
t2 = ++a; // a先自加到 15，t2被赋值为 a 即 15
\n

编程题

\n

题目1. 温度转换（5分）

\n\n

解题代码

\n
import java.util.Scanner;

public class Main {

\tpublic static void main(String[] args) {
\t\tScanner in = new Scanner(System.in);
\t\t
\t\t// 获得输入的整数
\t\tint fahrenheit = in.nextInt();
\t\t// 计算摄氏度
\t\tdouble centigrade = (fahrenheit - 32) / (9 / 5.0);
\t\t// 将浮点数转换为整数输出
\t\tSystem.out.println((int)centigrade);
\t}

}
\n", "tags": [ "计算机科学", "Java", "零基础学Java语言-浙江大学-翁恺" ] }, { "id": "https://hexo.syutoi.com/code-highlight/", "url": "https://hexo.syutoi.com/code-highlight/", "title": "Code Highlight Style test", "date_published": "2019-07-25T08:43:00.000Z", "content_html": "

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

\n\n
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\n
#[derive(Debug)]
pub enum State {
    Start,
    Transient,
    Closed,
}

impl From<&'a str> for State {
    fn from(s: &'a str) -> Self {
        match s {
            "start" => State::Start,
            "closed" => State::Closed,
            _ => unreachable!(),
        }
    }
}
\n
[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}
  }
]
\n
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
\n
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>
\n
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\\bno\\-highlight\\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export $initHighlight;
\n
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\\\\\"; // this is an error

  return -2e3 + 12l;
}
\n
CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');
\n
#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString*)worldName;
@required
- (BOOL)allowsToLive;
@end

@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end
\n
/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}
\n
import Foundation

@objc class Person: Entity {
  var name: String!
  var age:  Int!

  init(name: String, age: Int) {
    /* /* ... */ */
  }

  // Return a descriptive string for this person
  func description(offset: Int = 0) -> String {
    return "\\(name) is \\(age + offset) years old"
  }
}
\n
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
\n
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
\n
# Makefile

BUILDDIR      = _build
EXTRAS       ?= $(BUILDDIR)/extras

.PHONY: main clean

main:
\t@echo "Building main facility..."
\tbuild_main $(BUILDDIR)

clean:
\trm -rf $(BUILDDIR)/*
\n
package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now\\`)
    go println(len("hello world!"))
    return
}
\n
#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
  echo "Superuser rights required"
  exit 2
fi

genApacheConf(){
  echo -e "# Host ${HOME_DIR}$1/$2 :"
}
\n
; boilerplate
[package]
name = "some_name"
authors = ["Author"]
description = "This is \\
a description"

[[lib]]
name = ${NAME}
default = True
auto = no
counter = 1_000
\n", "tags": [] }, { "id": "https://hexo.syutoi.com/markdown/", "url": "https://hexo.syutoi.com/markdown/", "title": "Markdown Style test", "date_published": "2018-07-24T15:31:06.000Z", "content_html": "

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\n\n
\n

Headers

\n
# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------
\n

H1

\n

H2

\n

H3

\n

H4

\n
H5
\n
H6
\n

Alternatively, for H1 and H2, an underline-ish style:

\n

Alt-H1

\n

Alt-H2

\n

Emphasis

\n
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~
\n

Emphasis, aka italics, with asterisks or underscores.

\n

Strong emphasis, aka bold, with asterisks or underscores.

\n

Combined emphasis with asterisks and underscores.

\n

Strikethrough uses two tildes. Scratch this.

\n

Lists

\n
1. First ordered list item
2. Another item
  * Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

   To have a line break without a paragraph, you will need to use two trailing spaces.  
   Note that this line is separate, but within the same paragraph.  
   (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
- Paragraph In unordered list

  For example like this.

Common Paragraph with some text.
And more text.
\n
    \n
  1. First ordered list item
    2. \n
  2. Another item
    3. \n
\n\n
    \n
  1. \n

    Actual numbers don't matter, just that it's a number

    \n
    2. \n
  2. \n

    Ordered sub-list

    \n
    3. \n
  3. \n

    And another item.

    \n

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

    \n

    To have a line break without a paragraph, you will need to use two trailing spaces.
    \nNote that this line is separate, but within the same paragraph.
    \n(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

    \n
    4. \n
\n\n\n\n\n

Common Paragraph with some text.\nAnd more text.

\n

Inline HTML

\n
<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>
\n

To reboot your computer, press ctrl+alt+del.

\n
<dl>
    <dt>Definition list</dt>
    <dd>Is something people use sometimes.</dd>

    <dt>Markdown in HTML</dt>
    <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
\n
\n
Definition list
\n
Is something people use sometimes.
\n
<dt>Markdown in HTML</dt>\n<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>\n
\n
\n

Links

\n
[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://hexo.io
[1]: https://hexo.io/docs/
[link text itself]: https://hexo.io/api/
\n

I'm an inline-style link

\n

I'm an inline-style link with title

\n

I'm a reference-style link

\n

I'm a relative reference to a repository file

\n

You can use numbers for reference-style link definitions

\n

Or leave it empty and use the link text itself

\n

Some text to show that the reference links can follow later.

\n

Images

\n
hover to see the title text:

Inline-style:

![alt text](https://hexo.io/icon/favicon-196x196.png "Logo Title Text 1")

Reference-style:
![alt text][logo]

[logo]: https://hexo.io/icon/favicon-196x196.png "Logo Title Text 2"
\n

hover to see the title text:

\n

Inline-style:

\n

\"alt

\n

Reference-style:\n\"alt

\n

Code and Syntax Highlighting

\n

Inline code has back-ticks around it.

\n
var s = "JavaScript syntax highlighting";
alert(s);
\n
s = "Python syntax highlighting"
print s
\n
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
\n

Tables

\n
|                |ASCII                          |HTML                         |
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'`            |'Isn't this fun?'            |
|Quotes          |`"Isn't this fun?"`            |"Isn't this fun?"            |
|Dashes          |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ASCIIHTML
Single backticks'Isn't this fun?''Isn't this fun?'
Quotes"Isn't this fun?""Isn't this fun?"
Dashes-- is en-dash, --- is em-dash-- is en-dash, --- is em-dash
\n

Colons can be used to align columns.

\n
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned |  |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TablesAreCool
col 3 isright-aligned
col 2 iscentered
zebra stripesare neat
\n

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

\n
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MarkdownLessPretty
Stillrendersnicely
123
\n
\n

You can find more information about LaTeX mathematical expressions here.

\n
\n

Blockquotes

\n
\n

Blockquotes are very handy in email to emulate reply text.\nThis line is part of the same quote.

\n
\n

Quote break.

\n
\n

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

\n
\n

Horizontal Rule

\n

Three or more...

\n
---

Hyphens

***

Asterisks

___

Underscores
\n
\n

Hyphens

\n
\n

Asterisks

\n
\n

Underscores

\n

Line Breaks

\n
Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
\n

Here's a line for us to start with.

\n

This line is separated from the one above by two newlines, so it will be a separate paragraph.

\n

This line is also a separate paragraph, but...\nThis line is only separated by a single newline, so it's a separate line in the same paragraph.

\n
\n
This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.
\n

This is a regular paragraph.

\n\n \n \n \n
Foo
\n

This is another regular paragraph.

\n

Youtube videos

\n
<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)
\n

\n

Pure markdown version:

\n

\"IMAGE

\n", "tags": [ "Foo", "Bar" ] }, { "id": "https://hexo.syutoi.com/images/", "url": "https://hexo.syutoi.com/images/", "title": "Images", "date_published": "2013-12-26T14:46:49.000Z", "content_html": "

This is a image test post.

\n

\"\"

\n

\"Caption\"

\n

\"\"

\n

\"Small

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/no-title/", "url": "https://hexo.syutoi.com/no-title/", "title": "", "date_published": "2013-12-25T14:57:49.000Z", "content_html": "

This post doesn't have a title. Make sure it's accessible.

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/excerpts/", "url": "https://hexo.syutoi.com/excerpts/", "title": "Excerpts", "date_published": "2013-12-24T16:23:23.000Z", "content_html": "

The following contents should be invisible in home/archive page.

\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam.

\n

Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/videos/", "url": "https://hexo.syutoi.com/videos/", "title": "Videos", "date_published": "2013-12-24T16:19:15.000Z", "content_html": "

This is a video test post.

\n

Youtube

\n

Watch on YouTube

\n

Vimeo

\n

Watch on Vimeo

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/gallery-post/", "url": "https://hexo.syutoi.com/gallery-post/", "title": "Gallery Post", "date_published": "2013-12-24T16:16:18.000Z", "content_html": "

This post contains 4 photos:

\n\n

All photos should be displayed properly.

\n

From Wallbase.cc

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/tag-plugins/", "url": "https://hexo.syutoi.com/tag-plugins/", "title": "Tag Plugins", "date_published": "2013-12-24T16:14:39.000Z", "content_html": "

This post is used for testing tag plugins. See docs for more info.

\n

Block Quote

\n

Normal blockquote

\n
\n

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

\n
\n

Quote from a book

\n

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

\n
\n

Quote from Twitter

\n

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

\n
\n

Quote from an article on the web

\n

Every interaction is both precious and an opportunity to delight.

\n
\n

Code Block

\n

Normal code block

\n
alert('Hello World!');
\n

With caption

\n
Array.map
array.map(callback[, thisArg])
\n

With caption and URL

\n
.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]
\n

With marked lines

\n

Line 1,7-8,10 should be marked with different color.

\n
const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
\n

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

\n

Gist

\n

View the Gist example

\n

jsFiddle

\n

Open the jsFiddle example

\n

Pullquote

\n

Left

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

\n

Right

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/link-post-without-title/", "url": "https://hexo.syutoi.com/link-post-without-title/", "title": "", "date_published": "2013-12-24T15:44:13.000Z", "content_html": "

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

\n", "tags": [] }, { "id": "https://hexo.syutoi.com/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/", "url": "https://hexo.syutoi.com/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/", "title": "日本語テスト", "date_published": "2013-12-24T15:33:26.000Z", "content_html": "

This is a Japanese test post.

\n

私は昨日ついにその助力家というのの上よりするたなけれ。

\n

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

\n

がたを知っないはずも同時に九月をいよいよたありた。

\n

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

\n
\n

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

\n
\n

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

\n

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

\n", "tags": [] } ] }