个人博客搭建指南(三)

本篇文章介绍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 1632 x 32180 x 180三个版本
  • 将转化后的png以及下载的svg文件放到myBlog/source/目录下
  • 修改next/_config.ymlfavicon项的图片路劲配置
    • 删除/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:w7years@gmail.com || 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: git@github.com: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

参考资料

请我喝杯咖啡吧~