0%

Hexo博客优化

简单优化的下博客。

优化内容

  • SEO优化
  • 增加站内搜索
  • 增加网站地图
  • 添加字数统计和阅读时长
  • GitHub Fork Me
  • 允许复制代码
  • 图片懒加载

SEO优化

hexo 默认生成文章命名方式,在中文标题下很不友好。可以选择生成永久的链接。

  • 使用abbrlink插件
1
npm install hexo-abbrlink --save
  • 配置_config.yml
1
2
3
4
5
6
#permalink: :year/:month/:day/:title/
#permalink_defaults:
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: dec #support dec(default) and hex
  • 生成的链接将会是这样的(官方样例):
1
2
3
4
5
6
7
8
9
10
crc16 & hex
https://post.x.com/posts/66c8.html

crc16 & dec
https://post.x.com/posts/65535.html
crc32 & hex
https://post.x.com/posts/8ddf18fb.html

crc32 & dec
https://post.x.com/posts/1690090958.html

增加站内搜索

增加站内搜索

1
npm install hexo-generator-searchdb --save
  • 配置_config.yml
1
2
3
4
5
search:
path: search.json #支持 json 或者 xml,默认 xml,但我用的有问题,推荐 json
field: post
format: html
limit: 10000
  • 配置主题中的_config.yml
1
2
local_search:
enable: false // 改成true

增加网站地图

站点的SEO

  • 主要针对百度、谷歌
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  • 配置_config.yml
1
2
3
4
baidusitemap:
path: baidusitemap.xml
sitemap:
path: sitemap.xml
  • 增加robots.txt

网站根目录source下新建robots.txt

1
2
3
4
5
6
7
8
9
10
11
12
User-agent: *
Allow: /
Allow: /archives/

Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://z201.com/sitemap.xml
Sitemap: https://z201.com/baidusitemap.xml

增加字数统计阅读时长

简单的优化

1
npm install hexo-symbols-count-time --save
  • 配置_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

post_wordcount:
item_text: true
wordcount: true # 单篇 字数统计
min2read: true # 单篇 阅读时长
totalcount: false # 网站 字数统计
separated_meta: true
  • 配置主题中的_config.yml
1
2
3
4
5
6
symbols_count_time:
separated_meta: true # 是否换行显示 字数统计 及 阅读时长
item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示
item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
awl: 4
wpm: 275

GitHub Fork Me

在网站的右上角增加githu仓库信息

  • 修改主题中的_config.yml
1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/z201
title: Follow me on GitHub

允许复制代码

增加代码复制功能

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: mac

图片懒加载

提高博客访问速度

1
npm install hexo-lazyload-image --save
  • 配置_config.yml
1
2
3
4
5
# image lazyload
lazyload:
enable: true
onlypost: false # 是否只对文章的图片做懒加载
loadingImg: # eg ./images/loading.gif

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Create a new draft

1
$ hexo new draft "new draft"

Crete a new page

1
$ hexo new page "new page"

Run server

1
$ hexo server

More info: Server

Generate static files

1
2
$ hexo generate
$ hexo g

More info: Generating

Deploy to remote sites

1
2
$ hexo deploy
$ hexo d

More info: Deployment

Localization testing

1
$ hexo server -g

visit website : http://localhost:4000