工具使用指南

Hexo-Next-主题优化(四)

2017-10-16  本文已影响5128人  Devin_

1.添加Google统计

google_analytics: your-analytics-id

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

# 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: <i class="fa fa-user"></i> 访问人数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-eye"></i> 阅读次数
  page_pv_footer:

3.添加分享功能

image.png

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 
// 颜色块-黄
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 
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;
}
}

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

image.png

5.添加Disqus评论系统

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

6.绑定godaddy域名

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 添加蜘蛛协议

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

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

8.5.5 验证站点是否被收录

8.6 提交站点到 BaiDu

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

image.png

8.6.2 HTML标签认证

image.png 
{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="9v8CMO9Qh8" />{% endif %}

baidu_site_verification: true

hexo clean
hexo g
hexo d

8.6.4 验证Robots文件是否生效

image.png

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

上一篇 下一篇

猜你喜欢

热点阅读