Hexo-Next-主题优化(四)

0.528字数 1549阅读 7537

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

3.1 注册AddThis,选择分享按钮:

image.png

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

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;
}
  • 在你需要编辑的文章地方。放置如下代码
    <span id="inline-blue"> 站点配置文件 </span>
    <span id="inline-purple"> 主题配置文件 </span>
    <span id="inline-yellow"> 站点配置文件 </span>
    <span id="inline-green"> 主题配置文件 </span>

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;
}
}
  • 在你需要编辑的文章地方。放置如下代码
    <a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>

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

image.png
  • <i class="fa fa-pencil"></i>支持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

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 %}
  <meta name="baidu-site-verification" content="9v8CMO9Qh8" />{% 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-主题优化(三)

推荐阅读更多精彩内容