按照博客 使用Gitee+Hexo搭建个人博客 的教程，我们已经成功在Gitee上搭建完成了自己的博客，但是这个博客还是比较简陋的。
接下来讲介绍 如何开始写作 和 Even主题的常用配置 。

如何开始写作

博客搭建完成，虽然功能很简单，但是已经可以开始写作。

  • 新建文章
    使用命令来新建一篇文章：

    1
    $ hexo new [layout] <title>

    layout 是文章的布局，默认为post，可以先不写。
    title 是文章的标题，也是文件的名字，存储在source/_posts下。
    示例：

    1
    $ hexo new demo

    则在source/_post目录下自动生成了demo.md文件

    使用MarkDown编辑器打开文件就可以开始写作了。

  • Front-matter 设置
    Front-matter 是文章最上方以 — 分隔的区域，用于指定文章的变量设置，举例来说：

    1
    2
    3
    4
    title: demo
    date: 2018-08-23 15:13:30
    tags:
    ---

    以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

  • 文章分类和标签
    只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。在demo.md增加如下设置，示例：

    1
    2
    3
    4
    categories:
    - Demo
    tags:
    - 示例

    则会在博客的标签和分类下分别增加我们的配置效果：
    标签配置效果：
    标签

    分类配置效果：
    分类
    说明：文章分类和标签的设置，会自动归档的菜单的分类和标签中。

  • 文章截断
    在文章内容中添加 <!-- more --> 即可在首页显示时只显示其之上的内容。
    并且会在 <!-- more --> 添加一个 Read more 的链接。
    如图：
    阅读更多

  • 自定义文章简述
    可在文章头信息中添加 description 字段，并填写自定义的文章简述。
    就可以在首页显示文章简述而不显示文章内容, 并自动添加阅读更多的跳转链接。

Even主题常用配置

我们博客搭建完成后Hexo的目录结构如下：

1
2
3
4
5
6
7
8
9
10
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
├── themes
|   ├── even
|   └── landscape

我们Even主题的配置则主要在even目录下进行，配置文件_config.yml，目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── css
|   └── js
├── languages
|   ├── default.yml
|   └── zh-cn.yml
|──  layout

  • 修改主题颜色
    主题自带了 5 种可选的颜色：

    修改主题配置文件中 theme 字段的 color 属性可改变主题色：

    1
    2
    3
    4
    5
    6
    7
    # ===========================================
    # Theme Settings
    # ===========================================
    # theme styling
    # color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
    theme:
      color: Default

    除了能够修改为主题自带的 5 种颜色之外，还可以使用自定义的其他颜色。
    在 source/css/_custom/_custom.scss 中添加样式变量 $theme-color 修改主题色。

    1
    $theme-color: #xxxxxx;

    同时需要修改 $deputy-color 主题副颜色，该值主要使用在代码块背景以及文章目录。

    1
    $deputy-color: #xxxxxx;

    _variables.scss 中的样式变量都可以在 _custom.scss 中进行覆盖，从而自定义主题样式。

  • 添加分类页
    使用命令新建一个 categories 页面：

    1
    hexo new page categories

    在source目录下自动生成categories目录：

    编辑生成的 categories/index.md 文件，设置布局为 categories:

    1
    2
    title: categories
    layout: categories

    默认开启评论（如果使用了多说或 Disqus），添加 comments 字段并设置为 false 可关闭。

    在主题配置文件(_config.yml)中添加链接:

    1
    2
    3
    4
    5
    6
    7
    # ===========================================
    # Menu Settings
    # ===========================================
    menu:
      Home: /
      Archives: /archives/
      Categories: /categories/

  • 添加标签页
    使用命令新建一个 tags 页面：

    1
    hexo new page tags

    则会自动生成如下目录：

    编辑生成的 tags/index.md 文件，设置布局为 tags:

    1
    2
    title: tags
    layout: tags

    默认开启评论，添加 comments 字段并设置为 false 可关闭。

    在主题配置文件(_config.yml)中添加链接:

    1
    2
    3
    4
    5
    6
    7
    # ===========================================
    # Menu Settings
    # ===========================================
    menu:
      Home: /
      Archives: /archives/
      Tags: /tags

  • 添加自定义页面
    使用命令新建一个自定义页面（以添加关于页为例）：

    1
    hexo new page about

    则会自动生成如下目录：

    编辑生成的 about/index.md 文件，设置布局为 page:

    1
    2
    title: about
    layout: page

    关于页面的内容，个人相关介绍也是在此页面进行编辑。
    默认开启评论（如果使用了多说或 Disqus），添加 comments 字段并设置为 false 可关闭。

    在主题配置文件(_config.yml)中添加链接:

    1
    2
    3
    4
    5
    6
    7
    # ===========================================
    # Menu Settings
    # ===========================================
    menu:
      Home: /
      Archives: /archives/
      About: /about

    在使用的语言文件下添加对应的字段（默认为 languages/default.yml）:

    1
    2
    3
    4
    5
    6
    menu:
      home: Home
      archives: Archives
      tags: Tags
      categories: Categories
      about: About

    发布博客后，在首页的菜单中就可以看到我们设置的标签 分类 关于菜单啦！！！

  • 添加文章访问量统计
    文章访问量 阅读次数 统计通过 LeadCloud 支持

    配置LeanCloud
    打开LeanCloud官网，进入注册页面注册。完成邮箱激活后，点击头像，进入控制台页面

    创建新应用
    创建一个新应用，并创建名称为 Counter 的 Class（注意权限选择无限制）

    配置 app_id 与 app_key
    在你所创建的应用的 设置->应用Key 中查看 app_id 与 app_key

    修改主题配置文件 _config.yml，填入 app_id 与 app_key:

    1
    2
    3
    4
    # LeanCloud
    leancloud:
      app_id:
      app_key:

    设置 Web 安全域名
    在你所创建的应用的 设置->安全中心 中设置 Web 安全域名 添加你的域名到 Web 安全域名中（若本地服务也想看到访问量，添加 http://localhost:4000/）

  • 添加博客流量分析
    博客流量统计、访客地域分布、来源等数据统计通过 百度网站统计 支持

    新增网站
    打开百度网站统计页面，注册相关账号信息，进入到管理页面，点击新增网站，填入相关信息：
    新增网站
    代码获取
    在代码获取页面获取到新版统计代码示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?6f2041754dc216e6973762726c19d178";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
        })();
    </script>

    其中的6f2041754dc216e6973762726c19d178类似我们百度统计分析的APPID。
    配置百度统计APPID
    修改主题配置文件 _config.yml，填入 APPID:

    1
    2
    # Baidu Analytics
    baidu_analytics: 6f2041754dc216e6973762726c19d178

    配置完成后执行hexo -g hexo -d编译发布我们的博客。
    可以在百度统计分析的代码安装检查页面，点击检查，判断我们的百度分析是否添加成功。
    添加成功后，差不多20分钟后就可以看到百度统计后台的数据了。
    百度统计

  • 设置文章打赏
    通过主题配置文件中的 reward 字段开启/关闭：

    1
    2
    3
    4
    5
    reward:
      enable: true
      qrCode:
        wechat: /image/reward/wechat.png
        alipay: /image/reward/alipay.png

    支持微信以及支付宝，修改 qrCode 下对应的二维码图片链接，也可以直接设置成图片的网络链接。

    当开启打赏功能时，可通过文章 Markdown 头部:

    1
    reward: false

    关闭该篇文章的打赏。反之，当打赏功能关闭时，可以在文章中单独开启。

  • 设置底部社交链接
    目前支持：Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎

    修改主题配置文件中的 social 字段下的各个字段开启，为空时即为关闭：

    1
    2
    3
    4
    5
    6
    7
    8
    social:
      email: your@email.com
      stack-overflow:
      twitter:
      facebook:
      github:
      weibo:
      zhihu:

    主题使用的是自定义的 iconfont 图标库。

  • 设置文章版权
    修改主题配置文件中的 copyright 字段开启/关闭：

    1
    2
    3
    4
    copyright:
      enable: true
      # https://creativecommons.org/
      license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'

    默认显示作者，来源，链接以及版权说明，版权说明可通过 copyright.lincese 自定义。

    copyright.license 的值可以是 HTML

    当文章版权信息开启时，可通过文章 Markdown 头部：

    1
    copyright: false

    进行单篇文章版权信息的关闭。

至此博客基本配置好了，大家可以愉快的写博客啦！！！
配置完成的博客效果可以参考：https://xiuxiuing.gitee.io/blog/

欢迎扫码关注公众号，更好的交流

欢迎扫码关注公众号，更好的交流