本博客写作规范说明与排版指导

Mess
,

2025 年 5 月 15 日，经数十次折腾后，我回到了静态博客，值得庆祝 🎉🎉🎉

写作规范之分类

  • Essays：生活、随笔、散文、游记
  • Thoughts：思想，自我管理
  • Toolchain：工具、软硬件使用、生活技巧等
  • Tech：技术性质文章
  • Poetry：诗、发骚
  • Mess：杂文，难以归属到上述任一类别

写作规范之标签

看心情随意发挥，注意不要随意膨胀~！

以下为排版指导

容器

在 md 文章里直接书写如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% note tip %}
**提示操作：tip**
{% endnote %}

{% note danger %}
**危险操作：danger**
{% endnote %}

{% note warning %}
**警告操作：warning**
{% endnote %}

{% note success %}
**成功操作：success**
{% endnote %}

以上代码效果如下：

提示操作：tip

危险操作：danger

警告操作：warning

成功操作：success

图表

图表使用了 chart.js，在 md 文章里直接书写如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% chart 80% 300 %}
{
   type: 'line',
   data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
         label: 'My dataset',
         backgroundColor: 'rgb(255, 99, 132)',
         borderColor: 'rgb(255, 99, 132)',
         data: [0, 10, 5, 2, 20, 30, 45]
      }]
   },
   options: {
      responsive: true,
      title: {
      display: true,
      text: 'Chart.js Line Chart'
      }
   }
};
{% endchart %}

以上代码效果如下：

任务列表

在 md 文章里直接书写如下代码：

1
2
3
- [ ] 苹果
- [x] 香蕉
- [x] 橘子

以上代码效果如下：

  • 苹果
  • 香蕉
  • 橘子

图片

  1. 直接插入一张图片
    待续…
  2. 并排图片
    待续…

隐藏文字

在 md 文章里直接书写如下代码：

1
2
{% spoiler 默认配置效果 %}
{% spoiler 这是一段隐藏的话 %}

以上代码效果如下：点击即可显示

默认配置效果 这是一段隐藏的话

折叠隐藏

在 md 文章里直接书写如下代码：

1
2
3
4
<details>
    <summary>点击查看详情</summary>
    <p>我是被隐藏的内容</p>
</details>

以上代码效果如下：

点击查看详情

我是被隐藏的内容

分隔线

直接在 md 里打三个横杠 --- 即可，效果如下