一, 博客设置
分类, 标签云, 关于等页面
在站点目录下分别执行:
- hexo new page "categories" # 新增分类
- hexo new page "tags" # 新增标签
- hexo new page "about" # 新增关于
可以在对应的 index.md 中添加 comments: false 来关闭评论功能;
然后再主题配置文件 _config.YAML 中打开注释:
menu:
首页: / || home
关于: /about/ || user
分类: /categories/ || th
归档: /archives/ || archive
网站背景 canvas_nest[背景多个点间随机连线]
src:
主题配置文件中配置脚本:
- canvas_nest: //cdn.jsdelivr.NET/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.JS
- canvas_nest_nomobile: //cdn.jsdelivr.NET/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.JS
并启用:
- canvas_nest:
- enable: true
- onmobile: true # display on mobile or not
- color: "0,0,255" # RGB values, use ',' to separate
- opacity: 0.5 # the opacity of line: 0~1
- zIndex: -1 # z-index property of the background
- count: 99 # the number of lines
信息栏头像
avatar: [头像路径]
修改文章底部带 # 的标签
修改模板 /themes/next/layout/_macro/post.swig, 搜索 rel="tag">#, 将 # 换成 <i class="fa fa-tag"></i>
文章加密访问
TODO: 发布后无效
在 themes/*/layout/_partials/head/head.swig 中在 </script> 前添加代码:
- (function(){
- if('{{ page.password }}'){
- if (prompt('请输入密码') !== '{{ page.password }}'){
- alert('密码错误');
- history.back();
- }
- }
- })();
写文章时加入:
- ---
- title: 2018
- date: 2018-10-25 16:10:03
- password: 123456
- ---
添加博客项目 README.md, 跳过渲染
在博客配置文件中设置:
skip_render: README.md
字数统计 + 阅读时间
src:
安装包
NPM install hexo-symbols-count-time --save
在博客配置文件中启用:
- symbols_count_time:
- symbols: true
- time: true
- total_symbols: true
- total_time: true
在主题配置文件中设置:
- # Post wordcount display settings
- # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
- symbols_count_time:
- separated_meta: true
- item_text_post: true
- item_text_total: false
- awl: 4 # Average Word Length (chars count in Word). Default: 4.
- wpm: 275 # Words Per Minute. Default: 275.
聊天模块 DaoVioce
网站运行时间
在 themes/layout/_parrials/footer.swing 中添加:
- <span id="sitetime"></span>
- <script language=JavaScript>
- function siteTime(){
- Windows.setTimeout("siteTime()", 1000);
- var seconds = 1000;
- var minutes = seconds * 60;
- var hours = minutes * 60;
- var days = hours * 24;
- var years = days * 365;
- var today = new Date();
- var todayYear = today.getFullYear();
- var todayMonth = today.getMonth()+1;
- var todayDate = today.getDate();
- var todayHour = today.getHours();
- var todayMinute = today.getMinutes();
- var todaySecond = today.getSeconds();
- var t1 = Date.UTC(2018,06,07,12,00,00); // 设置建立网站的时间
- var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
- var diff = t2-t1;
- var diffYears = Math.floor(diff/years);
- var diffDays = Math.floor((diff/days)-diffYears*365);
- var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
- var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
- var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
- document.getElementById("sitetime").innerhtml="已运行"+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
- }
- siteTime();
- </script>
网站的 favicon
主题配置文件中设置:
- # For example, you put your favicons into `hexo-site/source/images` directory.
- # Then need to rename & redefine them on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
- favicon:
- #small: /images/favicon-16x16-next.PNG
- small: /images/Memento.ico
- medium: /images/favicon-32x32-next.PNG
- apple_touch_icon: /images/apple-touch-icon-next.PNG
- safari_pinned_tab: /images/logo.svg
- #android_manifest: /images/manifest.JSON
- #ms_browserconfig: /images/browserconfig.xml
NexT 主题添加多字体
TODO: 首页 index.HTML 会出现异常, 无法用 gulp 压缩
修改
source/CSS/_variables/base.styl
文件中的字体获取方法:
- get_font_family(config) {
- custom_family = hexo-config('font.' + config + '.family')
- // 在这里把引号去除
- return custom_family is a 'string' ? unquote(custom_family) : null
- }
再修改主题配置文件:
- global:
- # external: true will load this font family from host.
- external: true
- family: '"Consolas", "Helvetica Neue", Helvetica, Arial'
博文置顶
参考:
https://github.com/hexojs/hexo-generator-index
解决 Hexo 置顶问题
卸载原装的 hexo-generator-index, 并安装 hexo-generator-index-pin-top:
- NPM uninstall hexo-generator-index --save
- NPM install hexo-generator-index-pin-top --save
然后在文章中添加 top:
- ---
- title: 2018
- date: 2018-10-25 16:10:03
- top: 10
- ---
top 值越大位置越靠前;
设置置顶标记, 定位 /themes/next/layout/_macro/post.swig 的 <div class="post-meta"> 标签下:
- {% if post.top %}
- <i class="fa fa-thumb-tack"></i>
- <font color=7D26CD > 置顶 </font>
- <span class="post-meta-divider">|</span>
- {% endif %}
顶部进度条
参考: https://github.com/theme-next/theme-next-pace
将项目中的 CSS 和 JS 文件下载放置到
/themes/next/source/lib/pace/
目录下;
在主题配置文件中启用:
- # Progress bar in the top during page loading.
- # Dependencies: https://github.com/theme-next/theme-next-pace
- pace: true
- # Themes list:
- # pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
- # pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
- # pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-Mac-OS X | pace-theme-minimal
- pace_theme: pace-theme-minimal
本地搜索
参考:
NPM install hexo-generator-searchdb --save
在博客配置文件中添加:
search:
path: search.xml
- field: post
- format: HTML
- limit: 10000
然后在主题配置文件中启用本地查询:
- # Local search
- # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
- local_search:
- enable: true
- # If auto, trigger search by changing input.
- # If manual, trigger search by pressing enter key or search button.
- trigger: auto
- # Show top n results per article, show all results by setting to -1
- top_n_per_article: 1
- # Unescape HTML strings to the readable one.
- unescape: false
返回顶部 + 当前浏览进度
在 next 主题配置文件中启用:
- back2top:
- enable: true
- # Back to top in sidebar.
- sidebar: true
- # Scroll percent label in b2t button.
- scrollpercent: true
右上角 / 左上角的 Fork me on GitHub
在主题配置文件中启用:
- # Follow me on GitHub banner in right-top corner.
- github_banner:
- enable: true
- permalink: https://github.com/Memento1990
- title: Follow me on GitHub
内容分享, AddThis
TODO: Firefox 浏览器下失效
评论模块
- https://valine.js.org/
- gitment
- gitalk
- gitter
- LiveRe(来必应)
数据统计与分析 不蒜子
在主题配置文件中启用:
- # Show Views / Visitors of the website / page with busuanzi.
- # Get more information on http://ibruce.info/2015/04/04/busuanzi
- busuanzi_count:
- enable: true
- total_visitors: true
- total_visitors_icon: user
- total_views: true
- total_views_icon: eye
- post_views: true
- post_views_icon: eye
二, 文章设置
文章末尾结束标记
在路径 \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-heartbeat"></i > 感谢您的阅读 -------------</div>
- {% endif %}
- </div>
接着打开 \themes\next\layout\_macro\post.swig 文件, 在 post-body 之后, post-footer 之前添加代码 (post-footer 之前两个 DIV):
- <div>
- {% if not is_index %}
- {% include 'passage-end-tag.swig' %}
- {% endif %}
- </div>
最后再主题配置文件中启用:
- # 文章末尾添加 "本文结束" 标记
- passage_end_tag:
- enabled: true
复制文本版权信息
文章底部版权信息
网页地址 hexo-link
参考: https://github.com/acwong00/hexo-addlink
安装
NPM install hexo-addlink --save
在博客配置文件中进行设置:
- addlink:
- before_text: hello # text before the post link
- after_text: bye # text after the post link
增加首页中显示 "阅读全文"
在主题配置文件中启用:
- # Automatically Excerpt. Not recommend.
- # Use <!-- more --> in the post to control excerpt accurately.
- auto_excerpt:
- enable: true
- length: 150
三, 优化设置
修改字体加载源
修改主题配置文件:
- font:
- enable: true
- # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
- host: //fonts.lug.ustc.edu.cn # 中科大
- # //fonts.geekzu.org # 极客族
- # //fonts.CSS.network # 捷速网络 香港
博文压缩
安装 gulp 相关包:
- NPM install gulp -g
- NPM install gulp-minify-CSS gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin gulp --save
在 Hexo 站点根目录下新建 gulpfile.JS 脚本文件, 代码:
- var gulp = require('gulp');
- var minifycss = require('gulp-minify-css');
- var uglify = require('gulp-uglify');
- var htmlmin = require('gulp-htmlmin');
- var htmlclean = require('gulp-htmlclean');
- var imagemin = require('gulp-imagemin');
- var del = require('del');
- var Hexo = require('hexo');
- // 清除 public 文件夹
- gulp.task('clean', function () {
- return del(['public/**/*']);
- });
- // 利用 Hexo API 来生成博客内容, 效果和在命令行运行: hexo g 一样
- // generate HTML with 'hexo generate'
- var hexo = new Hexo(process.cwd(), {});
- gulp.task('generate', function (cb) {
- hexo.init().then(function () {
- return hexo.call('generate', {
- watch: false
- });
- }).then(function () {
- return hexo.exit();
- }).then(function () {
- return cb()
- }).catch(function (err) {
- console.log(err);
- hexo.exit(err);
- return cb(err);
- })
- })
- // 压缩 public 目录 CSS
- gulp.task('minify-css', function () {
- return gulp.src('./public/**/*.css')
- .pipe(minifycss())
- .pipe(gulp.dest('./public'));
- });
- // 压缩 public 目录 HTML
- gulp.task('minify-html', function () {
- return gulp.src('./public/**/*.html')
- .pipe(htmlclean())
- .pipe(htmlmin({
- removeComments: true,
- minifyJS: true,
- minifyCSS: true,
- minifyURLs: true,
- }).on('error', function(e){
- console.log(e);
- }))
- .pipe(gulp.dest('./public'))
- });
- // 压缩 public/JS 目录 JS
- gulp.task('minify-js', function () {
- return gulp.src('./public/**/*.js')
- .pipe(uglify())
- .pipe(gulp.dest('./public'));
- });
- // 压缩 public 目录下的所有 img: 这个采用默认配置
- gulp.task('minify-img', function () {
- return gulp.src('./public/images/**/*.*')
- .pipe(imagemin())
- .pipe(gulp.dest('./public/images'))
- })
- // 同上, 压缩图片, 这里采用了: 最大化压缩效果.
- gulp.task('minify-img-aggressive', function () {
- return gulp.src('./public/images/**/*.*')
- .pipe(imagemin(
- [imagemin.gifsicle({ 'optimizationLevel': 3 }),
- imagemin.jpegtran({ 'progressive': true }),
- imagemin.optipng({ 'optimizationLevel': 7 }),
- imagemin.svgo()],
- { 'verbose': true }))
- .pipe(gulp.dest('./public/images'))
- })
- // 执行顺序: 清除 public 目录 → 产生原始博客内容 → 执行压缩混淆
- gulp.task('build', gulp.series('clean', 'generate',
- gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive')), function (cb) {
- });
- gulp.task('default', gulp.series(['build']))
然后每次执行 gulp 命令后就会自动执行 clean, generate, [同步执行相关压缩方法]...
四, 其他设置
文章开头 Front-matter
参数 | 描述 | 默认值 |
---|---|---|
layout | 布局 | |
title | 标题 | |
date | 建立日期 | 文件建立日期 |
updated | 更新日期 | 文件更新日期 |
comments | 开启文章的评论功能 | true |
tags | 标签(不适用于分页) | |
categories | 分类(不适用于分页) | |
permalink | 覆盖文章网址 |
References
hexo 官网 https://hexo.io/zh-cn/
NexT 主题 https://github.com/theme-next/hexo-theme-next
NexT 主题官网 https://theme-next.org/
hexo 的 next 主题个性化教程: 打造炫酷网站
[持续更新] 最全 Hexo 博客搭建 + 主题优化 + 插件配置 + 常用操作 + 错误分析
Hexo Next 博客自定义配置 https://yi-yun.github.io/Hexo-Next-Custom/
打造个性超赞博客 Hexo+NexT+GitHubPages 的超深度优化
NexT 主题优化 https://reishin.me/hexo-next-optimization/
主题配置 http://theme-next.iissnan.com/theme-settings.html
来源: https://www.cnblogs.com/memento/p/10569566.html