hexo进阶

一些关于hexo的进一步设置,包括如何发布文章、如何添加站点地图、如何向百度提交网站等。

添加页面

页面指的是分类页categories、标签页tags、关于页about等。使用以下命令生成以上页面参考nexT:
  

1
2
3
$hexo new page categories
$hexo new page tags
$hexo new page about

hexo 配置文件 _config.yml 文件中设置 post_asset_folder 为true,当新建页面后会自动生成一个同名文件夹,用于存储所需的资源图片等。生成以上页面后在主题配置文件中 themes/nexT/_config.yml 打开相关配置项:
  

1
2
3
4
5
6
7
8
menu:
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
#sitemap: /sitemap.xml
#commonweal: /404.html

设置自己的标签页面位于hexo/source/tags:

1
2
3
4
5
6
7
8
9
title: 标签
date: 2017-05-05 12:30:52
type: "tags"
comments: false
tags:
- Qt
- Linux
- Hexo
- ROS

可以在上面添加自己的标签。
分类页的示例如下:
 

1
2
3
4
title: 分类
date: 2017-05-05 12:30:42
type: "categories"
comments: false

发表文章

新文章的发表使用以下命令:
  

1
$hexo new post "文章名" 或者 hexo n "文章名"

一个文章的开头应包含:
 

1
2
3
4
title: #文章题目
date: #日期
tags: #标签
categories: #分类

文章存储在hexo/source/_posts目录下,后缀为.md。可以在适当位置插入以下符号用于部分显示:
  

1
<!--more-->

插入该符号之前的文字可以直接显示出来,之后的需要鼠标点击阅读全文来显示全部。
  

1
2
$hexo g //生成静态文件
$hexo d //部署

添加RSS

安装RSS插件:
  

1
$npm install hexo-generator-feed --save

修改hexo/_config.yml根目录下的站点配置文件,添加以下内容:
  

1
2
3
4
5
6
7
8
#RSS 订阅支持
plugin:
- hexo-generator-feed
#feed Atom
feed:
type: atom
path: atom.xml
limit: 20

修改主题目录下的配置文件themes/nexT/_config.yml
  

1
rss: /atom.xml

添加sitemap

sitemap 插件可以方便的管理网站,并生成符合搜索引擎需要的网站格式,供那些网络爬虫抓取,以便于我们的网站可以被搜索到。
安装sitemap插件:
 

1
$npm install hexo-generator-sitemap --save

修改hexo/_config.yml根目录下的站点配置文件:
  

1
2
sitemap:
   path: sitemap.xml

添加baidusitemap:

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

修改hexo/_config.yml根目录下的站点配置文件:
  

1
2
baidusitemap:
   path: baidusitemap.xml

在站点配置文件中添加:
  

1
2
3
plugin:
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap

修改文件 node_modules/hexo-generator-baidu-sitemap/baidusitemap.ejs ,添加自己的网站地址:
 

1
<loc><%- encodeURI("http://stevenshi.me/" + post.path) %></loc>

当执行 hexo g 命令后会在站点目录下的 public/ 下生成 baidusitemap.xml 和 sitemap.xml 文件。将 baidusitemap.xml 提交给百度,百度提交入口 将 sitemap.xml 提交给 google,Google提交入口

百度提交

先去百度站长平台注册,并添加自己的网站然后开始验证。关于验证方式,百度提供了三种,这里为了简单选择 html 标签验证。将百度提供的标签信息添加到主题目录下的 layout/_partials/head.swig 文件内即可:
 

1
2
3
{% if theme.baidu_site_verification %}
<meta name="baidu-site-verification" content= />
{% endif %}

content 内容为百度提供的验证内容,同时在主题目录中的 _config.ym l中将 baidu_site_verification 的值设置为 true 即可。
 

1
baidu_site_verification: true

重新部署网站后开始验证,不出意外很快会验证成功。成功之后转到百度站长找到左边的链接提交,选择自己的站点,选择自动提交,添加自己的sitemap:

填入自己的 sitemap 地址: http://stevenshi.me/baidusitemap.xml,剩下的时间就是等待了。

谷歌提交

其实不做谷歌提交,谷歌的网络爬虫每隔一段都会自动在网上抓取一些网页,不过为了及时让谷歌收录,还是做一下提交。首先登陆 GoogleWebmasterCentral 进入后如下图:

点击 ADD A PROPERTY,输入自己的域名,并继续,之后选择一种验证方式,这里选择推荐的方式,下载一个 html 文件放到博客主题根目录下的 source 目录下,并部署网站后开始验证,成功后提示:

验证完后登陆 google站长工具,选择添加站点地图:

至此 google 提交完成。

错误

当在浏览器输入 localhost:4000/baidusitemap.xml 时出现错误:

貌似是标题格式问题, baidusitemap.xml 和普通的 sitemap.xml 格式不同,它多一个标题,经过仔细检查原来标题中的<>符号问题,标题中有该符号即报上面的错误,去掉该符号后问题解决。

提交网站 sitemap 百度提示抓取失败:

原来百度抓取 github 时是被拒绝的,github 屏蔽了百度爬虫,汗..

网络上有几种解决方案,可以选择同时部署到国内的 Coding net 和 github,同时配置域名解析国内的解析到 Coding net 国外的解析到 github 。这样就能解决百度爬虫的问题,但 Coding 目前针对免费用户只提供可怜 256M 的空间。所以还是想其它办法。

添加侧栏社交链接

修改主题目录下的配置文件 themes/nexT/_config.yml
  

1
2
3
4
5
6
7
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
Github: https://github.com/username
知乎: http://www.zhihu.com/people/username
Email: mailto: user@xx.com

设置链接的图标,对应的字段是social_icons在主题配置文件中:
 

1
2
3
4
5
6
# Social Icons
social_icons:
enable: true
# Icon Mappings
GitHub: github
Email: envelope

nexT使用的图标来自 FontAwesome,只要上面有的都可以配置到nexT使用。

添加本地搜索

安装hexo-generator-serarch
  

1
$npm install hexo-generator-search --save

修改hexo/_config.yml根目录下的站点配置文件添加:
  

1
2
3
search:
path: search.xml
field: post

设置头像

在hexo/source/目录下建立images文件夹,将头像放置在该文件夹下,修改主题目录下的配置文件themes/nexT/_config.yml
  

1
avatar: /images/avatar.jpg

生成网站二维码

二维码生成工具很多,这个 Custom QR Code Generator 比较不错。生成后将二维码添加到关于页面。

设置代码高亮主题

NexT 使用 TomorrowTheme 作为代码高亮,共有5款主题供选择。 打开主题配置文件themes/nexT/_config.yml修改:
  

1
2
3
4
5
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright

开启打赏功能

只需要主题配置文件中填入微信和支付宝收款二维码图片地址,即可开启该功能。修改主题配置文件themes/nexT/_config.yml
  

1
2
3
reward_comment: 您的支持是我原创的动力
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

鼠标放置在二维码上面时,下面的字来回晃眼,修改如下文件:
themes/next/source/css/_common/components/post/post-reward.styl
注释掉以下代码:Alt text

友情链接

修改主题配置文件themes/next/_config.yml
  

1
2
3
4
5
6
7
# Blog rolls
links_title: 友情链接
#links_layout: block
#links_layout: inline
links:
hexo: https://hexo.io/zh-cn/docs
nexT: http://theme-next.iissnan.com/

开启动画背景

nexT 自带两种背景动画效果,canvas_nest以及three_waves,在主题配置文件:
themes/next/_config.yml中设置为true即可开启,
  

1
2
# Canvas-nest
canvas_nest: true

开启JiaThis分享

Jiathis 为文章提供社会化分享功能。修改主题配置文件themes/next/_config.yml:
  

1
2
# Share
jiathis: true

百度分享

两种分享只能同时开启一种,百度分享需要在站点配置文件hexo/_config.yml中添加:
  

1
2
# baidu share
baidushare: true #百度分享功能

另外需要在主题配置文件themes/next/_config.yml中开启百度分享功能:
  

1
2
3
4
5
6
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
baidushare:
type: button

添加DISQUS评论

修改主题配置文件开启 DISQUS 功能:
  

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

DISQUS 官网注册,并获取自己的shortname,填写至主题配置文件中的对应字段中。取消一篇文章的评论只需要在文章的头部修改:
  

1
comments: false

设置网站图标

图标制作网站 faviconer,制作完成自己的网站图标后放到hexo/source根目录下,并修改主题配置文件:
  

1
2
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

页面中插入图片

图片的插入可以使用 MarkdownPad 的语法:
  

1
![图片名称](图片地址)

图片可以放在本地,也可以放在云端。建议放在云端,因为github的空间有限,云端可以使用 七牛云存储
本地图片的插入有两种方法,早期的 hexo 需要将图片放在网站根目录下的source/文件夹中比如source/images/文件夹,将图片放到该处,即可在页面中引用:
  

1
![test](source/images/test.jgp)

hexo 2.0之后,引入新方法,参考 CodeFalling/hexo-asset-image
安装插件:
  

1
$npm install hexo-asset-image --save

修改配置文件中的 post_asset_folder:true ,这样新建文章时,会在 _post 目录下生成同名的文件夹,页面需要的各种图片都可以放到此处。比如:
  

1
2
3
4
5
my-Publish
├── my.jpg
├── logo.jpg
└── test.jpg
my-Publish.md

新建名为 my-Publish 的新文章,文章需要的图片都放到该文件夹中。引用:
  

1
![xx](my-Publish/my.jpg)

即可插入图片,xx为图片的描述。另外如果想控制插入图片的显示大小,在 hexo 中可以这样实现:
  

1
<img src="my.png" width=300 height=300>

有时候图片太大占满整个页面,可以通过这种方式来调整。

站内链接

在自己的博客内链接站内文章,以前都直接加上永久链接地址,这种做法有一定的弊端,如果域名更换那就坏了。站内链接简单的做法如下:
  

1
{% post_link 文章文件名(不要后缀) 文章标题(可选) %}

比如直接链接本篇文章,使用以下代码:
  

1
{% post_link hexo-advance hexo进阶 %}

将链接文本设为为蓝色,鼠标滑过时颜色会改变,修改主题目录下的 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;
}
}

效果:hexo进阶

修改底部带 # 的标签

底部的 # 不好看,可以修改主题目录下的 layout/_macro/post.swig 文件,找到 rel=”tag”># 处,将 # 修改为:
  

1
<i class="fa fa-tag"></i>

即可。

首页分割线

在主题目录中的 source\css_custom\custom.styl 文件中添加代码,修改首页目录中的文章分割线样式:
//文章分隔线样式
  

1
2
3
4
5
6
7
8
9
10
.posts-expand {
.post-eof {
display: block;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 100%;
height: 2px;
background: $grey-light;
text-align: center;
}
}

该方法在新的主题样式Gemini中不适用。

网页底部桃心图标和竖线

小图标都可以在 fontawesome 获取,底部的桃心可以换成 share 图标,找到主题目录下的 layout/_partials/footer.swig 文件,找到 with-love 将图标修改为:
  

1
2
3
<span class="with-love">
<i class="fa fa-share-alt"></i>
</span>

竖线可以使用以下代码实现:
  

1
<span class="post-meta-divider">|</span>

文章添加阴影效果

打开主题目录下的 source/css/_custom/custom.styl 文件,添加:
  

1
2
3
4
5
6
7
8
//主页文章添加阴影效果
.post {
margin-top: 20px;
margin-bottom: 20px;
padding: 30px;
-webkit-box-shadow: 0 0 5px rgba(102, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(102, 203, 204, .5);
}

使用gitment搭建评论系统

DISQUS 在国内的加载非常慢,因此尝试使用 gitment 评论系统,就是将评论放到 github 的 issues 系统里,支持md,非常方便。登录 github 账号,在 https://github.com/settings/developers 进行 OAuthApps 的注册:

  • Application name 随意填
  • Homepage URL 自己的主页地址
  • Application description 随意填
  • Authorization callback URL 自己的主页地址
    完成后会生成后续需要的 Clint ID 以及 Client Secret,记下这两个值。
    修改主题配置文件:
      
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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: 填入你的github ID
    github_repo: 你的仓库名称
    client_id: 上面获取的 Clint ID
    client_secret: 上面获取的 Client Secret
    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

对于nexT主题中的 Gemini 样式做到这里已经可以实现 gitment 的评论功能了。其他的三个样式需要改动的较多,可以参考这篇:
添加Gitment评论系统到Hexo主题NexT hexo next主题集成gitment评论系统

Needmoreshare2

Needmoreshare2 支持https,因此在新版的nexT主题中启用该分享功能,而弃用之前的 jiathis 分享功能。在主题配置文件中设置 enable 为 true 即可:
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: topRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

但是微信二维码不能正确加载,因此需要小小的改动,修改主题目录下的source\lib\needsharebutton\needsharebutton.js文件:
  

1
var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url);

修改为:

  

1
var imgSrc = "https://pan.baidu.com/share/qrcode?w=400&h=400&url=" + encodeURIComponent(myoptions.url);

该功能是生成一个网址的二维码,而不是真正的分享,关于微信官方的分享功能的接口开发需要认证,暂时使用该方式替代。可以参考 need-more-share-issue

您的支持是我原创的动力