Fork me on GitHub

Next主题优化(四)

1.添加Google统计

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

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

  • 编辑 主题配置文件 , 找到关键字busuanzi_count
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 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 文字增加背景色块

  • 站点配置文件
  • 主题配置文件

  • 站点配置文件

  • 主题配置文件

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    // 颜色块-黄
    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下载样式

  • Download Now

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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
    <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 提供图标

  • 支持Markdown <i class="fa fa-pencil"></i>支持Markdown

5.添加Disqus评论系统

  • Disqus注册很简单,主要是获取Shortname
    image.png

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

    1
    2
    3
    4
    5
    # 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地址

1
$ 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)

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

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

1
2
3
4
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

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

1
2
3
4
5
6
# 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文件,文件内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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替换复制的内容

    1
    2
    {% if theme.baidu_site_verification %}
    <meta name="baidu-site-verification" content="9v8CMO9Qh8" />{% endif %}
  • 主题配置文件 , 添加代码如下

    1
    baidu_site_verification: true
  • 然后

    1
    2
    3
    hexo clean
    hexo g
    hexo d
  • 然后点击完成验证

8.6.4 验证Robots文件是否生效

image.png

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

本文标题:Next主题优化(四)

文章作者:Devin

最后更新:2017年09月26日 - 23:15:26

原始链接:http://devinol.com/Hexo/Next主题优化-四/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%