hexo进阶

发表于   |  更新于   |   分类于   |  

在编辑hexo还是遇到很多问题，下面详细介绍一下，我遇到了那些，是怎么解决的。这也是一个进阶流程。

修改主题

原生的主题提供的功能太少了，换了主题hexo-theme-zero，修改了一些源代码，稍后会生成新主题。

换了主题后，竟然不能显示中文。

原来在根目录配置这么写的。

1
_config.yml language: zh-Cn

发现主题有language文件夹，发现要改成这样。

1
_config.yml language: zh-Hans

在编辑文档，需要隐藏下面的部分添加下面代码，即可只显示文章一部分。

1
<!--more-->

ui修改

这需要一些前端基础。
直接修改了css文件，更换了背景图片。
发现了屏幕过小，sidebar没有了，所以增加了手机适配，增加了主题图片，就是那个手机端的蜗牛。

增加页面加载，load效果

研究了一下原主题，页面加载出现的load 效果。使用了motion-ui。
为了给主题图片新加这个效果，修改如下
在主题 source\css_schemes\default_logo.styl 添加

1
2
3
4
5
6
7
8
9
10
11
12
13
.custom-logo-image2 {
  display:none;
}
@media (max-width: 767px){
  .custom-logo-image2 {
    margin: 0 auto;
    max-width: 80px;
    display:inline-block;
    border-radius: 40px;
    margin-top: 22px;
  }
}

在 主题\source\js\motion.js 里

1
2
3
4
5
6
var $customLogoImage2 = $('.custom-logo-image2');
hasElement($customLogoImage2) && sequence.push({
    e: $customLogoImage2,
    p: {opacity: 1, top: 0},
    o: { duration: 200 }
  });

添加评论

注册多说账号，按照顺序操作即可。
后来发现，点击回复后，跳到了yoursite.com
根目录的配置 文件，url要改成线上的地址才行。

添加百度系列

为了获取网站分析数据，首先得去注册一下，百度统计账号。按照官网操作即可。还要添加上站内搜索，

百度认证

认证地址
选择HTML标签验证，出现了35错误。没有找到相关错误文档。
过了10分钟，我再试一次，就成功了。

百度推送

在 theme的 _config.yml 文件添加了一个属性
baidu_site_autopropelling: true
在 footer.swig 添加

1
2
3
4
5
6
7
8
9
10
{% if theme.baidu_site_autopropelling}{%}
  <script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

站内搜索

主题原来配置的swifttype 免费多了很多限制。准备改用tinysou，但网址无法访问了，无法申请key。

用上了百度搜索，pc版和mobile版，是分开的，太不好用了。现在搜索关了。过阵子再看吧。

演示demo

添加了demo目录。存放代码demo演示
打开了about导航栏，在about/index.md 加入连接demo 代码。