3

前言

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

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

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

七牛云图床

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

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

注册七牛云

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

PS:登录七牛云,验证邮箱, 实名认证 ,可选择支付宝实名认证--前提是你支付宝已经实名认证 ,正常情况下 支付宝实名认证 即刻就可以通过(推荐)

创建对象存储

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

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

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

上传图片,获取外链

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

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

新增图片样式

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

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

//图片外链?处理代码或者样式名称
//示例:
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插件安装
    npm install hexo-generator-sitemap --save     
    npm install hexo-generator-baidu-sitemap --save
  • 修改博客配置文件
    在根目录配置文件_config.yml中修改url为你的站点地址
# 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中的域名切换成自己网站域名)
# 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" 属性

<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"属性

 <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 否则在编译的时候 也会一起编译。

---
layout: false
---
J9sxxxxx

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

  • 链接提交
    在左侧找到链接提交,右边可以看到提交方式有两种:自动提交,手动提交

手动提交我们就不谈了,看看自动提交。主要分为 主动推送,自动推送,sitemap 三种方式。

1 主动推送
安装推送插件

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

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

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

deploye属性 新增字段

deploy:
 - type: baidu_url_submitter

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

# 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

# Gentie productKey
gentie_productKey: ea08xxxxx

效果预览:

阅读统计功能

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

  • 注册登录
    leancloud注册
  • 创建应用
    登录后在右上角选择国内节点,创建应用。如图:

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


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

# 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
# Baidu Analytics ID
baidu_analytics: 9758xxxx
# Google Analytics
google_analytics: UA-3534xxxx

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

结语

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

相关链接:
Hexo+github博客搭建
Hexo进阶高级教程(一)
Hexo进阶高级教程(三)

实际效果展示可移步个人博客 -- Tigerliu Blog


tigerliu
210 声望2 粉丝

大侠,请放码过来!!!