文档章节

HEXO之NEXT主题优化配置

下次用oschina
 下次用oschina
发布于 02/24 16:11
字数 1317
阅读 18
收藏 1

网上已经有很多NexT主题配置的教程,一搜一大堆; 所以我这边就简单说一下我个人(没那么搞)的一些配置,这些配置大部分在主题上已经存在,只需要将其value设为true,或者先下载dependency在设为true

基础配置

  • 网站图标
favicon: 
     small: /images/icon.jpeg
     apple_touch_icon: /images/icon.jpeg
     safari_pinned_tab: /images/logo.svg
     

  • 网站底部小人换成红心形
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015  #此处可设置网站建站时间

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#808080"

  • 备案
 beian:
    enable: true
    icp: 你的备案号
    
  • 社交网站图标链接(把想要显示的网站前面#去掉,改为自己的网站链接,并将下面的social_icons的enable属性设为true就ok)
    # Social Links
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimeter is the target permalink.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
    social:
      GitHub: https://github.com/dasnnj || github
      E-Mail: mailto:dasnnj@outlook.com || envelope
      #Weibo: https://weibo.com/yourname || weibo
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #VK Group: https://vk.com/yourname || vk
      #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
      #YouTube: https://youtube.com/yourname || youtube
      #Instagram: https://instagram.com/yourname || instagram
      #Skype: skype:yourname?call|chat || skype
    
social_icons:
  enable: true #设为true
  icons_only: false 
  transition: false
  
  • 头像
# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/icon.jpeg
  # If true, the avatar would be dispalyed in circle.
  rounded: true #显示圆形头像
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false  #设为true则鼠标移到头像上时候,鼠标显示为手
  
  • 显示摘要 (下面的enable设为true即按照下面设定的高度显示摘要;官方推荐使用<!-- more -->自定义摘要长度;
    read_more_btn设为true显示继续阅读按钮
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
# 显示摘要,不显示全文
auto_excerpt:
  enable: false 
  length: 150

# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true

高级配置

  • 打赏功能
# Reward
# If true, reward would be displayed in every article by default.
# And you can show or hide one article specially through add page variable `reward: true/false`.
# 打赏
reward:
  enable: true
  comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
  wechatpay: /images/xxx.png
  alipay: /images/xxx.jpg
  # bitcoin: /images/unionpay.jpg
  
  • 网站访问次数统计
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
  
  • 本地搜索(需要npm安装denpendency)
# 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

参考主题提供的github地址https://github.com/theme-next/hexo-generator-searchdb, 在博客根目录下执行npm install hexo-generator-searchdb --save

  • 图片弹出效果(鼠标移到图片上显示放大镜效果)请参考:https://github.com/theme-next/theme-next-fancybox3.

    进入next主题目录下执行git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox 通过配置fancybox,让网站中图片可以放大(注意最终效果是clone到主题下面的source/lib/fancybox里面,而不是项目根目录的source/lib/fancybox),然后在主题配置的_config.yml中,搜索fancybox,改为fancybox: true

# Fancybox. There is support for old version 2 and new version 3.
# Choose only any one variant, do not need to install both.
# To install 2.x: https://github.com/theme-next/theme-next-fancybox
# To install 3.x: https://github.com/theme-next/theme-next-fancybox3
#图片展示效果img
fancybox: true

  • 压缩代码(我使用的是all_minifier来优化代码)具体请参考:https://github.com/chenzhutian/hexo-all-minifier 博客根目录下执行npm install hexo-all-minifier --save 在nexT主题的_config.yml中添加 all_minifier:true 无需其他操作,便可在执行hexo g生成静态代码时候自动压缩

    看到很多人用的gulp.js来压缩,但是会报错,而且网上很多人给出的解决方案已经不能用了,我这边解决方案是一月份我使用的,是ok的 具体参考其他人的gulp安装;在博客根目录下面新建gulpfile.js,将下面代码复制进去,剩下的压缩操作和其他人的博客是相同的

var gulp = require('gulp');

//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
//压缩css
gulp.task('minify-css', function () {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', function () {
  return gulp.src('./public/**/*.html')
  .pipe(htmlclean())
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))

  .pipe(gulp.dest('./public'))
});
//压缩js 不压缩min.js
gulp.task('minify-js', function () {
  return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./public'));
});

//4.0以前的写法 
//gulp.task('default', [
  //  'minify-html', 'minify-css', 'minify-js'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', function() {
  // Do something after a, b, and c are finished.
  return new Promise(function(resolve, reject) {
    console.log("gulp finished");
    resolve();
  }
  )}
  ));
  

感谢

© 著作权归作者所有

下次用oschina
粉丝 0
博文 17
码字总数 14520
作品 0
浦东
私信 提问
你该有一个属于自己的个人博客了

个性与张扬 前言 周末用了不到一天时间搭建了属于自己的博客,欣喜之余,就想着提笔将个人博客搭建的详细过程记录下来,以便分享给众读者使用; 搭建之前,笔者看过其他博客的搭建教程,上面...

Jack_lin
2016/08/27
0
0
在github上搭建blog(基于Node.js的Hexo+next)

演示 安装node.js 或者使用Hexo官网说的方式: 需安装其它工具:git 安装博客框架 此时blog目录下的文件有: ~/blog$ ls config.yml db.json nodemodules package.json scaffolds source th...

lizer2016
2016/07/07
0
0
Github Pages(三):使用Hexo博客生成工具

最近用 Hexo 重新搭建了个人博客,虽然我以前用网页拼凑我的老网站花了很多时间,但写作和发布体验的巨大差别让我还是进入Hexo阵营了。 我的理解是,这是一个自动生成静态(html+css+js)网站...

hans2936
2018/06/21
0
0
一款 Material Design 风格的主题 - Hexo-theme-Fluid

项目简介 Fluid 是基于 Hexo 的一款 Material Design 风格的主题,由 Fluid-dev 负责开发与维护。 该主题相较于其他主题的优势: 设计遵循简洁至上,同时具有轻快的体验,和优雅的颜值; 提供...

张凯强_zkqiang
10/18
1K
1
hexo/next主题自定义集合

访问原文 怎么发文章 git里输入,回车 中就会出现一个名为的文件; 编辑md文件,md全名为,是种轻量级的页面格式文件!像我现在正在用印象笔记里的编辑 编辑好了文章,先再本地预览 浏览器打...

项勇
07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

云栖干货回顾 | 更强大的实时数仓构建能力!分析型数据库PostgreSQL 6.0新特性解读

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。AnalyticDB PG通过行存...

大涛学弟
26分钟前
4
0
TL138/1808/6748-EasyEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EasyEVM是广州创龙基于SOM-TL138/SOM-TL1808/SOM-TL6748核心板开发的一款开发板。由于SOM-TL138/SOM-TL1808/SOM-TL6748核心板管脚兼容,所以此三个核心板共用同一个底板。开...

Tronlong创龙
31分钟前
4
0
开普勒平台开源版

https://github.com/kplcloud/kplcloud

perofu
34分钟前
4
0
昨天,这项阿里技术再获世界级科技大奖!

第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光。 昨天,阿里云自研数据库POLARDB 在会上当选世界互联网领先科技成果。POLARDB解决了企业在云时代的数据库难题,帮助企...

阿里云官方博客
34分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部