本博客常用的语法、排版和技巧

    Hexo

Hexo 官方有很多帮助排版的语法，详细内容可以参见官网的 Tag Plugins 。这里列出的是常用的。

需要说明的是，由于本博客 cps.ninja 加载了 Highlight.js ，所以有些语法会用不了，比如给代码块添加 caption 和 URL 等等。

插入图片

Hexo 采用 Asset Folders 的方式来管理和博客相关的各种文件，比如 CSS 文件，JavaScript 文件，图片文件等。

首先开打开这个功能，需要在 Hexo 博客文件夹的根目录下的配置文件 _config.yml 中加入这一段代码：

## ~/blog/_config.yml

post_asset_folder: true

之后，每当使用 hexo new 创建新的博文时，都会生成一个对应的 asset 文件夹来存放这篇博文的图片等文件
比如：hexo new java basics 在生成 java-basics.md 文件的同时，还会生成一个文件夹 java-basics

source/
└── _posts/
    ├── java-basics.md
    └── java-basics/
        └── IntelliJ.png

使用以下代码插入这张图片：

方法一：使用 <img> 标签插入图片，可设置宽度为 800 像素，高度自适应等
<img src="IntelliJ.png" alt="Welcome to IntelliJ IDEA" style="width: 800px; height: auto;">

方法二：使用 Hexo 自带方式，此法无法设置图片的排版，比如对齐或大小
{% asset_img IntelliJ.png Welcome to IntelliJ IDEA %}

方法三（推荐）：标准的 Markdown 语法，方便后续博客迁移，兼容性更强
![Welcome to IntelliJ IDEA](IntelliJ.png)

如果多个不同的 .md 博客文章要共用同样的图片，就可以使用 Global Asset Folder 。该文件夹路径为 Hexo 博客根目录下的 source/images
例如 Global Asset Folder 里面一张图片 source/images/donate.jpg ，就可以通过以下代码插入到文章中：

<img src="/images/donate.jpg" alt="QR Code for donation">

或

![QR Code for donation](/images/donate.jpg)

列表技巧

如果希望以列表展现一大块内容，所有段落采用相同缩进即可，不需要、也不能挨着，要空一行，否则遇到代码块（code block）会显示不出代码排版。
代码块中的内容不能出现 2 个连续的空行，否则排版也会错误显示。

  • 展示列表中的大段内容排版

    (define atom?
 (lambda (x)
   (and (not (pair? x))
        (not (null? x))))

    这是第三段

- 展示列表中的大段内容排版

  ```scheme
   (define atom?
    (lambda (x)
      (and (not (pair? x))
           (not (null? x))))
  ``` ## 说明：这是第二段代码块，段落间有且只能有一个空行

  这是第三段

注意，反引号 ``` 和后面的语言标记推荐不加空格、字母都小写。

带超链接的代码

markdown-cheat-sheet.md

[`markdown-cheat-sheet.md`](/2019/09/18/markdown-cheat-sheet/)

带作者的引用

China is a civilization, masquerading as a nation state.

Lucian Pye
{% blockquote Lucian Pye %}
China is a civilization, masquerading as a nation state.
{% endblockquote %}

表格

Left-Aligned Center Aligned Right Aligned
Hexo Static Site Generator $1600
PLN Theme $12
zebra stripes are neat $1 
| Left-Aligned  | Center Aligned        | Right Aligned |
| :------------ |:---------------------:| -------------:|
| Hexo          | Static Site Generator |         $1600 |
| PLN           | Theme                 |           $12 |
| zebra stripes | are neat              |            $1 |

若无论如何调整 Markdown 语法都无法实现想要的排版

直接写 HTML（在 Chrome 里调整 HTML 代码直到出现满意的排版效果，然后直接复制粘贴到文章里）

打赏