如何为next主题添加不蒜子统计
打开next主题配置文件_config.yml
搜索busuanzi_count修改为
1 | busuanzi_count: |
完了之后你会发现并不能统计为啥呢,当时我也是一脑袋懵
后来找度娘才发信原来是官网地址变了
那就改吧,没办法只能自己搞了themes\next\layout\_third-party\analytics\busuanzi-counter.swig
你项目的地址找到这个文件打开
我们发现跟官网上不一样白链接替换成
https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
之后
字数统计
用于统计文章的字数以及分析出阅读时间。
在主题配置文件中,搜索wordcount
,设置为下面这样就可以了:
1 | # Post wordcount display settings |
再打开\themes\next\layout\_macro\post.swig
文件,在leancloud-visitors-count后面位置添加一个分割符 |
另外,在/themes/next/layout/_partials/footer.swig
文件endif %}前加上下面代码可以实现在站点底部统计全站字数:
1 | <div class="theme-info"> |
如果无法显示可能是hexo-wordcount插件没有安装,git bash在网站根目录安装一下就可以:
1 | npm install hexo-wordcount --save |
增加版权信息
在目录themes/next/layout/_macro/
下添加my-copyright.swig,代码如下:
1 | {% if page.copyright %} |
在目录themes/next/source/css/_common/components/post/
下添加my-post-copyright.styl:
1 | .my_post_copyright { |
修改themes/next/layout/_macro/post.swig
,在代码:
1 | {% if theme.wechat_subscriber.enabled and not is_index %} |
添加
1 | <div> |
修改themes/next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:
1 | @import "my-post-copyright" |
最后到站点根目录/scaffolds/post.md
,在两个—中间增加一行:copyright: true
个性化优化
设置字体
在主题配置文件中设置,例如:
1 | font: |
设置代码高亮主题
NexT 默认使用的是 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties:
1 | # Code Highlight theme |
设置小型代码块颜色
修改\themes\next\source\css\_variables\base.styl
文件,修改$code-background和$code-foreground的值:
1 | $black-deep = #222 |
1 | // Code & Code Blocks |
修改themes\next\source\css\_custom\custom.styl
文件,加入自定义样式
1 | // 文章``代码块的自定义样式 |
修改themes\next\source\css\_custom\custom.styl
文件,加入自定义样式
1 | //文章内链接文本样式 |
修改themes\next\source\css\_custom\custom.styl
文件,加入自定义样式
1 | // [Read More]按钮样式 |
左上角或右上角的Github样式
具体实现方式便是到样式1或者样式2的网站中选择你喜欢的样式,复制其中的代码到themes/next/layout/_layout.swig
文件中(放在<div class="headband"></div>
的下面),并把href改为你的github地址。
添加背景动画
NexT已经自带了多种背景动画效果,你只需要根据需求在主题配置文件修改其中一个为true即可。
1 | # Canvas-nest |
添加顶部加载条
在主题配置文件中搜索pace:
1 | # Progress bar in the top during page loading. |
修改文章内链接文本样式
修改文件 themes\next\source\css\_common\components\post\post.styl
,在末尾添加如下css样式
1 | // 文章内链接文本样式 |
修改文章底部标签样式
修改/themes/next/layout/_macro/post.swig
,搜索 rel="tag">#
,将 #
换成<i class="fa fa-tag"></i>
文章末尾统一添加“本文结束”标记
在路径\themes\next\layout\_macro
中新建passage-end-tag.swig
文件,并添加以下内容:
1 | <div> |
接着打开\themes\next\layout_macro\post.swig文件,在这个位置wechat-subscriber.swig
上方添加代码:
1 | <div> |
然后打开主题配置文件,在末尾添加:
1 | # 文章末尾添加“本文结束”标记 |
修改作者头像并旋转
打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl
,在里面添加如下代码:
1 | .site-author-image { |
文章添加阴影效果
打开\themes\next\source\css\_custom\custom.styl
,向里面加入:
1 | // 主页文章添加阴影效果 |
修改打赏部分字体动画
Next打赏部分的动画是鬼畜一般的不停地抖动,看着很难受,所以博主把它改为只循环三遍,打开文件themes/next/source/css/_common/components/post/post-reward.styl
,把微信和支付宝的改为如下:
1 | #wechat:hover p{ |
自定义鼠标样式
打开themes/next/source/css/_custom/custom.styl
,添加代码:
1 | // 鼠标样式 |
其中 url 里面必须是 ico 图片,ico 图片可以上传到网上(推荐七牛云图床),然后获取外链,复制到 url 里就行了。
修改文章页宽
打开themes/next/source/css/_variables/base.styl,找到以下字段并修改为合适的宽度:
1 | //$content-desktop-large = 900px |
修改themes/next/layout/page.swig
文件,加入自定义样式:
1 | {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }} |
隐藏底部”强力驱动”内容
修改themes/next/_config.yml
文件,将powered和enable设置为false
最后
1 | hexo g |
更新后你就会发现可以了
如果本文对您有所帮助,请打赏给我吧,我先送个你也红包往下看,你可以把扫到红包打赏个我哦!