Hexo-Next-主题优化(四)

1.添加Google统计

• 访问Google Analytics,需要登录,按照提示填写网站信息开通GA服务，获取统计ID。
• 编辑主题配置文件, 找到关键字google_analytics , 删除注释#并填写获取到的统计ID

google_analytics: your-analytics-id

2.开启不蒜子博客访问量统计

• 编辑主题配置文件 , 找到关键字busuanzi_count

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header:  访问人数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header:  总访问量
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header:  阅读次数
  page_pv_footer:

3.添加分享功能

image.png

• 我选择的是AddThis作为博客的第三方分享。AdThis是国外的第三方分享,使用方便,可以用google直接登录。能自定义分享样式

3.1 注册AddThis，选择分享按钮：

image.png

3.2 选择显示样式(Select a Tool Type),AddThis提供了7种显示样式,你可以更加左边菜单栏点击,右边会自动显示你选择的相应样式。值得注意的是。在其右上角可以切换PC和Phone显示

image.png

3.3 点击Continue配置分享按钮,注意：不同的风格样式,配置方式不同

image.png

3.4 配置完成后 , 获取代码ID , 在js代码中获取pubid后面的ID

image.png

3.5 编辑主题配置文件, 找到关键字add_this_id, 添加pubid

4.添加文章书写样式

4.1 文字增加背景色块

image.png

• 打开themes/next/source/css/_custom 下的 custom.styl 文件,添加属性样式

// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}

• 在你需要编辑的文章地方。放置如下代码
  站点配置文件
主题配置文件
站点配置文件
主题配置文件

4.2下载样式

image.png

• 打开themes/next/source/css/_custom 下的 custom.styl 文件,添加属性样式

a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}

• 在你需要编辑的文章地方。放置如下代码
  Download Now

4.3 在文档中增加图标, Font Awesome 提供图标

image.png

• 支持Markdown

5.添加Disqus评论系统

• Disqus注册很简单，主要是获取Shortname
  

  

  image.png

• 编辑主题配置文件 , 找到关键字disqus

# Disqus
disqus:
  enable: true
  shortname: you-shortname
  count: true

6.绑定godaddy域名

• Note:这里讲的是Github绑定godaddy域名。
• 提示：如果你想好好的搭建个人博客,那么建议你在国内购买域名和主机(腾讯或者阿里都可以,看你个人喜好)。优点：访问速度快，百度抓取方便。毕竟一分钱一分货。缺点:主机价格太贵，购买域名和主机需要实名认证和报备,很麻烦，而且报备需要等3-5天。如果你只是打算玩玩，试试水，为后期准备，那么建议里在godaddy购买域名,购买信息你随便填写。Github上托管博客。优点：方便，不用实名认证和报备。价格便宜，只需要购买域名即可。还可以练手,可随时弃坑。缺点：访问速度较慢。需要你自己把控blog安装的插件。Github屏蔽了百度抓取，处理比较麻烦。

6.1打开终端,ping你的github.io获取ip地址

$ ping  your.github.io

6.2进入你的域名DNS管理，修改信息

image.png

6.3设置GitHub

image.png

7.如果你觉得godaddy麻烦，可以用dnspod托管你的域名

7.1 注册，dnspod是腾讯的,可以使用QQ直接注册登录

7.2 域名解析

image.png

7.3 根据域名解析，配置

image.png

8.SEO 优化

8.1 需要安装两个插件来生成 sitemap 文件，前一个是传统的 sitemap，后一个是百度的 sitemap(如果你blog托管在GitHub,并且，若果你不想在多花钱弄百度抓取，可以不用安装百度的 sitemap)

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

8.2 编辑站点配置文件 ,文件末尾添加：

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

8.3 编辑站点配置文件 , 搜索关键字url,并修改url

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :category/:title/
permalink_defaults:

8.4 添加蜘蛛协议

• 在站点source文件夹下新建robots.txt文件，文件内容如下:

User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://yoursite.com/sitemap.xml
Sitemap: http://yoursite.com/baidusitemap.xml

• Allow字段的值即为允许搜索引擎爬区的内容，/表示网站首页，/categories/为分类页面，如果菜单栏还有其他选项都可以按照格式自行添加。

8.5 提交站点到 Google

8.5.1 打开 Google Search Console，添加博客地址。并进行相关验证,根据提示即可完成认证,认证成功如下：

image.png

8.5.2 验证通过后点进入控制台测试robots.txt文件,没有错误和警告即可

image.png

8.5.3 提交 sitemap.xml 文件，点击右上角添加/测试站点地图输入 sitemap.xml 进行测试，测试无误后再提交文件

image.png

8.5.4 robots.txt验证和sitemap.xml验证通过，抓取网页

image.png

• 输入框留空表示抓取首页，填入 about 表示抓取关于页面，抓取完成后,抓取因为验证原因,可能会有几种状态：完成、部分完成和已重定向等，不过无需担心，这些状态并不会影响提交。此时点击请求编入索引即可，至此博客就成功提交到了 Google

8.5.5 验证站点是否被收录

• 谷歌中输入：site:yousite，会有提示：(抓取需要时间。等几分钟)

  
  
  

  image.png

8.6 提交站点到 BaiDu

• 如果你是github上部署的blog，百度是不能直接爬去到你的网站的。现最简单实惠的办法是搭建CDN.相关文章:如何解决百度爬虫无法爬取搭建在Github上的个人博客的问题？

8.6.1 进入百度站长管理，单击站点管理，添加网站，进行认证

image.png

8.6.2 HTML标签认证

image.png

• 打开themes/next/layout/_partials/head.swig文件，搜索baidu_site_verification替换复制的内容

{% if theme.baidu_site_verification %}
  {% endif %}

• 主题配置文件 ， 添加代码如下

baidu_site_verification: true

• 然后

hexo clean
hexo g
hexo d

• 然后点击完成验证

8.6.4 验证Robots文件是否生效

image.png

• 验证完成后，自己的网站会被提交，过段时间在百度中验证站点是否收录即可(一般为2-7天)

Hexo-Next-主题优化(一)
Hexo-Next-主题优化(二)
Hexo-Next-主题优化(三)