Next是现在大家用的比较多的Hexo主题，你也可以在Hexo 官网去寻找自己喜欢的主题。我个人因为喜欢比较简洁的风格，所以选择了Chic这个主题。

基本上主题的安装方式都一样，下载或者拷贝整个主题文件夹到<your-hexo-folder>/themes文件夹下，然后修改_config.yml文件中的theme字段为你下载的主题文件夹名。以下就以安装并定制Chic主题为例。

下载并安装 Chic

1
2
$ cd your-hexo-blog-folder
$ git clone https://github.com/Siricee/hexo-theme-Chic.git themes/me

然后修改_config.yml文件中的theme字段为me。完了记得

1
2
$ rm -rf themes/me /.git
$ git rm --cached .

把Chic下的git记录删除，要不然每次提交用git submodule比较麻烦，个人项目没必要。

添加动态背景

个人比较喜欢canvas-nest这个动效，添加方式如下：

  1. 从上述链接处下载canvas-nest.min.js（如果不想在手机上显示，可以使用canvas-nest-nomobile.min.js文件）文件放在themes/me/source/js/下
  2. 在_config.yml里添加canvas_nest的配置项
    1
    2
    3
    4
    5
    6
    7
    8
    canvas_nest:
      enable: true
      onmobile: false # Display on mobile or not
      src: js/canvas-nest.min.js
      color: "0,0,0" # RGB values, use `,` to separate
      opacity: 0.5 # The opacity of line: 0~1
      zIndex: -1 # z-index property of the background
      count: 80 # The number of lines
  3. 在thems/me/layout/layout.egj添加canvas-nest的调用代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="<%= config.language %>">
    <head>
        <%- partial('_partial/head',{cache: true}) %>
    </head>
    <body>
        <div class="wrapper">
            <%- partial('_partial/header',{cache: true}) %>
            <div class="main">
                <%- body %>
            </div>
            <%- partial('_partial/footer',{cache: true}) %>
        </div>
        
        <%#  注意接下来这一段------canvas_nest %>
        <% if(theme.canvas_nest.enable===true){ %>
        <script src="<%- url_for(theme.canvas_nest.src) %>" color="<%- theme.canvas_nest.color %>" opacity="<%- theme.canvas_nest.opacity %>" zIndex="<%- theme.canvas_nest.zIndex %>" count="<%- theme.canvas_nest.count %>" ></script>
        <% } %>

    </body>
    </html>