一、博客设置
在站点目录下分别执行:
hexo new page "categories" # 新增分类 hexo new page "tags" # 新增标签 hexo new page "about" # 新增关于 可以在对应的 index.md 中添加 comments: false 来关闭评论功能;
然后再主题配置文件 _config.yml 中打开注释:
menu: 首页: / || home 关于: /about/ || user 标签: /tags/ || tags 分类: /categories/ || th 归档: /archives/ || archive 主题配置文件中配置脚本:
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 主题配置文件 _config.yml 中编辑:
avatar: [头像路径]
修改模板 /themes/next/layout/_macro/post.swig, 搜索 rel="tag">#, 将 # 换成 <i class="fa fa-tag"></i>
(function(){ if('{{ page.password }}'){ if (prompt('请输入密码') !== '{{ page.password }}'){ alert('密码错误'); history.back(); } } })(); 写文章时加入:
--- title: 2018 date: 2018-10-25 16:10:03 password: 123456 --- 在博客配置文件中设置:
skip_render: README.md 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. 在 themes/layout/_parrials/footer.swing 中添加:
<span id="sitetime"></span> <script language=javascript> function siteTime(){ window.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> 主题配置文件中设置:
# 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 TODO: 首页 index.html 会出现异常，无法用 gulp 压缩
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' 参考:
卸载原装的 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 %} # 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-osx | 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 在主题配置文件中启用:
# Follow me on GitHub banner in right-top corner. github_banner: enable: true permalink: https://github.com/Memento1990 title: Follow me on GitHub TODO: Firefox 浏览器下失效
在主题配置文件中启用:
# 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 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, [同步执行相关压缩方法]…
四、其他设置
References
原文链接：https://www.cnblogs.com/memento/p/10569566.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/2323
