Matrix 首页推荐
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
编注：本文就使用 Asciidoc 制作网页给出其中一个方向，Asciidoc 可用于制作大多数的简单类别网页。
Markdown 是目前最广为人知的标记性语言，其简洁的语法深得大众的喜欢。Markdown 转化为 HTML 后浏览器默认的布局为全部左对齐和图片拉伸全屏幕宽度，这对于内容网站的内容部分是比较满足需求的，但对于制作网站整体来说是欠缺的。
比如，对于学术个人主页来说，一般来说会放上一张自己的照片以供认识，但无论是左对齐还是拉伸全屏幕都会显得不太合适。另一方面，Markdown 对于 HTML 元素的支持也是不足的，但是这个元素对于网站被搜索引擎索引成功起关键的作用，而学术个人主页对搜索引擎的索引有着强烈的需求。
另一方面，Asciidoc 也能恰好满足制作学术个人主页相关的一些强烈需求，让学者仅需要关注编写标记性语言文档，不必花费学习生成网站的额外配置。
左右分栏布局
放置个人照片最理想的情况应该还是传统的左右分栏布局，Asciidoc 原生支持分栏布局。在上述的例子中，只需要在图片的标记中加入 即可生成左右布局。
搜索引擎索引
给搜索引擎做适配，在网站开发的术语里叫「SEO 优化」，对于静态网站来说，最简单直接的方法应该就是给 HTML 网页里的 字段加上相应的属性。Asciidoc 里有相应的标记去渲染成 标签里的对应元素。
最后将部署好的网站链接提交给搜索引擎，过一段时间，你将能在搜索引擎里搜到自己的主页并且带有相应的字段内容了。
文件内容复用
复用文件内容最主要的一个应用是制作一个导航栏，一个丰富的个人学术主页不会只有一个页面，但提供一个导航栏能方便读者在不同内容之间跳转。理想情况下，我们希望只制作一个导航栏，然后嵌入到不同的页面中去，每次修改导航栏的内容，都能在不同页面中产生变化。在 Asciidoc 中可以使用 include 标记嵌入另一份 adoc 文档。
如果还是对样式还是有更多的追求的话，也可以选择直接嵌入 HTML 格式的导航栏。而举一反三，表格也可以用来制作简单的分栏布局，在没有高级 css 排版系统之前，旧时网页都是无边框表格来进行分栏布局的。
邮箱防爬虫
很多学者们的主页上邮箱地址都会写成这样的格式 ，这个的目的主要是为了防止邮箱地址被网络爬虫抓取然后接收太多的垃圾邮件。现代的防御方法有一个很简单有效的方式就是使用 HTML 注释和 CSS 语法来保护地址不容易被普通爬虫直接识别邮箱地址格式。
对于标记性语言来说，这需要同时支持 HTML 和 CSS 混合使用才能应用这一小技巧，从而方便读者联系。Asciidoc 正好满足这一需求。
渲染出来的效果如上面的示例图所示，对于人类阅读来说没有影响，但是对于爬虫来说增加了很多的困难。
网站访问追踪
很多学者都希望关注自己的研究被哪些地区的人们访问了，因此网站访问追踪是一个需求。追踪工具一般要求支持 Javascript 的注入。Asciidoc 支持 passthrough 的功能，可以轻而易举地使用 HTML 全部的标签。
举一反三，你也可以往里面填写 <video> 标签，这对于直观展示一些研究项目有极大的帮助。
由于 Asciidoc 也是标记性语言，很多轻量级的工具都能将其转换为 HTML 静态文档。这里简单列举几种常见的工具，大家可以根据自己的需求探索选择合适的。比如
- Vscode 插件：AsciiDoc：使用其内置的命令 即可生成 HTML 文件
- 命令行工具：Asciidoctor：通过各大包管理器搜索都可下载使用，通过命令转换 adoc 文件为 HTML 文件
- 在线工具 asciidocLive：网页工具，无需配置，开箱即用，下载转换后的 HTML 文件
- 在线工具 Asciidoctor.js Live Preview：Chrome 插件，可以打开本地文件，即时预览，保存网页即可
得到 HTML 文件后，将其上传到学校或学院指定的目录后即可得到一个自己的个人学术主页。
如果更倾向于外部的静态文档平台，可以探索一下 github action 的自动化部署。
相信看到这里的读者对于制作网站是有需求的或者有痛点的，文章开头的示例效果图就是用文中的这些简单元素组合而来的。Asciidoc 虽然是一个小众的标记性语言，但其强大的能力和易用的属性应该能吸引到你。
如果遇到一些问题，也不用太担心，欢迎在评论区一起交流解决。
关联阅读
- Asciidoc 官网
- Asciidoc 文档
- Asciidoc 语法参考
> 下载少数派 客户端、关注 少数派小红书，感受精彩数字生活