搭建Hexo博客进阶篇--API和一些小部件（四）

本文续接 Hexo主题自定义篇

这一篇的内容大体为：

• API 说明

• 其余小玩意

终于要写完了，Hexo现就这样吧！

终点线，我喜欢的人，就在那。

Hexo API如何使用

其实官方文档有API的介绍，可是，那写的都是些什么东西呀，我感受彻底没有操做性，因而我本身实践了一下，整理成文。

概述

本文件提供您更丰富的 API 信息，使您更容易修改 Hexo 源代码或编写插件。在开始以前，请注意本文件仅适用于 Hexo 3 及以上版本。

搞了大半天，本身也没有彻底弄明白api怎么操做，这个仍是先留在这，下次搞清楚了再补上去！

这里有个教程，我以为讲的不太清楚，下次再来吧

Hexo高级教程及插件开发

Hexo其余内容总结

提交搜素引擎

先确认博客是否被收录

百度，google首页输入 site:smallant.top 获得以下图所示：

百度收录状况

谷歌收录状况

上面能够看出，百度尚未将个人网站收录，google收录了，百度真的是比较慢~~
验证网站：
两个入口：

• Google搜索引擎提交入口

• 百度搜索引擎入口

验证网站

• 为何要验证网站　　站长平台推荐站长添加主站（您网站的连接也许会使用www 和非 www 两种网址，建议添加用户可以真实访问到的网址），添加并验证后，可证实您是该域名的拥有者，能够快捷批量添加子站点，查看全部子站数据，无需再一一验证您的子站点。

• 如何验证网站 首先若是您的网站已使用了百度统计，您可使用统计帐号登陆平台，或者绑定站长平台与百度统计帐号，站长平台支持您批量导入百度统计中的站点，您不须要再对网站进行验证。

百度站长平台为未使用百度统计的站点提供三种验证方式：文件验证、html标签验证、CNAME验证。

1. 文件验证：您须要下载验证文件，将文件上传至您的服务器，放置于域名根目录下。

2. html标签验证：将html标签添加至网站首页html代码的标签与标签之间。

3. CNAME验证：您须要登陆域名提供商或托管服务提供商的网站，添加新的DNS记录。

验证完成后，咱们将会认为您是网站的拥有者。为使您的网站一直保持验证经过的状态，请保留验证的文件、html标签或CNAME记录，咱们会去按期检查验证记录。

只要把文件，放在source根目录下，部署就ok了,

站点地图是一种文件，您能够经过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其余搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

咱们要先安装一下，打开你的hexo博客根目录，分别用下面两个命令来安装针对谷歌和百度的插件

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

在博客目录的_config.yml中添加以下代码(我不加也能够)

# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

编译你的博客

hexo g

若是你在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了。
这时候sitemap.xml跟baidusitemap.xml里面的内容同样 部署后你分别访问

http://smallant.top/sitemap.xml
http://smallant.top/baidusite...

效果以下图：

让谷歌收录咱们的网站

谷歌操做比较简单，就是向Google站长工具提交sitemap

登陆Google帐号，添加了站点验证经过后，选择站点，以后在抓取——站点地图中就能看到添加/测试站点地图，以下图：

这是我最近一次提交状况

让百度收录咱们的网站

谷歌很好搞定，百度就感受很难，我从提交百度到如今写这篇博客，在百度那边也只能搜索到一条个人博客，真不容易。
正常状况，是要等百度爬虫来爬到你的网站，才会被收录。
可是github屏蔽了百度爬虫目前，因此咱们要主动出击，咱们本身把网站提交给百度。
这就要使用到百度站长平台
看下面这张图：

咱们获得四种方式提交百度 , 如何选择连接提交方式?

1. 主动推送：最为快速的提交方式，推荐您将站点当天新产出连接当即经过此方式推送给百度，以保证新连接能够及时被百度收录。

2. 自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每个页面源代码中，部署代码的页面在每次被浏览时，连接会被自动推送给百度。能够与主动推送配合使用。

3. sitemap：您能够按期将网站连接放到sitemap中，而后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的连接进行处理，但收录速度慢于主动推送。

4. 手动提交：一次性提交连接给百度，可使用此种方式。

通常主动提交比手动提交效果好，这里介绍主动提交的三种方法

从效率上来讲：

主动推送>自动推送>sitemap

下面是我提交的状况：

为何自动推送能够更快的将页面推送给百度搜索？

基于自动推送的实现原理问题，当新页面每次被浏览时，页面URL会自动推送给百度，无需站长汇总URL再进行主动推送操做。
借助用户的浏览行为来触发推送动做，省去了站长人工操做的时间。

自动推送和连接提交有什么区别？已经在使用连接提交的网站还须要再部署自动推送代码吗？

两者之间互不冲突，互为补充。已经使用主动推送的站点，依然能够部署自动推送的JS代码，两者一块儿使用。

什么样的网站更适合使用自动推送？

自动推送因为实现便捷和后续维护成本低的特色，适合技术能力相对薄弱，无能力支持全天候实时主动推送程序的站长。
站长仅需一次部署自动推送JS代码的操做，就能够实现新页面被浏览即推送的效果，低成本实现连接自动提交。
同时，咱们也支持主动推送和自动推送代码配合使用，两者互不影响。

插入音乐

插入音乐其实很简单啦，由于markdown是兼容部分html标签的，因此直接加入iframe就能够了

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=186018&auto=1&height=66"></iframe>
//其中的width=298 height=52 均改成0就看不到了，依然能够播放音乐

有的连接没有用呢，呜呜呜~
网易云不让直接拿链接了，请看此文:

如何拿到网易云的外链

emoji插件

如何让markdown能够解析emoji呢？实际上咱们发现，在编辑器中输入 :blush: 并无表情出现，是为何呢？ 这是markdown渲染引擎的问题 ，
Hexo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展，固然就不行了，还有一个支持插件扩展的是 hexo-renderer-markdown-it，因此咱们可使用这个渲染引擎来支持emoji表情，具体实现过程以下：

• 更换渲染器
  进入blog跟目录，执行以下命令

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

• 安装emoji插件，执行以下命令

npm install markdown-it-emoji --save

• 编辑站点配置文件
  就是编辑根目录的_config.yml文件，添加以下内容

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji  # add emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

hexo-renderer-markdown-it详细配置请进: Advanced Configuration

• 添加emoji表情
  先安装emoji npm install emoji

安装完以后，编辑node_modules/markdown-it-emoji/index.js文件，最终文件像:

'use strict';
var emojies_defs      = require('./lib/data/full.json');
var emojies_shortcuts = require('./lib/data/shortcuts');
var emoji_html        = require('./lib/render');
var emoji_replace     = require('./lib/replace');
var normalize_opts    = require('./lib/normalize_opts');
var twemoji           = require('twemoji')  //添加twemoji
module.exports = function emoji_plugin(md, options) {
  var defaults = {
    defs: emojies_defs,
    shortcuts: emojies_shortcuts,
    enabled: []
  };

  var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));

  md.renderer.rules.emoji = emoji_html;
  //使用 twemoji 渲染
  md.renderer.rules.emoji = function(token, idx) {
    return twemoji.parse(token[idx].content);
  };
  md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
};

• 最后一步，css控制表情

只须要在主题CSS中添加你的CSS代码就好了

.emoji{
   //your style
}

关于图片被绑定这个问题，须要本身去排查，每一个主题的写法有差别，经过dom追踪来查看，进行排除
个人修改在 theme/source/js/main.js

哈哈，如今能够显示了吧，我先来一个

代码空行问题

问题提出：

代码1

代码2

代码3

显示是这样的：

问题在于：中间的空行，全在两边啦，这就致使，代码块渲染的时候，中间不能有空行，这显然是不合理的
为何在两边呢？
由于空行渲染为

<div class="line"></div>

内容为空，高度为零了，注意到前面的标号从1到n的，因此出现这种状况，知道状况，修改就有不少办法了，下面是我用的一种办法
必须修改Hexo源码了，修改以下：

我是采用了，把div的高度固定在20px;这样解决了代码块中间空行的问题

好了，Hexo 的解说到此结束了，若是之后有更新的话，博文也会同步的哟，欢迎大神提出意见！！

参考资料

1. Hexo官方网站 : https://hexo.io/

2. Hexo建立我的博客 : http://www.jianshu.com/p/a52b68794a6b

3. Hexo提交搜素引擎百度和谷歌 : http://www.cnblogs.com/tengj/p/5357879.html

4. Hexo官方网站 : https://hexo.io/

5. Hexo添加emoji : http://very9s.net/post/hexo-support-emoji/