HEXO之NEXT主題優化配置

網上已經有不少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地址github.com/theme-next/…， 在博客根目錄下執行npm install hexo-generator-searchdb --save

• 圖片彈出效果（鼠標移到圖片上顯示放大鏡效果）請參考：github.com/theme-next/….

  進入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來優化代碼）具體請參考：github.com/chenzhutian… 博客根目錄下執行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();
  }
  )}
  ));
  
複製代碼

感謝

• darryrzhong.site/categories/…
• www.jianshu.com/p/3ff20be85…
• www.jianshu.com/p/344cf0615…
• www.jianshu.com/p/44e601a75…