hexo+NexT主题下的一些功能优化

填一点坑,好多坑没填啊QAQ

最近在Royce的博客里了解到了还有「双线部署」这种好东西,我记得我当时好像传过coding但是报错了,后来就没有后来了,唔有空的时候去试试(不然有时有打开博客的速度是不咋滴,比起花里胡哨的东西,,还是速度比较实在哇QAQ)


0 一些本博客的效果

大概这几个经常被问到,整理出来⬇️

博客的评论邮件回复系统是怎么实现的?

参考自这个教程:Hexo 优化 — Valine 扩展之邮件通知,valine评论系统+leancloud云引擎,nice!

博客下雪的效果是怎么实现的?

又是一个厉害的教程:JQuery+Html5实现超真实3D雪花飞舞特效

这是我自己部署这个的时候遇到的一点小问题及解决办法:Mixed Content ”The page at ‘xxxdomain’ was loaded over HTTPS, but requested an insecure script ‘xxx’.This request has been blocked.the content must be served over HTTPS“ 的解决办法

图片点击放大查看是怎么实现的?

一个叫「fancybox」的插件

还有一个没人问但是我特别想安利的哈哈哈哈哈哈,macOS下的「iPic图床」太方便啦~给制作人员疯狂打call!

1 标签云

参考自Royce的博客~

github项目地址:https://github.com/MikeCoder/hexo-tag-cloud

安装

先装上这个插件

1
npm install hexo-tag-cloud@^2.1.* --save

部署

不同模版方法不同,我是NexT主题(也就是swig)

themes/next/layout/_custom/sidebar.swig文件里添加这么一段话,这个文件里我之前放的是「revolvermaps小地球」,就会显示下图这样的效果

现在改成下面这段:

1
2
3
4
5
6
7
8
9
10
11
{% 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">
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width=100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}

然后在站点配置文件_config.yml(根目录下的那个)里加上一些设置,随便照自己喜欢设置就好啦~

1
2
3
4
5
6
7
# hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica
textColor: '#535257'
textHeight: 25
outlineColor: '#d5dded'
maxSpeed: 0.4

2 评分小星星

感觉蛮可爱的就加了0.0

在主题配置文件里配置:themes/next/_config.yml,搜索rating,有这么一段,把false改成true,然后照着注释说的去这个网站注册一下https://widgetpack.com获取一个id然后填进去

填一下博客的基本信息

然后进去之后在左上角就可以找到id,填到主题配置文件里

然后在「侧栏」-「rating」-「setting」里可以设置一些东西

比如下图就是设置记录方式,如果选择「social」,那么必须通过下面那些社交登陆啥的,感觉不方便呐,所以选择「ip地址」或者「cookie」

然后在「侧栏」-「site」-「setting」里勾选「Private」选项

然后如果还想加点什么的话,就去themes/next/layout/_macro/post.swig这个里面直接改

3 添加版权声明

在主题配置文件themes/next/_config.yml里搜索「copyright」,然后把对应的值改成true就好啦

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2020 LeFlacon

奶茶一杯 快乐起飞

支付宝
微信