Hexo的个性化配置(二)

接上一篇的Hexo的个性化配置,都是一些提高网站个性化的配置,只是搭建一个简单的Hexo的网站的话,查看Hexo的使用就行.可能写的比较啰嗦,详细还是很详细的,也是自己就出Hexo的一个记录.

1.Hexo之文章阅读结束后出现感谢大家的阅读!

添加新的文件

修改下面路劲下的文件:

/themes/next/layout/_macro 路劲下新建文件:

文件名称: passage-end-tag.swig

并且添加下面内容的标签-内容如下:

<div>
{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读!-------------</div>
{% endif %}
</div>

将新建的添加到 post.swig文件中

文件的路劲: themes/next/lauyout/_macro/post.swig 文件中.

展示图片:

注意我没有在主题的配置文件中添加下面的代码最后也显示正常.我试试配置之后出现什情况.

配置的如下:

# 文章末尾添加“本文结束”标记
passage_end_tag:enabled: true

最后的结果是也没有什么变化,如果大家设置完毕之后出现不显示字体,可以尝试在主题的配置文件中添加这个配置,虽然不一定可以解决这个问题,也算是一种尝试.

2.实现点击个人图标实现图片的旋转

在主题下面的资源中修改工具栏的样式.

路劲: themes/next/source/css/_common/components/sidebar/sidebar-author.style

路劲的展示图片:

添加的代码如下:

    /* 头像圆形 */border-radius: 80px;-webkit-border-radius: 80px;-moz-border-radius: 80px;box-shadow: inset 0 -1px 0 #333sf;/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*//* 鼠标经过头像旋转360度 */-webkit-transition: -webkit-transform 1.0s ease-out;-moz-transition: -moz-transform 1.0s ease-out;transition: transform 1.0s ease-out;
}img:hover {/* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused;animation-play-state:paused;*//* 鼠标经过头像旋转360度 */-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);transform: rotateZ(360deg);
}/* Z 轴旋转动画 */
@-webkit-keyframes play {0% {-webkit-transform: rotateZ(0deg);}100% {-webkit-transform: rotateZ(-360deg);}
}
@-moz-keyframes play {0% {-moz-transform: rotateZ(0deg);}100% {-moz-transform: rotateZ(-360deg);}
}
@keyframes play {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}}

添加的位置如下:

结束位置如下:

3.文章中代码块的样式的自定义

之前的样式展示:

修改的演示的路劲:

/root/blog/themes/next/source/css/_custom下面的custom.styl文件

添加的内容如下:

// Custom styles.code {color: #ff7600;background: #fbf7f8;margin: 2px;}// 大代码块的自定义样式.highlight, pre {margin: 5px 0;padding: 5px;border-radius: 3px;
}
.highlight, code, pre {border: 1px solid #d6d6d6;
}

最后的展示结果表示很难看,连接划过之后变成黄色.大段的代码块非常的难看.

自己最后注释掉自定义的样式.

4侧边脸社交图标的设置

修改的是主题配置文件:

关键字就是: social 社交的意思

自己可以选择的图标的库: http://fontawesome.io/icons/

最后自己的配置:

结果的展示:

5.在网站的底部加上访问数量

修改的代码途径:

/themes/next/layout/_partials.swig 文件

js代码如下:

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

这个url地址: https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js

访问后的展示图片如下:

添加访问的统计的代码:

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">我的网站的访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

图片的展示:

最后展示结果:

6.实现网站底部对字数的统计

第一步安装wordcount

在博客的根目录下面执行下面的命令:

npm install hexo-wordcount --save

安装展示图片:

之后修改的文件的位置;

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info"><div class="powered-by"></div><span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

放置的位置的展示图片:

直接放置在最后面就可以了!

最后的展示页面:

快速安装插件后在主题配置文件中开启文章的字数统计和站点的字数统计和阅读大体的时长

还有就是阅读时间等在我们安装上面的插件之后,可以在主题的配置文件中开启.

我们看到是wordcount是关闭的,和阅读时间都是关闭的.
我们打开看看.

最后是展示结果

我们可以看到文章的字数统计和阅读的时长

我们在可以看到一个是主题配置之后出现的全站的字数,一个是自己在foot.swig文件中配置后出现的效果.

7.实现访问博客时候在展示的图标

favicon : 英文含义就是网站图标

也就是在访问博客的时候在浏览器上显示的图标标就是现在设置的图标.
格式都是 .ico的格式.

选择格式的连接地址: http://www.easyicon.net/

大小是 32*32px的大小; 之后下载,重命名为 favicon.ico格式.

之后的操作就是在主题的配置文件中进行配置.

图片上传的位置: themes/next/source/image

并且在主题的配置文件中进行配置:

favicon: small: /images/favicon.icomedium: /images/heart_bulb_stars_16px_1209625_easyicon.net.ico

图片的展示:

说明一点,在hexo 3.0之后主题配置文件中对于网站的图标的展示分大小 small 和medium ,在上面的选择图标的位置选择16*16px和32*32px的,上传,在主题配置文件中设置就OK了.

原先的图片展示:

修改后图片展示:

8.添加网页顶部的加载条

在最新的hexo 3.0 中可以直接在主题的配置文件中修改:

看到 pace 是false我们直接修改为true 后面的都是加载的样式,我们可以自己选择.

注意的是 pace_theme: 才是我们选择的.

暂时没有实现,不知道哪里的设置出错了.

9.文章底部添加版权信息

第一个新建的问价路劲如下: ###

themes/next/layout/_macro 新建文件 my-copyright.swig 文件

添加的代码如下:

    {% if page.copyright %}
<div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><!-- JS库 sweetalert 可修改路径 --><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p><p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p><p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script> var clipboard = new Clipboard('.fa-clipboard');$(".fa-clipboard").click(function(){clipboard.on('success', function(){swal({   title: "",   text: '复制成功',icon: "success", showConfirmButton: true});});});
</script>
{% endif %}

第二个新添加的文件:

路劲如下: themes/next/source/css/_common/components/post/my-post-copyright.styl :

代码如下:

    .my_post_copyright {width: 85%;max-width: 45em;margin: 2.8em auto 0;padding: 0.5em 1.0em;border: 1px solid #d3d3d3;font-size: 0.93rem;line-height: 1.6em;word-break: break-all;background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {display: inline-block;width: 5.2em;color: #b5b5b5;font-weight: bold;
}
.my_post_copyright .raw {margin-left: 1em;width: 5em;
}
.my_post_copyright a {color: #808080;border-bottom:0;
}
.my_post_copyright a:hover {color: #a3d2a3;text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {color: #000;
}
.my_post_copyright .post-url:hover {font-weight: normal;
}
.my_post_copyright .copy-path {margin-left: 1em;width: 1em;+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {color: #808080;cursor: pointer;
}

修改的文件一

修改的文件路径: next/layout/_macro/post.swig 文件

添加的代码如下:

<div>{% if not is_index %}{% include 'my-copyright.swig' %}{% endif %}
</div>

添加的路劲如图所示:

修改的文件二

在修改一个文件: 路劲如下: next/sources/css/_common/components/post/post.styl

具体的展示图片如下:

最后一步就是设置 copyright: true 我们可以修改一下子模板根目录/scaffolds/post.md文件.

最后的结果展示:

10.隐藏底部的强力驱动 power by hexo

修改的就是是 footer.swig 文件

路劲: themes/next/layout/_partials/footer.swig

结果展示: