本篇文章介绍 Hexo 博客的一些主题更换、基本配置以及一些好用的插件安装

主题更换

下载

1
2
3
4
5
6
7
8
# 进入博客根目录
$ cd myBlog

# 创建新主题文件夹
$ mkdir themes/next

# 下载
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

安装

  • 修改主配置文件_config.yml 中的 theme，设置为 next；
  • 执行 hexo clean && hexo g && hexo s 查看效果；

配置

官方文档：https://github.com/iissnan/hexo-theme-next

网站 ico 设置

  • 下载 icon 资源：https://www.flaticon.com
  • 将下载到的 png 转化为 16 x 16、32 x 32、180 x 180 三个版本
  • 将转化后的 png 以及下载的 svg 文件放到 myBlog/source/ 目录下
  • 修改 next/_config.yml 中 favicon 项的图片路劲配置
    • 删除 /images 前缀
    • 更新图片名称
  • 执行 hexo clean && hexo g && hexo s 查看效果 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# To get or check favicons visit: https://realfavicongenerator.net
# Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory.

# Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory.
# And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes.

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /favicon-16x16-code.png
  medium: /favicon-32x32-code.png
  apple_touch_icon: /favicon-180x180-code.png
  safari_pinned_tab: /logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

菜单设置

创建 Tags 页面

  • 新建名为 tags 的页面

    1
    hexo new page "tags"

  • 设置页面类型为 tags

    1
    2
    3
    title: All tags
    date: 2014-12-22 12:39:04
    type: "tags"

  • 添加 tags 到主题配置_config.yml

    1
    2
    3
    4
    menu:
      home: /
      archives: /archives
      tags: /tags

创建 Categories 页面

  • 新建名为 categories 的页面

    1
    hexo new page "categories"

  • 设置页面类型为 categories

    1
    2
    3
    title: All categories
    date: 2014-12-22 12:39:04
    type: "categories"

  • 添加 categories 到主题配置_config.yml

    1
    2
    3
    4
    menu:
      home: /
      archives: /archives
      categories: /categories

配置菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
#  sitemap: /sitemap.xml || sitemap
#  commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
  enable: true

侧边栏设置

设置社交链接

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
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/wangweiX || github
  StackOverflow: https://stackoverflow.com/users/8892704/wangwei || stack-overflow
  Weibo: http://weibo.com/wangweijava || weibo
  Twitter: https://twitter.com/wangwei_hz || twitter
  Douban: https://www.douban.com/people/wwxzwj || film
  Linkedin: http://www.linkedin.com/in/wangweix/ || linkedin
  Podcast: http://www.ximalaya.com/53432374/profile || podcast
  E-Mail: mailto:[email protected] || envelope
  # 知乎: https://www.zhihu.com/people/Ww-1991
  # 简书: http://www.jianshu.com/users/a04d5c200045/timeline
  # Google: https://plus.google.com/yourname || google
  # VK Group: https://vk.com/yourname || vk
  # Instagram: https://instagram.com/yourname || instagram
  # Skype: skype:yourname?call|chat || skype
  # YouTube: https://youtube.com/yourname || youtube
  # FB Page: https://www.facebook.com/wangwei1991 || facebook

social_icons:
  enable: true
  icons_only: false
  transition: false

设置友情链接

1
2
3
4
5
6
7
8
9
# Blog rolls
links_icon: link
links_title: Links
#links_layout: block
#links_layout: inline
links:
  howtodoinjava: https://howtodoinjava.com/
  美团点评: https://tech.meituan.com/
  阮一峰: http://www.ruanyifeng.com/blog/

设置侧边栏头像

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: https://img.i7years.com/my7year-8.jpg

设置微信订阅 & 打赏

1
2
3
4
5
6
7
8
9
10
11
# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: https://img.i7years.com/my7year-8.jpg
  description: 互相学习

# Reward
reward_comment: 请我喝杯咖啡吧~
wechatpay: https://img.i7years.com/pay2Wechat.png
alipay: https://img.i7years.com/pay2Alipay.png
bitcoin: https://img.i7years.com/wallet/rec_bitcoin.png

第三方插件配置

站内搜索

1
$ npm install hexo-generator-search --save
1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

站点 PV/UV 统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 本站访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 本文总阅读量
  page_pv_footer: 次

分享插件

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
# Share
#duoshuo_share: true

# NeedMoreShare2
# This plugin is a pure javascript sharing lib which is useful in China.
# See: https://github.com/revir/need-more-share2
# Also see: https://github.com/DzmVasileusky/needShareButton
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
#           Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
#           Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
#           Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: bottomCenter
      networks: Mailto,Wechat,Weibo,QQZone,Twitter,Facebook,Linkedin,Evernote,Douban,GooglePlus,Reddit
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleRight
      networks: Mailto,Wechat,Weibo,QQZone,Twitter,Facebook,Linkedin,Evernote,Douban,GooglePlus,Reddit

评论插件

disqus

  1. 注册账号：https://disqus.com/

  2. 添加站点 ——> 获取 shortname，请参考：http://www.jianshu.com/p/c4f65ebe23ad

  3. 修改主题配置文件_config.yml

    1
    2
    3
    4
    5
    # Disqus
    disqus:
      enable: true
      shortname: xxxxxx
      count: true

  4. 注意：disqus 需要翻墙才能使用，解决方案：https://github.com/ciqulover/disqus-proxy

gitment

  1. 安装插件 gitment

    1
    $ npm install --save gitment

  2. 注册 OAuth Application

    点击此处 来注册一个新的 OAuth Application。其他内容可以随意填写，但要确保填入正确的 callback URL（一般是评论页面对应的域名，如 https://imsun.net）。

    你会得到一个 client ID 和一个 client secret，这个将被用于之后的用户登录。

  3. 修改主题配置文件_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # Gitment
    # Introduction: https://imsun.net/posts/gitment-introduction/
    # You can get your Github ID from https://api.github.com/users/<Github username>
    gitment:
      enable: true
      mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
      count: true # Show comments count in post meta area
      lazy: false # Comments lazy loading with a button
      cleanly: false # Hide 'Powered by ...' on footer, and more
      language: # Force language, or auto switch by theme
      github_user: xxx
      github_repo: xxx
      client_id: xx
      client_secret: xxx
      proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
      redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

  4. 初始化评论

    页面发布后，你需要访问页面并使用你的 GitHub 账号登录（请确保你的账号是第三步所填 repo 的 owner），点击初始化按钮。

    之后其他用户即可在该页面发表评论。

    ​

统计分析

Google 统计

  1. 注册账号：https://analytics.google.com

  2. 新增账号信息及网站信息，获取 Google Analytics ID，形如：UA-xxxxxxxxx-1

  3. 修改主题配置文件，设置 Google Analytics ID

    1
    2
    # Google Analytics
    google_analytics: UA-xxxxxxxxx-1
tencent 统计

  1. 注册账号：http://mta.qq.com/

  2. 创建 H5 应用，获得 AppId

  3. 修改主题配置文件，设置 Tencent MTA ID

    1
    2
    # Tencent MTA ID
    tencent_mta:
cnzz 统计

  1. 注册账号：http://www.umeng.com/

  2. 添加站点：http://web.umeng.com/main.php?c=site&a=show

  3. 获取统计代码中的站点 ID

  4. 修改主题配置文件，设置 cnzz_siteid

    1
    2
    # CNZZ count
    #cnzz_siteid:

    ​

baidu 统计

  1. 注册账号：https://tongji.baidu.com/web/welcome/login

  2. 添加站点

  3. 获取统计代码中的站点 ID

  4. 修改主题配置文件，设置 Baidu Analytics ID

    1
    2
    # Baidu Analytics ID
    baidu_analytics: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    ​

SEO 优化

安装站点地图

  1. 站点地图

    1
    2
    3
    4
    5
    # google
    $ npm install hexo-generator-sitemap --save

    # baidu
    $ npm install hexo-generator-baidu-sitemap --save

  2. 修改站点配置

    1
    2
    3
    4
    5
    # 自动生成sitemap
    sitemap:
      path: sitemap.xml
    baidusitemap:
      path: baidusitemap.xml

    ​

Google

  1. 使用 Google 账号登录：https://www.google.com/webmasters

  2. 添加属性 ——> 输入网站地址

  3. google 验证网页所有权，选择 HTML Tag 验证方式，获取 content 的内容

    1
    <meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX" />

  4. 修改主题配置，设置 google_site_verification，构建站点并发布

    1
    2
    3
    # Google Webmaster tools verification setting
    # See: https://www.google.com/webmasters/
    google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX

  5. 验证通过，进入控制台 ——> 抓取 ——> 站点地图 —— 提交站点网址 sitemap.xml

百度

  1. 注册百度资源平台账号：http://ziyuan.baidu.com/

  2. 网站支持 —> 数据引入 —> MIP 引入 —> 数据提交，获取 token

    hexo_setting_1

  3. 到 Hexo 根目录下，安装插件：

    1
    $ npm install hexo-baidu-url-submit --save

  4. 修改主题配置文件_config.yml，开启百度自动推送：

    1
    2
    # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
    baidu_push: true

  5. 修改 hexo 主配置文件_config.yml，在文末添加以下配置：

    1
    2
    3
    4
    5
    baidu_url_submit:
      count: 1 ## 提交最新的一个链接
      host: www.hui-wang.info ## 在百度站长平台中注册的域名
      token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
      path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

  6. 修改 hexo 主配置文件_config.yml，修改 deploy 项配置：

    1
    2
    3
    4
    5
    6
    7
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    - type: git
      repo: [email protected]:wangweiX/tech.github.io.git
      branch: master
    - type: baidu_url_submitter

其他插件配置

文件压缩

  1. 安装插件 hexo-all-minifier

    1
    $ npm install hexo-all-minifier --save

  2. 修改 hexo 配置文件_config.yml，添加如下配置：

    1
    all_minifier: true
文章路径优化

  1. 安装插件 hexo-abbrlink

    1
    $ npm install hexo-abbrlink --save

  2. 修改 hexo 配置文件_config.yml，添加如下配置：

    1
    2
    3
    4
    # abbrlink config
    abbrlink:
      alg: crc32  #support crc16(default) and crc32
      rep: hex    #support dec(default) and hex

  3. 修改 hexo 配置文件_config.yml，更新 permalink：

    1
    permalink: posts/:abbrlink.html
字数统计

  1. 安装插件

    1
    2
    3
    4
    5
    # # Node 版本7.6.0之后
    npm i --save hexo-wordcount

    # Node 版本7.6.0之前,请安装 2.x 版本 (Node.js v7.6.0 and previous)
    npm install hexo-wordcount@2 --save

  2. 修改 NexT 配置文件_config.yml，添加如下配置：

    1
    2
    3
    4
    5
    6
    7
    8
    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true
      wordcount: true
      min2read: true
      totalcount: true
      separated_meta: true
流程图
其他插件

官方：https://github.com/hexojs/hexo/wiki/Plugins

参考资料