Windows 系统使用 Hexo 搭建博客（四）：博客写作

发表于 | 分类于 | 阅读次数：

这是 Windows 系统使用 Hexo 搭建博客系列文章：

  1. 配置本地环境；
  2. 连接网络；
  3. 博客配置和主题配置；
  4. 博客写作；

这是第四篇：博客写作。

1. 写文章和发布

进入到 Hexo 所在的文件夹，然后输入：hexo new "BlogTitle"，就会在 /source/_post 里面生成一个 BlogTitle.md 的文件。这个就是新博文的内容。对这个文件用喜欢的 Markdown 编辑器编辑即可。

2. Font-matter（博文声明区）

每篇博文都会有一个声明区（前置区），一般标题和时间是通过 hexo new 自动生成的，我们需要在声明区中声明文章的更新时间、标签、类别等信息，如下：

1
2
3
4
5
6
7
8
9
---
title: XXXXXX
date: 2019-03-28 16:46:36
update: 2019-03-29 16:46:36
tags:
    - tag1
    - tag2
categories: cat_A
---

注意：Hexo 中的 categories 是每篇文章只能设置一个的，而 tags 可以设置多个。

3. 文中插入图片

3.1 本地上传的方法

  1. 下载本地上传图片的插件：npm install hexo-asset-image --save；
  2. 把主配置文件中的 post_asset_folder 设为 true；
  3. 总是通过 hexo new "Blog Title" 来生成博客，此时 _post 文件夹中会生成一个和博文题目相同名称的文件夹；
  4. 把图片放入该文件夹中，然后写作时通过引用文件夹中的图片：![pic_name](blog_title/pic_name.jpg) 这种相对路径来引用。

3.2 网络图床的方法

上述方法存在一个问题，就是换电脑的话或者数据丢失的话，图片数据就会消失。因此另一种方法是使用网络图床。
其中可以使用图床上传工具 PicGo 进行图片上传，该工具默认把图片传到 SM 图床，上传完毕后会回传图片的 url，在 markdown 写作时直接引用 url 即可。
更好的方法是用 Github 作为图床，因为 Github 是默许用户进行这样的使用的，其它如使用微博、简书等作为图床就有风险。用 Github 作图床需要新建一个 Github 仓库，专门用于存放图片。新建仓库后，在仓库中新建应用授权 key，然后把 key 值写入 PicGo 中即可用 PicGo 上传图片到 Github 中，具体操作参考如下两篇：

4. 特殊设置

  • 阅读全文设置：在文章中用 <!-- more --> 进行手动截断。

  • 引用文本时居中显示

    1
    {% centerquote %} blah blah blah {% endcenterquote %}

  • 突破容器限制显示图片

    1
    {% fullimage /image-url, alt, title %}

  • 插入指定大小的图片

    1
    {% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

  • 更漂亮的引用方法

    1
    2
    3
    {% blockquote Author, Source %}
    Content.
    {% endblockquote %}

  • 更好的代码块加入方法

    1
    2
    3
    {% codeblock lang:python %}
    print "Hello World!"
    {% endcodeblock %}

  • 插入 Gist

    1
    {% gist gist_id [filename] %}

5. 设置字体大小和颜色

如果想自定义字体大小以及颜色，可以直接在 Markdown 文档中使用 html 语法：

1
2
3
4
5
<font size=4 > 这里输入文字，自定义字体大小 </font>
<font color="#FF0000"> 这里输入文字，自定义字体颜色</font> 
<span style="background-color: #ff6600;">这里输入文字，自定义字体背景色</span>
<font color="#000000" size=4><span style="background-color: #ADFF2F;">这是综合起来的效果 </span></font>
<font color="#FFFFFF" size=4><span style="background-color: #68228B;">这是综合起来的效果2 </span></font>

其中#FF0000为RGB颜色代码，读者可去RGB颜色查询对照表网站查找自己喜欢的颜色。
若想在RGB颜色值与十六进制颜色码之间相互转化，可查看该网站。

6. 首行缩进

在需要缩进行的开头处，先输入下面的代码，然后紧跟着输入文本即可。分号也不要漏掉。

1
2
3
半方大的空白`&ensp;`或`&#8194`;
全方大的空白`&emsp;`或`&#8195`;
不断行的空白格`&nbsp;`或`&#160`;

7. 设置博文中的链接为蓝色

由于 NexT 渲染出来的博文的网络链接都是白色的，可以改为蓝色。可以去 \themes\next\source\css\_common\components\post\post.styl，添加字段：

1
2
3
4
5
6
7
8
.post-body p a{
    color: #0593d3;
    border-bottom: none;
    &:hover {
      color: #0477ab;
      text-decoration: underline;
    }
  }