title:Hexo 博客主题个性化
tags:
- Hexo
- 主题个性化
categories: 实用教程
description: Hexo 博客主题的美化,添加一些实用功能,定制你的专属博客
本文将讲述一些博客主题的美化、实用功能的添加,不同主题可能方法有些不同(本文以作者 luuman 的 spfk 主题为例)
– 添加评论系统
主流的评论系统有很多,比如:网易云跟帖、多说、友言、畅言、来必力(LiveRe)、Disqus、Valine、Gitment等等,目前网易云跟帖、多说、友言都已经关闭了,还有些可能需要翻墙,比较麻烦,百度了一下,最后还是选择了来必力评论系统
进入来必力官网,注册一个账号(注册时可能需要翻墙)
注册完毕之后,登录,进入安装页面,选择 City 免费版安装,安装之后你会得到一段代码
我们打开主题文件下的 _config.yml 文件,添加如下代码:
在 \themes\hexo-theme-spfk\layout\_partial\comments 文件夹下新建一个 livere.ejs 的文件,在里面填写来必力提供的代码:
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="这里是你的uid">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
打开 \themes\hexo-theme-spfk\layout\_partial\article.ejs 文件,在适当位置添加如下红框中的代码:
完成以上操作之后,我们就可以使用来必力评论系统了
– 添加卡通人物
我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物,还能根据你鼠标位置摇头,瞬间被吸引到了,赶紧也给自己博客添加一个吧!点击此处进入该项目地址
输入如下命令获取 live2d :
$ npm install --save hexo-helper-live2d
输入以下命令,下载相应的模型,将 packagename 更换成模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者的博客
$ npm install packagename
打开站点目录下的 _config.yml 文件,添加如下代码:
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-haruto #模型选择
display:
position: right #模型位置
width: 150 #模型宽度
height: 300 #模型高度
mobile:
show: false #是否在手机端显示
设置好过后我们就拥有了一个卡通人物