搭建GitHub博客教程 - Hexo及Next主题优化

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 6.7k | 阅读时长 ≈ 6 分钟

本文为针对Hexo博客和Next主题的优化和配置。

标题配置

vi _config_yml

1
2
3
4
5
6
7
title: xxx的技术博客
subtitle: xxx
description: xx
keywords: xxx
author: xx
language: zh-CN
timezone: Asia/Chongqing

首页文章预览限制字数

cd themes/next

vi _config.yml

1
2
3
auto_excerpt:
  enable: true
  length: 150

文章内使用<!--more-->作为预览分割

修改文章内链接文本样式

./themes/next/source/css/_common/components/post/post.styl

末尾添加：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

样式优化

cd themes/next

vi _config.yml

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
34

scheme: Pisces

github_banner:
  enable: true
  permalink: https://github.com/xxxx
  title: Follow me on GitHub

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
  
//加载条
pace: true

//阅读统计
busuanzi_count:
  enable: true

//头像
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: http://xx/xxx.jpeg
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

favicon.ico

放入/themes/next/source/images

1
2
3
favicon:
  small: /images/favicon.png
  medium: /images/favicon.png

开启标签和分类

主要是设置页面类型及关闭评论

  • 创建

    1
    2
    hexo new page tags
    hexo new page categories

  • 修改主题配置
    vi ./source/tags/index.md

1
2
3
4
title: tags
date: 2019-04-20 14:24:27
type: "tags"
comments: false

vi ./source/tags/index.md

1
2
3
4
title: tags
date: 2019-04-20 14:24:27
type: "tags"
comments: false

菜单修改

主要是打开菜单及统计

vi ./themes/next/_config.yml

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  
menu_settings:
  icons: true
  badges: true

RSS、搜索、永久链接

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

npm install hexo-generator-feed --save
npm install hexo-generator-searchdb --save
npm install hexo-symbols-count-time --save
npm i --save hexo-wordcount
npm install hexo-abbrlink --save

vi _config.yml

permalink: posts/:abbrlink/

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# 时间统计
symbols_count_time:
  count: Symbols count in article
  count_total: Symbols count total
  time: Reading time
  time_total: Reading time total
  time_minutes: mins.

# 字数统计
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: false
  separated_meta: true  
  
vi ./themes/next/_config.yml

rss: /atom.xml

local_search:
  enable: true
  
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

pm2 restart all
hexo s
hexo clean
hexo g

本文结束

在路径/themes/next/layout/_macro中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
    {% endif %}
</div>

打开themes/next/layout/_macro/下的post.swig文件,添加：

1
2
3
4
5
6
7
8
{#####################}
{### END POST BODY ###}
{#####################}
<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>

注意添加位置

vi ./themes/next/_config.yml,在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
    enabled: true

SEO

安装与配置

1
2
3
4
5
6
7
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

sitemap: 
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

在hexo-site\source中新建文件robots.txt,内容如下，请自行替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /about/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://xxx.github.com/sitemap.xml
Sitemap: https://xxx.github.com/baidusitemap.xml

google

登录https://search.google.com/search-console/welcome

网址前缀->其他验证方法->HTML标记，复制meta代码。

百度

1
2
3
vi themes/next/_config.yml

baidu_push: true

登录https://ziyuan.baidu.com/linksubmit/url

站点管理->新建站点

HTML标签验证->复制meta代码

验证

1
vi ./themes/next/layout/_partials/head/head.swig

在meta下添加google的meta代码。

1
hexo clean && hexo g && hexo d

然后分别点击刚才 百度、谷歌 验证页面的 验证 按钮进行站点验证。

提交sitemap

谷歌

百度

百度站点统计

访问注册https://tongji.baidu.com/web/welcome/login

Baidu Analytics ID:

hm.src = https://hm.baidu.com/hm.js?`81b7a9fddbd9b9470364a87a43991a67`;

1
2
vi themes/next/_config.yml
baidu_analytics: 81b7a9fddbd9b9470364a87a43991a67

评论

注册OAuth Application
在GitHub上注册新应用, 链接:https://github.com/settings/applications/new

1
2
3
4
5
Application name	应用名称, 可以任意填入
Homepage URL	网站URL, 注意用https://开头, 开头如https://vonsdite.cn
Application description	应用描述, 可以任意填入
Authorization callback URL	网站URL, 注意用https://开头, 如https://vonsdite.cn
注册后记下Client ID和Client Secret, 后续要使用到

修改主题配置文件_config.yml

在主题配置文件themes/next/_config.yml中添加如下内容:

1
2
3
4
5
6
7
8
gitalk:
  enable: true
  githubID: github帐号           # 例：vonsdite   注意必须小写 
  repo: 仓库名称                 # 例：vonsdite.github.io
  ClientID: Client ID           # 上文注册 OAuth Application后得到的值
  ClientSecret: Client Secret   # 上文注册 OAuth Application后得到的值
  adminUser: github帐号         # 指定可初始化评论账户, 例：vonsdite   注意必须小写 
  distractionFreeMode: true

版权声明

主题配置文件

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

相关文章

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

主题配置

1
2
3
4
5
6
related_posts:
  enable: true
  title: # custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5

图片大小配置

下载

存储路径:./themes/next/source/js/hexo_resize_image.js

修改./themes/next/layout/_partials/head/head.swig

添加

1
<script src="{{ url_for(theme.js) }}/hexo_resize_image.js?v={{ version }}"></script>

使用语法：

url?<width>x<height>，指定宽高，例如/image/test.jpg?200x200

url?<width>x<height>，指定宽，高等比缩放，例如/image/test.jpg?200x

url?<width>x<height>，指定高，宽等比缩放，例如/image/test.jpg?x200

url?缩放比例，指定缩放例如，例如/image/test.jpg?50

进度条

1
2
3
4
5
6
7
cd themes/next

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

vi _config.yml

pace: true
相关文章
------ 本文结束------

本文标题:搭建GitHub博客教程 - Hexo及Next主题优化

文章作者:Perkins

发布时间:2019年04月22日

原始链接:https://perkins4j2.github.io/posts/60068/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。