Hexo + Github 个人博客设置以及优化

最新推荐文章于 2021-05-10 22:39:24 发布

weixin_30624825

最新推荐文章于 2021-05-10 22:39:24 发布

阅读量267

点赞数

文章标签：人工智能 json

原文链接：http://www.cnblogs.com/memento/p/10569566.html

版权

原文地址: Hexo + Github 个人博客设置以及优化

一、博客设置

分类、标签云、关于等页面

在站点目录下分别执行:

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[背景多个点间随机连线]

src: theme-next-canvas-nest

主题配置文件中配置脚本:

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>

文章加密访问

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: hexo-symbols-count-time

安装包

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(){
    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>

网站的 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'

博文置顶

参考:

卸载原装的 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 %}

顶部进度条

参考: 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-osx | pace-theme-minimal
pace_theme: pace-theme-minimal

本地搜索

参考: hexo-generator-searchdb

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

TODO: Firefox 浏览器下失效

评论模块

valine
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

参考: 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	覆盖文章网址