Hexo进阶高级教程（二）

Hexo

前言

接上一篇Hexo 进阶高级教程(一)继续探讨 Hexo,主要的功能都有了，要想让整个博客更丰富，访问速度更快更流畅，就需要添加一些附加的功能，做一些优化处理。
下面会讲解：

  • 七牛云图床–用来做图片存储管理
  • SEO 优化–让更多的人通过搜索引擎搜到我们
  • 网易云跟帖–文章的留言区
  • leancloud 阅读统计–统计阅读量
  • 百度、谷歌统计–网站流量统计

本文地址：http://tigerliu.site/2017/06/hexo-2

七牛云图床

在写博文的时候，难免都会添加一些图片在文章内，正常情况下，我们都使用外链形式添加到我们的博文，为什么要选七牛云呢？让我们来看看它的特点：

  • 10G 免费流量（图片尽量压缩 200k 以内）
  • 服务稳定（写作才是核心，就别总折腾图片的事情了）
  • 便宜（就算付费也相对比较便宜，作为学生党觉得可以接受）

注册七牛云

永远不变的第一步，骚年得先去注个册，有了 ID 才能继续玩，链接：七牛云注册 ，按照提示一步一步来就好了。

PS：登录七牛云，验证邮箱， 实名认证 ，可选择支付宝实名认证–前提是你支付宝已经实名认证 ，正常情况下 支付宝实名认证 即刻就可以通过（推荐）

创建对象存储

登录七牛云，默认进来就是资源主页，然后在七牛云官方资源栏–》对象存储 点击立即添加，如下图：

按照提示填写好存储空间名称，存储区域默认就好了，访问控制–选择公开空间

PS：选择私有空间 需要有 Key 值才能访问，这里选择公开空间 上传完后 直接就可以获取外链 比较方便

上传图片，获取外链

选择内容管理–》点击上传文件 ，上传完成之后 点关闭，回到列表页就可以看到刚才上传的图片了

鼠标悬浮在文件名上 可点击蓝色的笔重命名，右边的眼睛 Icon 点击 可以获取外链地址，复制外链就可以使用了。

新增图片样式

图片样式–》新建图片样式 根据不同业务需要选择场景–》选择合适的缩放方式，是否剪裁，图片水印 这个功能用的比较多（可设置图片水印，文字水印），设置输出格式，然后保存样式。给处理样式命名， 点击下面的保存按钮。

我们看到右侧的处理代码，这个是干嘛的呢？我们保存完了之后又怎么使用呢？
博主刚开始也是一脸懵逼，复制这段代码，打开刚才上传的图片外链，然后在地址后面用连接符?加上处理的代码，回车就可以看到我们的图片已经加上了水印。不加处理代码就是我们的原图。

1
2
3
//图片外链?处理代码或者样式名称
//示例：
http://orzlwnnoa.bkt.clouddn.com/logo.jpg?watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/240/fill/IzAwMDAwMA==/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim

与极简图床的结合

在写博客的时候，每次都要做这样重复的操作，有没有一键上传并且获取外链的方式呢，必须有啊。这里介绍下极简图床与七牛云的结合。
打开极简图床 注册，登录 点击右侧的小齿轮 绑定七牛云账号信息

  • 空间名称：填写在创建对象存储时的空间名称
  • 域名：拷贝外链默认域名
  • AK: 点击左侧的导航栏个人中心–》密钥管理 获取 AK 信息
  • SK:点击左侧的导航栏个人中心–》密钥管理 获取 SK 信息

    点击保存就 OK 了，极简支持截图粘贴，拖拽或者点击上传，上传完可以复制链接/MD 链接生成/预览, 有木有很赞，省了很多事！！！

SEO 优化

SEO 是由英文 Search Engine Optimization 缩写而来， 中文意译为“搜索引擎优化”！
SEO 是指通过对网站进行站内优化(网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。

除开站外 SEO，我们能做的有两方面。一是针对个人网站的页面排版进行 SEO 的优化；二是针对搜索引擎进行主动的优化。

SEO 准备工作

  • sitemap 插件安装
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  • 修改博客配置文件
    在根目录配置文件_config.yml 中修改 url 为你的站点地址
1
2
3
4
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://tigerliu.site
root: /

执行完之后就会在网站根目录生成 sitemap.xml 文件（搜索引擎通用文件）和 baidusitemap.xml 文件（百度专用文件），然后执行 hexo d -g 提交到我们站点，打开链接http://tigerliu.site/sitemap.xml 查看该文件是否能正确访问。

  • 添加蜘蛛协议 robots
    在根目录 source 文件下新建 robots.txt 文件，添加以下文件内容（将 Sitemap 中的域名切换成自己网站域名）
1
2
3
4
5
6
7
8
9
10
11
12
13
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://tigerliu.site/sitemap.xml
Sitemap: http://tigerliu.site/baidusitemap.xml

参数说明： User-agent: * 允许所有 robot 访问，Allow 允许访问 X 目录，Disallow 禁止访问 X 目录

  • 出站链接添加 “nofollow” 标签
    nofollow 标签是由谷歌领头创新的一个“反垃圾链接”的标签，并被百度、yahoo 等各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。
    以 next 主题为例：

    1.themes/next/layout/_partials 目录 修改 footer.swig 文件,将下面代码中的 a 标签 加上 rel=”external nofollow” 属性

1
2
3
4
5
6
<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
    NexT.{{ theme.scheme }}
  </a>
</div>

2.themes/next/layout/_macro 目录,修改 sidebar.swig 文件,将下面代码中的 a 标签 加上 rel=”external nofollow”属性

1
2
3
4
5
<li class="links-of-blogroll-item">
  <a href="{{ link }}" title="{{ name }}" target="_blank" rel="external nofollow">
    {{ name }}
  </a>
</li>

百度收录

生在我大天朝，使用频率最多的当属百度了，下面简单介绍下百度的一些优化处理。

  • 注册账号
    打开百度站长，注册登录账号

  • 添加网站
    左侧 我的网站–》站点管理 添加网站，按照引导步骤来就好了。见下图：

在第三步 验证网站这里 建议选择文件验证或者 CNAME 验证，验证规则选项下面已经给出了。
PS：将下载下来的文件放至根目录/source 目录下，若为 HTML 格式，需要在文件内加上 layout: false 否则在编译的时候 也会一起编译。

1
2
3
4
---
layout: false
---
J9sxxxxx

继续 hexo d -g 将文件上传至我们的网站，查看刚才的文件是否成功上传，然后点击完成验证。

  • 链接提交
    在左侧找到链接提交，右边可以看到提交方式有两种：自动提交，手动提交
    手动提交我们就不谈了，看看自动提交。主要分为 主动推送，自动推送，sitemap 三种方式。

1 主动推送
安装推送插件

1
npm install hexo-baidu-url-submit --save

在根目录的_config.yml 配置文件中新增字段：

1
2
3
4
5
baidu_url_submit:
  count: 100 # 提交最新的一个链接
  host: tigerliu.site # 在百度站长平台中注册的域名
  token: bwxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

deploye 属性 新增字段

1
2
deploy:
 - type: baidu_url_submitter

2 自动推送
这里以 next 主题为例,打开主题配置文件_config.yml 将 baidu_push 设置为 true

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

3 sitemap
将上面我们生成的 sitemap 文件地址 提交到百度，如下图：

所有配置完后，可以利用 site:域名 在百度搜索栏测试我们的结果 例如： site:tigerliu.site
结果是不是什么也没找到，百度收录需要一段时间，耐心等待吧！！！

谷歌收录

还是 google 收录快，比百度快的不是一点半点，设置完成基本 2 分钟左右即可看到效果。一起来看看！！！

  • 注册登录
    google 站长
  • 添加网站
    跟百度收录类似，验证网站 使用 google 的推荐方法，也就是百度收录的文件验证。
  • 提交站点地图
    验证完网站后，回到我们的网站列表，点击网站，如下图：

在左侧的抓取–》点击站点地图 ，添加站点地图（把我们刚才生成的 sitemap.xml 地址添加进去），如图：

  • Google 抓取工具
    点击左侧的 google 抓取工具，输入抓取地址，点击右边的抓取按钮，即可抓取我们的网站。默认不输入 即为抓取首页，状态栏显示完成即为抓取成功，然后将该地址提交至索引。如图：

ps: 至此 google 配置已经完成了，等待 2 分钟，回到 google 搜索页，赶紧试一试！！！

网易云跟帖

博文怎么能少评论功能呢，之前的多说目前已经不可用了，在畅言和网易云跟帖之间，我选了后者。使用之前需要有自己的域名，没有见我的上一篇Hexo 进阶高级教程(一)文章，注册一个，也不贵。下面就来谈谈云跟帖：

畅言需要备案，如果你的网站已经备案可以添加

  • 注册登录
    万年不变的注册登录，网易云跟帖注册
  • 设置站点信息
    登录后，点击后台管理，填写站点信息，站点名称随便取，站点网址填我们购买的域名，保存。
  • 获取 productKey
    点击获取代码，在左侧找到 App SDK,右侧的 APP KEY 即为我们需要的 key,点击复制。如图：

    以 next 主题为例，在 next 主题配置文件_config.yml 中设置 productKey
1
2
# Gentie productKey
gentie_productKey: ea08xxxxx

效果预览：

阅读统计功能

next 主题集成了 leancloud，在使用的时候设置好 app_key 和 app_id 就可以使用了。

  • 注册登录
    leancloud 注册

  • 创建应用
    登录后在右上角选择国内节点，创建应用。如图：

  • 主题配置
    鼠标悬浮到新创建的应用上，点击右上角的齿轮进入设置界面,点击应用 key 获取 app_key 和 app_id 如图：

    将刚才获取到的 key,id 填入主题配置文件

1
2
3
4
5
6
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: yourapp_id
  app_key: yourapp_key
  • 创建 Class
    在左侧点击存储，创建一个名为Counter的 Class 文件，这里的名称一定为Counter 不能随意取！！！

PS：设置完后，回到我的博客，随便点击一篇博文，刷新几次 就可以在 leancloud–》存储–》Counter 看到我们的浏览记录了，在我们的博文副标题也可以看到浏览记录。

百度、谷歌统计

如何查看自己的博客每天被多少人访问呢~ 下面一起来看看在 hexo 中如何使用统计插件，每天看到自己的博客访问量越来越高也是一种享受。

  • 注册登录
    百度统计注册、谷歌统计注册
  • 百度统计
    登录后 在左侧找到代码管理–》点击代码获取–》右侧新增网站，如图：

    拷贝统计代码 ID

  • 谷歌统计
    登录后，新增一个统计网站，填写网站信息，点击下面的获取跟踪 ID，如图：

    进入页面后，你会看到跟踪 ID，复制它，如图：

  • 修改配置文件
    以 next 主题为例，修改主题配置文件，添加 baidu、googleId

1
2
3
4
# Baidu Analytics ID
baidu_analytics: 9758xxxx
# Google Analytics
google_analytics: UA-3534xxxx

PS：谷歌统计用的比较少，因为有墙，在加载代码的时候，很容易阻塞。故在国内我们使用百度、CNZZ 比较多！！！

结语

看完上面的介绍，有木有感觉配置还是蛮多的，正所谓工欲善其事，必先利其器。当初博主也花了一周多星期才搭建好一个稍微满意点的博客，总之喜欢博客爱折腾，功夫不负有心人，终会弄出一个非常 6 的博客。祝大家在 HEXO 的路上玩的嗨皮！！！

赏

×

纯属好玩

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:Hexo进阶高级教程（二）

文章作者:Tigerliu

发布时间:2017年06月26日 - 13时49分

最后更新:2019年07月17日 - 19时00分

原始链接:http://tigerliu.site/2017/06/hexo-2/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 前言
  2. 2. 七牛云图床
    1. 2.1. 注册七牛云
    2. 2.2. 创建对象存储
    3. 2.3. 上传图片，获取外链
    4. 2.4. 新增图片样式
    5. 2.5. 与极简图床的结合
  3. 3. SEO 优化
    1. 3.1. SEO 准备工作
    2. 3.2. 百度收录
    3. 3.3. 谷歌收录
  4. 4. 网易云跟帖
  5. 5. 阅读统计功能
  6. 6. 百度、谷歌统计
  7. 7. 结语
,