hexo博客优化日志

置顶 | 发表于 | 更新于: | 分类于 | 阅读次数:

由于各种原因，网站会有各种变化以及配置的增加，以日志记下改动

搭建教程和常见问题

2019年11月16日更新

修改文章的间距。
原先文章之间间距过大，调整一下，修改文件themes/next/source/css/_schemes/Mist/_post-expanded.styl

1
.post { margin-top: 60px; }

原先是120px，我修改为60px。注意选择你对应的主题进行修改，我这里使用的Mist，因此修改这个。

2019年8月18日更新

增加豆瓣读书

1.安装插件：

1
npm install hexo-douban --save

2.在主站点配置文件增加以下内容，注意是主站点配置文件不是主题配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
  user:  # 个人豆瓣ID
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000

如果不需要电影和游戏部分可以注释掉，注意，我在使用的时候发现如果把builtin设置为true，最后没有获取到书籍信息。

3.修改主题配置文件，在菜单那里增加一项：

1
书籍: /books/ || book

4.执行命令生成豆瓣读书页面：

1
hexo douban

5.继续其他内容的生成和部署，注意部署要使用hexo deploy了，不能用简写的hexo d，因此douban简写也是d。

2019年4月15日更新

增加cnzz站点统计PV，UV等信息

1.注册友盟账号:https://www.umeng.com/
2.选择-产品-网站统计添加要统计的网站信息
3.站点设置-获取代码，注意是复制图中所示的代码之一，而不是前面的代码，否则只会显示图标而不显示统计结果。

cnzz统计

找到主题下cnzz的文件，例如next主题修改/next/layout/_third-party/analytics/cnzz-analytics.swig
文件内容如下：

1
2
3
4
5
6
{% if theme.cnzz_siteid %}
<div>

这里替换成你复制的内容
</div>
{% endif %}

添加完成后，记得修改next主题配置文件，将cnzz相关信息修改：

1
cnzz_siteid: 这里替换成你自己的id

效果可访问https://www.yanbinghu.com。

文章添加置顶功能

1.安装插件：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

2.修改样式，打开next/layout/_macro/post.swig，找到class为post-meta的div,插入下面的内容：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="green">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

使用时，只需要在文章的开头加：

1
top: true

即可。

置顶

效果可访问https://www.yanbinghu.com。

添加标签云

安装插件：

1
npm install hexo-tag-cloud --save

打开next/layout/_custom/sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

效果可访问https://www.yanbinghu.com。

2019年3月8日更新

解决出现mixed content的问题

某篇文章内容空白，打开控制台发现下面的内容：

1
Mixed Content: The page at 'https://www.yanbinghu.com/2019/03/09/61352.html' was loaded over HTTPS, but requested an insecure script 'http://www.qq.com/404/search_children.js'. This request has been blocked; the content must be served over HTTPS.

发现是网站https访问的，但是我的404页面中又使用了http访问，因此导致mixed content的错误。
解决方法：
修改404页面，将http改为https。

2019年2月4日更新

解决百度分享不显示的问题

百度分享不支持https,因此无法显示。解决方法：
https://github.com/hrwhisper/baiduShare

将api/js/conf/define.js中的https://github.com/hrwhisper/baiduShare/修改为/
将next主题下的layout/_partials/share/baidushare.swig中的//bdimg.share.baidu.com去掉
注明：后续未能生效，去掉

2019年2月27日更新

优化首页标题

修改next主题配置文件，将index_with_subtitle改为true，这样网站的标题将会由主标题和子标题组成。
这样标题就变成了网站名称-网站描述的格式。

2019年1月31日更新

hexo博客seo

1.增加页面关键字，修改next主题配置文件中的keywords:

1
keywords: "C语言,Cpp,Linux,Go,Python,算法"

2019年1月29日更新

增加友情链接

修改next主题配置，增加友情链接

修改版权声明信息

修改next主题下的language/zh-Hans.yml中的版权声明相关内容即可。

2019年1月28日更新

解决hexo 公式渲染不完整的问题

原来的渲染引擎有问题，需要卸载，并重新安装完好的MathJax渲染引擎：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

2018年12月13日更新

增加google站点地图

安装插件：

1
npm install hexo-generator-sitemap --save

特别注意，配置文件中的url需要填写成你自己网站的全地址，例如，我的url地址是https://www.yanbinghu.com

2018年12月11日更新

解决卜算子计数脚本失效问题

原因：通过浏览器右键检查元素查看控制台可以看到，有一个js文件加载失败。
打开next主题next/layout/_third-party/analytics/busuanzi-counter.swig 中卜算子脚本地址
修改为：https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

2018年9月5日更新

博客内容免密部署

方法：
本地生成ssh key，并部署到github或coding上去，并且修改_config.yml deploy的repository属性

1
2
#repository: https://github.com/yonghuming/yonghuming.github.io.git 
repository: [email protected]:yonghuming/yonghuming.github.io.git #yonghuming为自己的github账户名

让百度收录网站地址

与google收录类似，但是时间比较长，并且由于github屏蔽了百度爬虫，因此在百度自动爬取时会出现403错误。

强制https访问网站

github pages默认情况下是http访问的，有时候http会被浏览器标识为不安全，因此，需要更改github pages的设置，强制https访问网站。
设置方法：进入github pages项目—>setting—>勾选Enfoce HTTPS

2018年9月4日更新

添加微信公众号

1
2
3
4
wechat_subscriber:
  enabled: true
  qcode: /pictures/qrcode.jpg   #二维码路径
  description: 欢迎关注个人微信公众号#描述

2018年6月2日更新

将jiathis分享更换为百度分享

由于jiathis分享已停止服务，因此将其更换为百度分享。

文章底部添加版权声明

将配置文件的post_copyright的enable选项设为true即可。

2017年10月22日更新

修改字体

修改字体大小，可通过修改/source/css/_variables/base.styl
中的font-size-base，这是修改除标题以外的其他内容字体大小。
code-font-size修改代码字体大小。
font-family-base 修改字体

2017年10月21日更新

修改链接样式

修改文件source\css_common\components\post\post.styl
增加内容

1
2
3
4
5
6
7
8
9
10
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

增加gitment和gitalk评论系统

具体内容见文章hexo 博客next主题集成gitment或者gitalk评论系统

修改tag标签

修改layout/_macro/post.swig
搜索 rel=”tag”>#，将 # 换成

2017年7月29日更新

添加RSS订阅

npm install hexo-generator-feed --save

增加友情链接

更新关于我页面

文章添加更新日期

2017年7月28日更新

1.添加来必力评论系统

由于网易跟帖停止服务，将跟帖评论系统更换为来必力评论系统。

在https://livere.com/注册并添加你的网站，同时
修改next主题配置文件

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: ××××××××××××××××××

目前来看，来必力支持的第三方登录比较多，包括微信，qq，github，领英，豆瓣，google+，facebook等主流社交账号登录。

2.添加打赏功能

修改配置文件

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /wechatpay.jpg
alipay: /alipay.jpg

wechatpay.jpg 和alipay.jpg分别是微信和支付宝的收款二维码。可放在hexo的resource目录下。

3.添加文章的字数统计和阅读时长统计

修改配置文件

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

另外，在hexo根目录下执行命令

1
npm i --save hexo-wordcount

安装成功后即可。

4添加站内搜索

 安装hexo-generator-search

 npm install hexo-generator-searchdb --save

在站点的_config.yml中添加

search:
path: search.xml
field: post
format: html
limit: 10000

同时在next主题中开启local search

5.问题

守望 wechat
关注公众号[编程珠玑]获取更多原创技术文章
出入相友，守望相助！