庆峰的博客

流水要争先，争的是滔滔不绝。

0%

Hexo-Optimization

发表于 更新于 分类于
本文字数： 3.2k 阅读时长 ≈ 3 分钟

简单优化的下博客。

优化内容

  • 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

思维导图

在页面上显示思维导图

1
npm install hexo-simple-mindmap

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