这个博客(ym-blog)里的文章,都是在后台用一种叫 Markdown(标记语法)的写法敲出来的:几个简单的符号,就能排出标题大小、加粗、引用、表格这些版式。听着玄乎,其实常用的就十来个符号,照着这篇练一遍就会了。

这篇有个特别之处:它本身就是用下文讲的格式排的。讲到哪种格式,文章里就当场用一遍,你看到的效果就是你发文时的效果,不用另找样板。

不懂部署的先看姊妹篇:《ym-blog 搭建指南》 教怎么把博客建起来,这篇教建好之后怎么往里写东西。

先搞清:一篇文章由三块组成

打开后台的写文章页面,从上到下是三块,认清它们就不慌了:

  1. 文章信息:标题、短链、封面、摘要、标签——都是填空,不难,下面逐个说
  2. 正文框:文章内容全写在这里,用 Markdown 符号排版;上方有一排插入按钮(图片、视频、外链、AI 写作)
  3. 发布面板:定时、置顶、评论开关都在这里,最下面一排是保存和发布按钮

先提醒一句最容易误会的事:编辑器里没有 Word 那种「选中文字点加粗按钮」的工具栏。加粗、标题这些格式,全靠在正文里打符号(比如两个星号包住文字就是加粗)。不用怕,符号就那么几个,而且右边(手机上是切换过去)有实时预览,写成什么样当场就能看见,写错了改符号就行。

还有个让人安心的设计:打字就会自动存草稿。打字先存到本机,每 60 秒再自动存一份到服务器;万一写一半关了页面、断了网,重新打开这篇文章,页面上方会提示有一份更新的自动保存,点「恢复这份」就能找回来,不会白写。

手机发文全流程

站长平时主要用手机发文,这套流程就是按手机来的。

第一步:进后台。 手机浏览器打开博客地址后面加 /admin/(比如本站就是 bk.ymaym.top/admin/),输管理员账号密码登录。登录状态管 30 天,登一次能用很久,不用天天输。

第二步:新建文章。 登录后是仪表盘,点最上面那个醒目的「✎ 写新文章」按钮;或者先进「文章」列表,点右上角「+ 新建文章」,效果一样。

下面几张步骤图是与真实后台同款的示例界面(里面是演示用的示例文章),按钮和字段的位置与你实际打开时一致,照着找就行。

后台文章列表:点右上角「+ 新建文章」开始写(示例界面)
后台文章列表:点右上角「+ 新建文章」开始写(示例界面)

图:文章列表右上角的「+ 新建文章」(红框 ②);也可以在仪表盘点「✎ 写新文章」,效果一样。

第三步:填标题。 在「标题」栏写文章名。这是访客看到的大标题(公开页上是 28px 的大字),正文里不用再写一遍标题。

第四步:写正文。 点进正文框直接打字,格式符号的打法看下面「格式全解」一章,边写边对照。手机屏幕窄,编辑和预览是上下两块、不能同时看,工具条上有个「切换 编辑/预览」按钮,写一段点一下看效果,再点回来接着写。

第五步:传图。 点工具条上的「🖼 插入图片(本地直传)」,从相册选图(可以多选),传完图片会自动以一行符号的形式插进正文光标处,不用管它,预览里就是图。详细规矩在「链接和图片」一节。

手机上的编辑器工具条:插入图片与切换编辑/预览(示例界面)
手机上的编辑器工具条:插入图片与切换编辑/预览(示例界面)

图:手机上的工具条——红框 ⑤ 是「插入图片(本地直传)」,点它从相册选图;下面红框是「切换 编辑/预览」,写一段点一下看效果。

第六步:设封面和标签(可跳过)。 封面点「选封面」从媒体库挑一张;不设也行,系统自动拿正文第一张图当封面。标签在标签栏输入文字按回车添加,想打几个打几个。不设封面又没插图的文章,首页上就是纯文字卡片。

点「选封面」后从媒体库挑图(示例界面)
点「选封面」后从媒体库挑图(示例界面)

图:点「选封面」弹出的媒体库,挑中一张点「选这个」(红框 ⑥)就设好了。

第七步:发布。 拉到最下面的发布面板,点「立即发布(Publish)」。发布完打开博客首页就能看到,点进去检查一遍版式——手机上自己看一遍最稳妥。

发布面板:点「立即发布」就上线(示例界面)
发布面板:点「立即发布」就上线(示例界面)

图:发布面板在编辑器最下面,点橙色的「立即发布」(红框 ⑦)即上线;定时、置顶、评论开关也都在这一块。

电脑发文全流程:和手机的差别

电脑上打开同一个后台地址登录,页面和字段跟手机一模一样,差别只有三处,都让写长文更舒服:

  • 左右并排:屏幕够宽时,正文框在左、预览在右,打字时右边实时跟着变,不用来回切换(手机上要靠「切换 编辑/预览」按钮)。
  • 拖拽传图:把电脑里的图片、视频文件直接拖进正文框,松手就上传并插入;手机上没有拖拽,只能点按钮从相册选。
  • 粘贴传图:截图或复制了图片后,在正文框里按 Ctrl+V 粘贴,图片直接上传插入——写教程要配很多截图时,这是最快的办法。

其余像自动存草稿、发布按钮的位置、格式符号的打法,手机电脑完全一致,在哪边写一半换到另一边接着写都没问题(记得先等它自动存上,或者手动点一次「保存」)。

电脑上的编辑器:工具条与左右分栏预览(示例界面)
电脑上的编辑器:工具条与左右分栏预览(示例界面)

图:电脑上的编辑器——红框里是插入工具条(传图、贴视频外链、从媒体库选、AI 写作都在这一排),下面左边写正文、右边实时预览。

格式全解:怎么写,出来什么样

这一章是核心。每个格式都先给出源码(放在灰框里,照着敲),紧接着是真实效果。源码里的符号都是英文半角符号,用中文输入法时注意切到英文标点,全角符号不认。

标题:从二级用起,一共三级可用

文章大标题已经在标题栏里了,所以正文里的标题从二级开始用。井号越多,字越小:

## 二级标题(章节大标题)
### 三级标题(小节)
#### 四级标题(更小的节)

实际效果就是本章各个小节的样子:二级标题约 25px 加粗,是分章用的;三级约 20px 加粗(比如上面「标题:从二级用起」这行);四级和正文一样大、只靠加粗区分,长这样:

我是四级标题,正文从我下面开始

三个必须知道的规矩:

  • 井号后面必须有空格,##标题 不生效,## 标题 才行——这是新手第一大坑
  • 正文里不要用一级标题(单个 #):写了也不会变成大标题,格式会被去掉。一级标题的位置就是标题栏,别在正文里抢
  • 五个以上井号不支持:##### 写出来就是带着井号的普通一行字,不会变标题
  • 章节目录只收二级和三级标题:文章开头那个「目录(Contents)」框是系统按二级、三级标题自动生成的(四级不进目录),所以分章请用二级、节用三级,目录才整齐

加粗、斜体、删除线、行内代码

**要加粗的字**  *要倾斜的字*  ~~要划掉的字~~  `要标灰的字`

效果:这是要加粗的字,这是要倾斜的字,这是要划掉的字,这是要标灰的字。

  • 加粗最常用:关键词、结论、提醒,都靠它抓眼球
  • 行内代码(一个反引号包住,反引号在键盘左上角、数字 1 左边)适合写命令、文件名、参数,出来是灰底等宽字,和正文一眼分得开
  • 星号必须成对、把内容包紧;落单一个星号就只显示星号本身

引用块

行首打 > 加空格,连续几行会合成一整块:

> 引用块第一行
> 引用块第二行

效果:

引用块第一行
引用块第二行

公开页上引用块是左边一条主题色竖线、浅色底、文字发灰。适合放大段引用、官方原话、重要提示——比如这篇里各处提醒,换成引用块就很醒目。

列表

无序列表用 - 加空格,有序列表用数字加小数点再加空格:

- 苹果
- 香蕉

1. 第一步
2. 第二步

效果:

  • 苹果
  • 香蕉
  1. 第一步
  2. 第二步

两个规矩:符号后面必须有空格;不支持多级缩进——想在列表里再套一层缩进子项,发布后会被拉平到同一级,所以别写嵌套列表,分段写清楚更好。步骤教程用有序列表,条目罗列用无序列表,这是本站文章的惯例。

表格

表格要写三部分:表头行、分隔行、内容行,缺了分隔行就出不来:

| 名称 | 价格 |
| --- | --- |
| 苹果 | 5 元 |
| 香蕉 | 3 元 |

效果:

名称价格
苹果5 元

竖线是英文半角的 |。分隔行里的横线写几个都行;分隔行里加冒号想控制左对齐右对齐——本站目前不吃这套,写了也按统一左对齐显示,不用费劲。手机上表格太宽时可以左右滑动看,不会撑破版面。

链接和图片

链接是方括号写文字、圆括号写地址:

[ ym-blog 搭建指南 ](https://bk.ymaym.top/post/ym-blog-guide)

(上面为防误触去掉了贴合写法,实际写时括号紧贴着文字和地址、中间不要空格。)效果:ym-blog 搭建指南,公开页上链接显示为主题色、点了能跳。地址要以 https:// 开头写全,只写域名不带协议可能点不动。

图片比链接多一个感叹号,方括号里是图片说明:

![这张图的说明](图片地址)

图片的排版规矩值得单独记,系统是按「一段里有几张图」自动排的:

  • 图片单独成段才触发排版:前后空一行,让这一段只有图片
  • 1 张:全宽大图,说明文字自动变成图下方的图注(居中、灰色小字)
  • 2 张:并排双列(手机窄屏时自动改成上下排列)
  • 3 张:左边一张大图、右边两张小图
  • 4 张以上:排成图集条,一行四张(手机上一行两张)
  • 读者点任意图片能放大看(灯箱),还能左右翻看本篇其他图
  • 超长截图有个特殊写法:说明文字最后加 |长图,比如 后台全貌,图在正文里会限高展示、点开才看全图,长截图不加这个会被缩得看不清
  • 图片混在文字段落中间(不单独成段)也能显示,但不带图注、也不组图

传图的三种方式再汇总一次:点「🖼 插入图片」按钮选文件(手机电脑都行,可多选);电脑上把文件拖进正文框;电脑上复制图片后在正文框粘贴。图片地址不用自己管,上传完系统自动把 说明 插到光标处,说明文字可以事后自己改。

大小限制(后台设置里的现行值):图片单张最大 20MB,视频文件最大 200MB,普通文件最大 50MB,超了传不上去,先压缩再传。

视频

两种放法:

  • 外链视频:把 Bilibili(哔哩哔哩)或 YouTube 的视频链接单独成行、单独成段粘进正文,发布后自动变成播放器;也可以点工具条的「📺 贴 B 站 / YouTube 外链」按钮插入
  • 本地视频:点「🎬 插入视频文件」上传(最大 200MB),或者手动写 video 单独成行

大视频(比如几百 MB 的录屏)别直传:传到 B 站或 YouTube 再贴外链,不占自己存储、播放还更流畅。

代码块

连着三个反引号成对包住:要放的内容前后,各单独起一行打三个反引号;首行反引号后面可以写语言名(只是标注,不写也行)。比如放一条命令,效果是这样:

echo "这就是一个代码块"

本文里到处都是的灰框就是它:灰色底、圆角、等宽字体,一行太长时可以横向滑动。适合放命令、配置、源码;普通文字别往里放,读者看着累。每个代码块的右上角都有一个「复制」按钮,读者点一下就能把整段内容复制走,不用手动划选。

正文里还想提一嘴代码片段的,用行内代码(单反引号)就够了,见前面「加粗、斜体」一节。

分割线、换行和段落

  • 分割线:单独一行写三个减号 ---,效果就是下面这条,适合章节之间隔开(不过有二级标题分章时一般用不上):

  • 分段:空一行就是新一段
  • 段内换行:一行写完直接回车,下一行会接在下面换行显示,不会黏成一句

颜色和深浅:哪些能改,哪些不能

先说结论:写文章时不用管颜色,也管不了单篇的颜色。正文字号统一 17px、行距统一,标题、正文、引用、代码块的深浅都是主题定死的,这样全站文章看起来才整齐。写作者只管内容和格式,排版的事交给主题。

能改的是全站级的,在后台「站点设置」里:

  • 主题色:有一个「主题色(Accent color,主题色)」设置,配了 6 套现成预设——活力橙、海洋蓝、葡萄紫、森系绿、湖水青、玫红,点一下色块、再点「保存设置」全站生效;也可以自己填任意颜色值。本站现在用的是活力橙。主题色影响的是链接颜色、按钮、引用块左边的竖线、文章顶部那条阅读进度线这些点缀,不会把正文染上色
  • 代码块配色:设置里另有一项代码块配色(Code theme),一般不用动

访客侧还有个深色模式:每篇文章页顶部有个主题切换按钮,访客可以在「跟随系统 / 浅色 / 深色」之间切。深色时底色变深灰、文字变浅灰、代码块更深一号,同一篇文章自动适配,写作者什么都不用做——但有个小提醒:自己插的图片如果是白底截图,深色模式下会显得刺眼,重要截图可以考虑用带边框感的图,不过这只是观感问题,不影响阅读。

封面对版面的影响也顺带说清:封面只出现在首页卡片、列表和分享预览里(文章页顶部不显示封面)。首页卡片上封面会被裁成一条横幅(高 170px),所以封面图尽量选横图、主体放中间;竖图上下会被裁掉一大截,关键内容别放在图的顶部和底部。

发布之后:改稿、下架、定时与链接

文章的四种状态,在文章列表里能筛选着看:

状态什么意思谁能看
草稿(Draft)只点了「保存」、没发布只有站长
已发布(Published)点了「立即发布」所有访客
定时(Scheduled)设了未来的发布时间到点前只有站长,到点自动上线
仅自己(Private)点了「设为仅自己」只有站长

定时发布容易漏一步:光在发布面板里选好时间不算数,必须再点一次「定时发布(Schedule)」按钮才生效;到点系统自动上线,不用守着。发布面板里还有两个小开关:置顶(文章钉在首页最前)和允许评论(关了这篇就不能评论);还能给单篇文章设密码,访客输对密码才能看,偶尔发点只给朋友看的东西时用得上。

发完想改:文章列表里点「编辑」,改完点「保存」——已发布的文章保持发布状态、即时更新,不会下架重发。改标题也一样安全:标题改了,文章链接不变。链接(网址)是由「短链 slug」决定的,它在新建时按标题自动生成一次、之后就固定了;上一篇教程发布后改过标题,链接照旧能打开,就是这个道理。真想连链接一起改,去编辑页改 slug 栏——改完旧链接会自动跳转到新链接,不会让已分享出去的地址失效;但没事别改,搜索引擎和外链都认旧地址。

写错了版本想回退:点「保存并存一版(Revision)」保存的版本、还有发布留下的版本,都在编辑页的「历史版本(Revisions)」里(最多存 20 版),点一下就能还原到某一版。

没写完想先给人看:编辑页有「生成草稿预览链接(Preview link)」,生成的链接 7 天内有效,发给朋友能直接看草稿长什么样(不会被搜索引擎收录),正式发布前找人帮忙校对很方便。

下架与删除:编辑页或列表里点删除,文章进回收站,前台立刻看不到;回收站里的文章 30 天内可以还原,手滑删错了别慌;超过 30 天会被彻底清除,回收站里也能手动「彻底删除」,那就真找不回来了。

几个自动生成的,不用管:文章页的「约多少字、读完约几分钟」(按每分钟约 400 字估算)、目录框、摘要(摘要栏留空时自动截正文开头 140 字)、封面(没设时自动用正文第一张图)。想控制它们也很简单:自己填摘要、自己选封面,就按你的来。

AI 写作(工具条上两个 ✨ 按钮):「AI 生成摘要」根据标题正文自动拟一段摘要,「AI 生成正文」能续写扩写。前提是先在后台「站点设置 → AI 写作」里填好 AI 接口的地址、Key 和模型名,没配的话点按钮会提示未配置。把它当打草稿的帮手就行,生成的内容务必自己过一遍再发。

常见问题对照表

遇到的情况多半是什么原因怎么办
标题符号不生效,井号原样显示井号后没空格;或用了 5 个以上井号## 后加空格再写字;正文标题只用二到四级
正文里写了 # 想当大标题没效果一级标题在正文里不生效大标题写在标题栏;正文从 ## 用起
加粗/斜体没出来星号没成对;或用了全角符号 *星号成对包住文字;输入法切英文半角
表格变成普通文字少了第二行分隔行表头下面补一行分隔行(每列一个 ---,列与列之间用竖线隔开)
图片传不上去单张超过 20MB(视频 200MB)先压缩;大视频改贴 B 站/YouTube 外链
图注没显示图片没单独成段,混在文字里图片前后各空一行,单独成段
设了时间却没定时发布只选了时间、没点「定时发布」按钮选好时间后点「定时发布(Schedule)」
手机上找不到预览窄屏默认只显示编辑区点工具条「切换 编辑/预览」
改了标题怕链接失效链接由 slug 决定、不跟标题走放心改,链接不变
写一半页面关了一般有自动保存兜底重开这篇文章,按上方提示「恢复这份」
定时文章到点没上线极少数网络或任务延迟后台列表确认状态,必要时改点「立即发布」

延伸阅读

  • 《ym-blog 搭建指南》:从零把这个博客建起来——建站看那篇,发文看这篇
  • ym-blog 官方仓库:本站的源码与部署文档都在这里
  • 博客里其他 ym 系列文章(IP 监测站、优选 IP 站、网盘解析站、导航站、电视盒接口、Cloudflare 面板)都是按这篇讲的流程发出来的,格式上有不懂的,打开任意一篇对着看就明白了

写文章这件事,符号就十来个,写两篇就熟了。剩下的无非是多写——内容才是别人来看的理由,排版只是让它更好读而已。