Hexo的个性化配置(一)
本片博客是在集成Hexo的博客大家之后的一些个人性话的操作,也是自己的一个学习笔记,从操作到图片的展示,每一个个性化操作都比较详细,例如Hexo的评论集成,Rss订阅到Fork me on github的操作和添加动态背景图等;点击出现桃心的效果和文章加密访问等.
1.Hexo评论集成
学习的连接博客地址: http://blog.csdn.net/qwerty200696/article/details/78836421
这里面集成的是来必力的评论系统.
具体的操作过程:
打开来比力的官网
连接地址如下: https://livere.com/
注册来必力的官网.
也就是邮箱别名和登录密码,之后就是 验证登录;
成功后的页面如下:
安装来比力city版
点击上面的安装进行来比力的安装. 我们使用的当然是免费的版本city.
点击现在安装之后出现的界面:
在这里解释一下子:网站的连接就是你要设置的网页的地址: 我填写的是自己的博客地址: http://116.196.91.100:4000/
网站名称: 自己的博客名称 网站的类型: 个人.
获取申请的代码
点击获取代码:
在我们的hexo的主题中进行配置
我使用主题是next, 我们在我们博客的初始化文件夹中寻找 theme 进入找到 next 打开,对_config.yml打开进行配置:
修改完毕.我们仔细看,还有一个可以配置的commit系统,有言后面是对应的地址,我们可以直接访问获取uid之后进行配置.
最后一步就是在hexo的页面开启
就是在设置tags等出,设置 comments: true 注意空格
最后设置成功后的展示页面
2.设置Fork me on Github
具体的步骤如下:
第一步选取适合自己的样式代码
第一种样式的展示图片:
选取的样式代码的连接在如下的地址(显示的样式字母 fork me on github):
https://github.com/blog/273-github-ribbons
还有一种样式就是图标的样式的选取:
图标的展示图片:
代码的连接地址如下:
http://tholman.com/github-corners/
根据上面的样式和颜色选择自己的喜欢的样式进行代码的复制.
在主题中进行配置
/root/blog/themes/next/layout/_layout.swig文件中进行配置 /root表示的是根目录. next表示的是当前你使用的主题的样式.
具体的配置直接图片中展示:
注意的是: href 后面是自己的github的地址,记得修改哦!
最后就是结果的展示页面:
3.设置Rss订阅
Rss 是什么东西:
来,百度百科连接走一趟: https://baike.baidu.com/item/rss/24470?fr=aladdin#12
用途:
具体的操作过程就是安装Hexo的插件
安转hexo的feed(消息源,类型分为Rss和Atom两种)
安装的位置就在你hexo init初始化的位置,我是直接 hexo init blog,会在根目录下面生成一个blog文件,进入blog进行安装插件.
npm install --save hexo-generator-feed
安装结束的展示图片:
在站点配置文件中进行配置
打开站点的配置文件在最后一行中添加下面的配置:
plugins: hexo-generate-feed
还需要的操作就是 配置主题配置文件
next的主题配置文件修改_config.yml文件中添加:
rss: /atom.xml
最后就是结果的展示图片:
4.文章的输入密码访问
第一步修改主题下面的文件
主要的是修改的主题下面的文件:
themes->next->layout->_partials->head.swig
我使用的next主题 还需要注意的就是这里面的是head.swig 文件不是header.swif文件. 不然是找不到位置的.
script代码如下:
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误！');
history.back();
}
}
})();
</script>
在需要加密文章的页面的配置信息
在页面的配置如下:
在文字页面设置的密码就是需要访问的时候输入的密码.
最后的展示结果展示:
5.关于添加动态页面的设置
关于动态页面的设置:
先上一个连接地址:
我大体的描述一下子:
若果存在canvas_nest
直接在主题配置文件中搜索: canvas_nest
若是存在直接设置为true,说明使用的next版本是在5.1.1之上.
在主题配置文件中不存在
若是在主题的配置文件中没有找到这个文件,那就哪找上面的连接地址来设置.
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
将上面的代码添加到 next/layout/_layout.swig文件中
具体的位置如下: 在 之前添加代码(注意不要放在的后面)
之后在主题的配置文件中配置:
canvas_nest: true
实现点击的桃心效果
添加打js代码地址: http://7u2ss1.com1.z0.glb.clouddn.com/love.js
获取js代码
获取到的js代码:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
新建js代码放置
在/theme/next/source/js/src这个路劲下面,新建love.js,将上面的代码复制进去.
代码放置位置的展示:
配置 _layout.swig文件
在 themes/next/layout/_layout.swig 文件, 最后部分添加:
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
在_layout.swig位置的设置展示:
最后效果的展示区域:
6.修改文章内连接的样式
修改的就是我们在文章中写的关于条状的连接.
修改的文件路劲:
themes/next/sources/css/_common/components/post/post.styl 文件;
添加的css 的样式如下:
.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;
}
}
注意的是: 这个点不要忘记了.选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式.
7.关于Hexo搭建博客的分类
分类: categories
展示图片:
第一步是在主题的配置文件中打开
新建对应的page
hexo new page categories
hexo new page tags
之后就是重新的部署;
会在/sources下面生成对应的文件夹,里面对应的是 index.md文件
修改index.md文件
我们点击分类的时候会将对应的文件夹里面的index.md文件转化为网页展示出来,我们需要在 index.md中添加的就是类型:
type: categories/tags
在文章中的处理
对应的我们在新建文章之后需要的是在 顶部设置 tags或者是categories 是什么的类型.
我们在文章中设置的会在进行分类或者是标签归类在一起.
文章的设置展示样例:
8.Hexo之站点地图的搭建sitemap.xml
也算是第一次接触到站点地图;那么什么是站点地图;
百度走一波: https://baike.baidu.com/item/%E7%AB%99%E7%82%B9%E5%9C%B0%E5%9B%BE/9991876?fr=aladdin
自己话语总结一下子站点地图:
在Hexo初始化的位置执行下面的命令
命令如下:
npm install hexo-generator-sitemap --save
安装百度的sitemap:
重新部署点击就可以看到生成的sitemap.xml
如果部署后没有显示则在站点配置文件中配置
站点配置文件中配置:
# sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
学习的连接地址:
http://viggoz.com/2016/05/17/2016-05-17-hexo3/
成功生成站点地图文件的展示
如上设置,出现,sitemap.xml和baidusitemap.xml 表示站点文件生成.
之后就是百度站点地图的验证
百度站长平台进行验证: https://ziyuan.baidu.com/dashboard/index
第一次会输入一些信息,姓名,职位等信息.
后面就是添加站点:
之后就是站点属性:
最后就是验证网站. 验证的方式都有详细的说明.
下载放置到网站的根目录:
9.配置站点地图后出现的hexo s 命令失效的解决办法
注意了,我们的是这个服务器上还有一个网站,验证的时候出现自动跳转到那个网页上去,验证失败.
而且今天发现我进入 hexo初始化的文件夹里面执行hexo s 的时候出现hexo s 命令不能使用.
展示一下子我自己的hexo的版本:
问题出现的描述:
最后查找单独安装了hexo server ,最后还是老样子,没有解决,看到说在站点的配置文件中不要什么插件的声明,我们想到在设置站点配置文件 的时候出现过对插件的配置.
最后的处理如下: 在站点的配置文件中对插件的声明全部注释掉.
最后完美解决.
10.修改文章后面标签的图标
原先图标的展示页面:
修改模板:
在主题下: themes/next/layout/_macro/post.swig文件:
具体的修改位置:
搜索 rel=”tag”>#，将 # 换成
最后是修改完成的展示: