白小兔的小小站

既然选择了远方，便只顾风雨兼程

0%

Hexo：安装配置

发表于 更新于 分类于 Valine：
本文字数： 9.1k 阅读时长 ≈ 8 分钟

Hexo是一个开源的静态网站生成工具，我们通常用它来建立个人静态博客，这里主要记录简单的安装与配置过程，使用的主题是Next。

Hexo安装

  1. Hexo使用Nodejs,所以应该配置好Nodejs环境。

  2. 在任意目录执行以下指令全局安装hexo:

    1
    npm install -g hexo-cli

新建博客

1
2
3
hexo init hexo-blog
cd hexo-blog
npm install

启动博客

1
2
3
4
#生成网站
hexo generate
#启动服务器
hexo server

到这一步就可以本地访问一个hello-world版本的博客了，本地启动的目的是方便我们调整配置后预览效果。

基础配置

站点配置_config.yml：

1
2
3
4
5
6
7
8
9
title: 白小兔的小小站
subtitle: 既然选择了远方，便只顾风雨兼程
description: ''
keywords:
author: 白小兔
language: zh-CN
timezone: Asia/Shanghai
#网站域名
url: https://leuncle.com

菜单配置

主题配置_config.yml

1
2
3
4
5
6
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

注意这里的about、tags、categories还需要我们进一步处理下才可以正常展示，新建页面

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

则hexo会在source文件夹下创建about、tags、categories文件夹，每个文件夹下还会创建一个index.md文件表示关于页、标签页和分类页，我们分别打开这三个文件，为它们加上type属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: tags
date: 2022-01-23 23:49:56
type: "tags"
---

---
title: about
date: 2022-01-23 23:49:56
type: "about"
---

---
title: categories
date: 2022-01-23 23:49:56
type: "categories"
---

重新生成网站，就已经可以看到效果了，我通常直接执行以下代码来进行完整的重新生成

1
hexo clean && hexo g && hexo s

这里about页面留给我们自定义了，tags和categories页面会自动归类生成数据的，它们的数据来自我们的文章中设置的属性，如

1
2
3
4
5
6
7
8
9
10
11
---
title: Hexo：安装配置
date: 2019-02-21 21:30:00
updated: 2022-01-23 23:00:00
comments: false
toc: true
categories:
- Install
tags:
- Other
---

这个是写在每篇markdown文章的顶部，定义文章的一些属性，当然了，这里列出这个主要因为categories、tags的分类统计就来自于此。

Next主题

在hexo-blog目录下执行以下代码拉取next主题的仓库

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

github拉取代码可能比较慢，可以直接下载压缩包，再本地解压。

修改hexo-blog目录下的的_config.yml文件，将主题指定为next

1
theme: next

修改themes/next/_config.yml文件，将scheme调整为自己喜欢的排版风格

1
scheme: Pisces

此时再次生成博客，启动博客看看效果吧~

本地搜索

  1. 安装本地搜索插件

    1
    npm install hexo-generator-search --save

    安装之后，会在站点目录的public下创建一个search.xml文件

  2. 在站点配置_config.yml中添加以下内容

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

    path：索引文件的路径，相对于站点根目录

    field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面

    limit：限制搜索的条目数

  3. 在主题配置_config.yml中找到以下内容

    1
    2
    3
    4
    local_search:
      enable: true
      trigger: auto
      top_n_per_article: 1

    确保enable设成true

    top_n_per_article字段表示在每篇文章中显示的搜索结果数量，设成 -1 会显示每篇文章的所有搜索结果数量。

    重新部署博客，看看左侧菜单，搜索功能是不是已经有了？赶快试试吧~

永久链接

  1. 安装hexo-abbrlink

    hexo默认提供的方案是使用年/月/日/标题,每次更改文章题目或者变更文章发布时间，在默认设置下，文章链接都会改变，不利于搜索引擎收录，也不利于分享，唯一永久链接才是更好的选择。

    这里使用hexo-abbrlink插件来完成这项工作，它的原理是对标题+时间进行md5然后再转base64，保存在front-matter中。

    首先是注册before_post_render钩子，然后取出来abbrlink这个属性看是否存在，存在的就不管了，否则就生成连接。
    其中使用了nodejs自带的crypto模块来获取md5校验值，用hexo-front-matter来转换front-matter，然后用hexo-fs来保存文件。

    1
    npm install hexo-abbrlink --save

  2. 修改站点配置_config.yml的permalink

    1
    2
    3
    4
    5
    permalink: posts/:abbrlink.html
    # abbrlink config
    abbrlink:
      alg: crc32  # 算法：crc16(default) and crc32 
      rep: dec    # 进制：dec(default) and hex

    不同算法和进制生成不同的格式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    crc16 & hex
        https://post.zz173.com/posts/66c8.html
    crc16 & dec
        https://post.zz173.com/posts/65535.html
    crc32 & hex
        https://post.zz173.com/posts/8ddf18fb.html
    crc32 & dec
        https://post.zz173.com/posts/1690090958.html

如果配置了这个插件后，生成的文章链接都变成undefined，可先执行hexo clean清除掉以前生成的文章缓存，然后hexo g`重新渲染应该就OK了。

标签图标

修改主题配置themes/next/_config.yml

1
tag_icon: fa-tag

丝带背景

为next主题安装canvas-ribbon依赖库

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

修改主题配置themes/next/_config.yml

1
2
canvas_ribbon:
  enable: true

作者图像

修改主题配置/themes/next/_config.yml

1
avatar: /images/author.jpg

捐赠入口

修改主题配置_config.yml，二维码图片自备放入主题source的images文件夹

1
2
3
4
5
6
7
8
reward_settings:
  enable: true
  animation: false
  comment: 这篇文章对我有用，感谢博主

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.jpg

版权文案

修改themes/next/_config.yml文件

1
2
3
4
5
6
7
8
footer:
  since: 2015
  icon:
    name: fa fa-heart
    animated: false
    color: "#ff0000"
  copyright: "leuncle.com. All rights reserved."
  powered: false

静态资源

  1. hexo-blog目录下安装插件hexo-neat

    1
    npm install hexo-neat --save

  2. 站点配置_config.yml添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # hexo-neat
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
      enable: true
      exclude:
    # 压缩css  
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
    # 压缩js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/index.js'

站点地图

为了方便搜索引擎收录，提高SEO，sitemap肯定需要的。

安装插件hexo-generator-sitemap,hexo-generator-baidu-sitemap。

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

修改站点配置_config.yml, 添加如下内容：

1
2
3
4
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

sitemap文件需要手动提交给搜索引擎，比较麻烦，我这个站点搜索引擎是否收录对我都一样，这里仅做下实践验证。

添加robots.txt

这也是提高SEO的，设置搜索引擎可以抓取哪些，不需要抓取哪些内容。

在themes/next/source目录下添加robots.txt：

1
2
3
4
5
6
7
8
9
10
User-Agent: *

Disallow: /*

Allow: /$
Allow: /page/
Allow: /posts/

Sitemap: http://your-website-domain/sitemap.xml
Sitemap: http://your-website-domain/baidusitemap.xml

如果使用https，将http换成https；将your-website-domain换成自己的域名。

nofollow插件

减少出站链接能够有效防止权重分散，hexo有很方便的自动为出站链接添加nofollow的插件。

1
npm install hexo-autonofollow --save

在站点配置文件_config.xml中添加如下配置：

1
2
3
4
nofollow:
  enable: true
  field: site
  exclude:

  • enable - 是否启用插件，默认值为 true

  • field - 插件的处理范围，默认值为 site，可选 post 或 site

    • site - 处理全站所有页面
    • post - 仅处理文章内容

  • exclude - 域名白名单，不同的子域名视为不同的域名（如 www）

    • exclude1.com不包括 www.exclude1.com 或 en.exclude1.com

相关文章

站点下安装hexo-related-popular-posts插件：

1
npm install hexo-related-popular-posts --save

主题配置_config.yml搜索related_posts修改：

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 文章推荐      # 属性的命名
  display_in_home: false # false代表首页不显示
params:
  maxCount: 5          # 最多5条
  #PPMixingRate: 0.0   # 相关度
  #isDate: true        # 是否显示日期
  #isImage: false      # 是否显示配图
  #isExcerpt: false     # 是否显示摘要

RSS

支持RSS订阅，先安装插件hexo-generator-feed。

1
npm install hexo-generator-feed --save

站点配置文件_config.yml添加以下内容：

1
2
3
4
5
6
7
8
# Extensions
plugins:
  hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

上面这一步就已经完成RSS的功能了，但是我们希望在页面上展示一个图标提醒别人，可以在主题配置文件_config.yml中将follow_me下的RSS注释去掉：

1
RSS: /atom.xml || fa fa-rss

这样出来的效果是在每篇文章下面会有个RSS，感觉这样不太好，所以将它修改到边栏中去

  1. 删除文章底部的RSS(整个follow me设置都删除)

    1
    2
    3
    4
    5
    6
    # theme/next/layout/_macro/post.swig

    # 删除以下代码
    {%- if theme.follow_me %}
      {{ partial('_partials/post/post-followme.swig', {}, {cache: theme.cache.enable}) }}
    {%- endif %}

  2. 修改RSS样式

    1
    2
    3
    4
    5
    6
    # theme/next/layout/_partials/post/post-followme.swig

    <div class="followme"> # 修改为 <div class="">
      <span>{{ __('follow_me.welcome') }}</span> # 删除这一行
    <div class="social-list"> # #修改为 <div class="">
    # 省略部分源码

  3. 添加RSS到侧边栏(其实就是整个的follow me)

    1
    2
    3
    4
    # theme/next/layout/_partials/sidebar/site-overview.swig
    {%- if theme.follow_me %}
      {{ partial('_partials/post/post-followme.swig', {}, {cache: theme.cache.enable}) }}
    {%- endif %}

代码块复制

目前 Next 主题已经支持代码块复制功能，在配置文件_config.yml 中设置 copy_button即可。

1
2
3
4
5
6
copy_button:
  enable: true
  # Show text copy result.
  show_result: true
  # Available values: default | flat | mac
  style:

字数统计&阅读时长

在hexo-blog目录下安装插件

1
2
npm install hexo-wordcount --save
npm install hexo-symbols-count-time --save

修改主题配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
post_wordcount:
  item_text: true
  wordcount: true # 单篇 字数统计
  min2read: true # 单篇 阅读时长
  totalcount: false # 网站 字数统计
  separated_meta: true

symbols_count_time:
  separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
  item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: false   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 4                   # Average Word Length
  wpm: 275                 # Words Per Minute（每分钟阅读词数）
  suffix: mins.

评论

Valine是一个基于LeanCloud的无后端评论系统，最新版的next似乎已经进行了集成，所以我们只需要找到主题配置中的以下内容进行修改即可，注意需要先去LeadCloud新建应用，获取appid和appKey填写在配置中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
  enable: true
  appid:  # Your leancloud application appid
  appkey:  # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 说点什么吧~ # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

进行以上配置后，我们就已经为自己的博客接入了评论系统，但是仔细观察会发现右下角有个Powered by Valine的块，影响美观，经观察是一个class包含vpower的div元素。我们可以找到themes\next\source\css\_common\scaffolding\comments.styl文件在comments下加入对vpower的隐藏代码

1
2
3
4
5
6
7
8
.comments {
  margin-top: 60px;
  overflow: hidden;

  .vpower {
     display: none;
  }
}

其他

下面的内容为我使用早期版本的hexo与next主题使用的改动，本次重新建立博客站点未用到，为了防止以后用到，以下内容仅作备份参考。

  1. 修改next主题中Pisces风格的页面宽度

    如果我们选择了next主题，并且使用Pisces风格，在高分辨率屏幕上就会发现我们的页面宽度显得有些窄。

    编辑themes\next\source\css\_schemes\Pisces\_layout.styl，在底部添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    header{ width: 90% !important; }
    header.post-header {
      width: auto !important;
    }
    .container .main-inner { width: 90%; }
    .content-wrap { width: calc(100% - 260px); }

    .header {
      +tablet() {
        width: auto !important;
      }
      +mobile() {
        width: auto !important;
      }
    }

    .container .main-inner {
      +tablet() {
        width: auto !important;
      }
      +mobile() {
        width: auto !important;
      }
    }

    .content-wrap {
      +tablet() {
        width: 100% !important;
      }
      +mobile() {
        width: 100% !important;
      }
    }

  2. 设置背景图片

    如果希望给博客设置一个背景图片，可在 themes/next/source/css/_custom/custom.styl文件中添加以下css：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @media screen and (min-width:1200px) {
        body {
        background-image:url(/images/background.jpg);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 50%; 
        background-size:cover;
        }
        #footer a {
            color:#eee;
        }
    }

    当然，你得把背景图片放在 themes/next/source/images中。

文章推荐