Hexo主题Next配置
新建404界面
在站点根目录下,输入hexo new page 404
,在默认Hexo站点下/source/404/index.md
打开新建的404界面,编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下:
1 |
|
静态资源压缩
静态资源压缩
在站点目录下安装插件:
1 | $ npm install gulp -g |
1 | npm install gulp-minify-css --save |
在Hexo站点下添加gulpfile.js
文件,文件内容如下:
1 | var gulp = require('gulp'); |
需要只在每次执行generate命令后执行gulp就可以实现对静态资源的压缩,完成压缩后执行deploy命令同步到服务器:
1 | hexo g |
隐藏网页底部powered By Hexo / 强力驱动
打开themes/next/layout/_partials/footer.swig
,使用<!--
与-->
隐藏之间的代码即可,或者直接删除。位置如图:
各版块透明度修改
内容板块透明
根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl
文件.content-wrap
标签下background: white
修改为:
1 | background: rgba(255,255,255,0.7); //0.7是透明度 |
菜单栏背景
根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl
文件.header-inner
标签下background: white
修改为:
1 | background: rgba(255,255,255,0.7); //0.7是透明度 |
站点概况背景
根博客目录themes\next\source\css\_schemes\Pisces\_sidebar.styl
文件.sidebar-inner
标签下background: white
修改为:
1 | background: rgba(255,255,255,0.7); //0.7是透明度 |
修改然后根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl
文件.sidebar
标签下background: $body-bg-color
修改为:
1 | background: rgba(255,255,255,0.7); //0.7是透明度 |
网站底部字数统计
具体方法实现
切换到根目录下,然后运行如下代码
1 | npm install hexo-wordcount --save |
然后在/themes/next/layout/_partials/footer.swig
文件尾部加上:
1 | <div class="theme-info"> |
添加侧栏推荐阅读
编辑主题配置文件,如下配置即可:
1 | # Blog rolls |
博文置顶
修改hexo-generator-index
插件,把node_modules/hexo-generator-index/lib/generator.js
中代码替换为:
1 | ; |
文章添加Top值,值越大,越靠前:
1 | --- |
网页底部信息隐藏
网页底默认最新一次使用,需要取消since
注释,设定年份
1 | footer: |
显示文章阅读进度百分比
设置方法:
打开themes/next/_config.yml
主题配置文件,找到# Scroll percent label in b2t button
将scrollpercent:
的值,改成true
1 | # Scroll percent label in b2t button |
浏览页面的时候显示当前浏览进度
如果想把top按钮放在侧边栏,打开themes/next
下的_config.yml
,搜索关键字b2t
,把false
改为true
1 | # Back to top in sidebar |
加入valine在线评论
设置效果:
设置方法:
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.
拿到appid
和appkey
之后,打开themes/next/_config.yml
主题配置文件,查找valine
,填入appid
和 appkey
我的配置:
1 | # You can get your appid and appkey from https://leancloud.cn |
Hexo添加阅读次数
next
集成了 leancloud
。可以在leancloud
进行账号注册。
创建一个新的应用。点击应用进入。
创建名称为Counter
的Class
,名称必须为Counter
点击设置 > 应用Key 复制App ID 和 App Key
修改配置文件
在主题themes
目录下有第三方提供的主题配置文件\themes\next_config.yml
打开主题配置文件 添加app_id
和app_key
:
1 | # Show number of visitors to each article. |
Web安全性
为了保证应用的统计计数功能仅应用于自己的博客,你可以在应用 > 设置 > 安全中心的Web安全域名中加入自己的博客域名,保证数据的调用安全。
显示文章热度
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.
设置方法:next
主题集成leanCloud
,打开themes/next/layout/_macro/post.swig
,准备添加℃
1 | {# LeanCloud PageView #} |
插入摄氏度到倒数第三句,如下:
1 | <span>℃</span> |
打开,themes/next/languages/zh-CN.yml
,将views
后的文字描述改为热度.
1 | views: 热度 |
有的版本不一样,打开,themes/next/languages/zh-Hans.yml
,将以下
1 | visitors: 热度 |
然后打开themes/next/_config.yml
找到leancloud_visitors
,将enable:
改成true
,再填上自己LeanCloud
的app_id
和app_key
。
1 | # Show number of visitors to each article. |
添加网站已运行时间
在themes/layout/_parrials/footer.swing
后添加
1 | <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> |
添加头像
打开themes/next下的_config.yml
文件,搜索 Avatar
关键字,修改url的参数
1 | avatar: |
url链接默认是themes/next/source/images
下的avatar.gif
文件,有两种方法修改连接
1、本地连接,不建议用比较大的图片(大于1M文件),加载图片需要时间
1 | url: /images/avatar.gif |
2、图床外链,建议使用
1 | url: http://example.com/avatar.png |
添加站内搜索
设置效果:
设置方法:
安装hexo-generator-searchdb
插件
1 | npm install hexo-generator-searchdb --save |
编辑_config.yml
站点配置文件,新增以下内容到任意位置:
1 | search: |
编辑themes/next/_config.yml
主题配置文件,启用本地搜索功能,将local_search:
下面的enable:
的值,改成true
1 | # Local search |
底部跳动图标实现
注意点:需要到next\layout_partials下的footer.swig
文件中,在你所需要调动的图标所对应的span中增加对应的ID
去到主体的css
文件(next\source\css_variables\custom.styl
,增加以下代码即可
1 | //底部爱心小图标跳动 |
实现统计功能
具体实现方法:在根目录下安装 hexo-wordcount
,运行:
1 | npm install hexo-wordcount --save |
然后在主题的配置文件中,配置如下:
1 | # Post wordcount display settings |
修改界面内容显示区域宽度
Next
主题默认的设置,两边留白的区域很大。当然我们可以修改设置
在themes\next\source\css\_custom的custom.styl
添加下面参数
1 | // 屏幕宽度小于1600px |