跳过正文
  1. Notes/

博客主题的进阶玩法——以 Blowfish 为例

· loading · loading · ·
Blog How
目录
博客主题的进阶玩法——以 Blowfish 为例

前言
#

建立博客快大半年了,有许多进阶的用法,也有一些经验,在这里做一些记录和补充。

想知道如何建立博客的同学可以看这篇文章:

如何用 Hugo 与 Github Pages 建立博客并设置主题
loading · loading
Blog How

1. 如何写公式
#

在 Blowfish 的官网上存在公式编辑的教学,但有一些小的问题。Blowfish 用的是 Katex 而不是 Latex,Latex 公式是不能直接被无缝识别的,需要进行一些微调。

首先,想要正确识别公式,需要先输入一条简码:{{ <katex> }},如果输入后不显示在博客页面,则说明成功识别了。

公式分为两种:一种是行内公式,一种是行间公式。

行内公式需要用特殊的分隔符包括:\\(\\),一定是左面三个字符,右面三个字符,才能正确识别,例如:\(\alpha+\beta=\gamma\)

行间公式则要用 Latex 语法的分隔符包裹:$$,例如: $$ \alpha+\beta=\gamma $$ 值得注意的是,有时代表下标的代码_会产生歧义,因此会产生类似不识别的乱码,这时可以在_的后面适当添加空格,或是根据乱码的显示情况加入空格分隔,就能够正确显示了。

2. 如何联动其他文章
#

在文章中加入如下简码:{{ < article link="/docs/blog_build/" >}} 就会产生文章前言中的效果,这里引号中的路径就是我们 content 文件夹中的路径(注意:左侧的{{ <是简码的特殊包含符,应该是没有空格的,这里不输入空格会报错没办法展示,在实际输入时不应该输入空格,应该只有 3 个字符)

3. 如何令文字具有超链接效果
#

这点比较简单,首先保证链接是互联网中能够访问的网址,之后选择任意文字,将其用中括号包括,在后面接一个括号,括号中放入链接,即可使得该段文字能够跳转至该链接。例如:[示例文字](www.example.com),就会产生 示例文字 这样的效果(括号中什么也不写也可以,这样跳转的结果就是本页面)。

4. 如何插入图片
#

这个看起来比较简单,但实际上用 Markdown 自带的方式插入图片比较麻烦,因为不容易调整大小,而且图片的路径也需要修改。

这里我们采用 HTML 渲染方式来表示图片,输入如下代码

<div class="flex flex-col items-center justify-center">
  <img src="./picture.png" width="600">
</div>

第一行不需要改动,第二行 src 项就是图片路径,放在同文件夹下即可,width 项为图片的宽度,根据网页尺寸调整即可。

5. 如何添加文章封面
#

文章封面添加十分简单,首先需要清楚文章都是保存在 content 文件夹中,content 文件夹中又可分为几个大类,在每个子类中可建立文件夹,文件夹名称即为该文档的链接子地址。

文件夹中存在一个 index.md 文件,这就是博客内容的文件;这时可以在文件夹中放入一个 feature 开头的图片,这个图片就是作为封面的图片。