Hexo+NexT（三）：Next主題配置詳解

時間 2019-11-14
標籤 hexo+next hexo 主題配置詳解简体版
原文原文鏈接
閱讀本篇以前，假定讀者已經有了Node.js的基礎，如須要補充Node.js知識的，請自行百度。javascript
Hexo是在Node.js框架下的一個項目，利用Node.js提供的強大功能，完成從Markdown到靜態網頁的轉換。css
NexT是Hexo項目下的一個主題插件，提供可高度定製的頁面外觀。html
本文章對NexT主題配置文件_config.yml中的配置進行詳細的講解。
歡迎訪問博主主頁www.Guide2IT.com
java
Hexo博客專題索引頁jquery
1. NexT主題配置文件詳解

Hexo版本-3.8.0，NexT版本-5.1.4android
NexT主題配置文件詳解git
# ---------------------------------------------------------------
# 主題核心配置
# ---------------------------------------------------------------
override: false    # 設置爲true，則徹底重載默認配置，當你徹底不想繼承主題配置時頗有用

# ---------------------------------------------------------------
# 站點信息設置
# ---------------------------------------------------------------
favicon:     # favicon升級了，細化各類規格。
  small: /images/favicon-16x16-next.png                
  medium: /images/favicon-32x32-next.png    # medium類型應用`/favicon.ico`，不然網站圖標異常
  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

keywords: "Hexo, NexT"                        # 網站默認關鍵詞
rss:                            # rss配置。false禁止；留空提供站點提供的；也能夠本身指定

footer:                        # footer塊配置                                                
  #since: 2015        # 網站建站年份，若是不配，採用當前年份
  icon: user            # 年份和版權聲明之間的圖標
  copyright:            # 版權聲明。如爲空，則取站點配置的`author`值。  
  powered: true        # 顯示Hexo的連接（Power by Hexo）
  theme:                    # 在footer塊中顯示主題信息
    enable: true    # 顯示主題信息    
    version: true    # 顯示主題的版本。
  # 能夠採用下面定製的文本
  #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>

# ---------------------------------------------------------------
# SEO設置
# ---------------------------------------------------------------

# 標記爲權威網站，有利於SEO搜索。若是打開該標籤，務必在站點配置中設置url。
canonical: true
seo: false

# 若是index_with_subtitle爲true，則在主頁標題中增長subtitle。
# subtitle: Subtitle # 此處也能夠覆寫，它會替代站點配置文件中的內容
index_with_subtitle: false

# ---------------------------------------------------------------
# 菜單設置
# ---------------------------------------------------------------
# 用法: `Key: /link/ || icon`
# Key 菜單名，若是語言文件中有對應項，則用對應項，不然就用菜單名。
# `||` 前面部分，表示目標連接。
# `||` 後面部分，表示菜單的FontAwesome圖標名。默認爲question圖標。
menu:
  home: / || home                        # 主頁連接及其圖標
  #about: /about/ || user                # 關於頁連接及其圖標
  #tags: /tags/ || tags                  # 標籤頁連接及其圖標
  #categories: /categories/ || th        # 分類頁連接及其圖標
  archives: /archives/ || archive        # 歸檔頁及其圖標
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
menu_icons:
  enable: true                           # 是否啓用圖標


# ---------------------------------------------------------------
# 主題的主題設置
# ---------------------------------------------------------------
# 只能選擇一套。
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# ---------------------------------------------------------------
# 側邊欄設置
# ---------------------------------------------------------------

# 社交連接
# 用法: `Key: permalink || icon`
# Key 是最終顯示的標籤，`||` 前是永久連接,`||` 後面是標籤的FontAwesome圖標，默認glob
#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #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             # 是否在社交連接標籤上顯示圖標
  icons_only: false        # 只顯示圖標
  transition: false        # 是否顯示過渡效果

# 友情連接
links_icon: link                              # 連接圖標
links_title: Links                            # 連接標籤文字
links_layout: block                           # 連接樣式
#links_layout: inline
#links:                                       # 一個一個的友情連接。用法爲`標題： 連接`
  #Title: http://example.com/

# Sidebar Avatar                              # 側邊欄上我的頭像圖片。也支持是動態gif。
#avatar: /images/avatar.gif

# 在側邊欄中是否顯示文章標題目錄。
toc:
  enable: true                                # 是否
  number: true                                # 是否自動編號
  wrap: false                                 # 標題目錄是否自動換行


# 創做聲明
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:

sidebar:
  # 側邊欄位置: left | right (只有Pisces、Gemini有效).
  position: left
  #position: right

  # 側邊欄顯示 (只對Muse、Mist有效)  
  display: post                               # 默認，在post文章擴展時顯示。
  #display: always                            # 對全部頁面都顯示
  #display: hide                              # 只有點擊按鈕顯示
  #display: remove                            # 徹底刪除，不顯示

  # 側邊欄距離頂部菜單條的距離，單位像素(只對Pisces、Gemini有效).
  offset: 12
  b2t: false            # 在側邊欄下方是否顯示回到頂部(只對Pisces、Gemini有效).
  scrollpercent: false  # 是否顯示滾動百分比
  onmobile: false       # 是否在窄屏設備上顯示側邊欄 (只對 Muse | Mist有效).

# ---------------------------------------------------------------
# 文章設置（post類型）
# ---------------------------------------------------------------
scroll_to_more: true      # 自動摺疊<!--more-->下面的正文部分
save_scroll: false        # 自動爲每篇文章保存滾動位置

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# 自動摘要，不建議。請使用<!-- more -->精確控制
auto_excerpt:
  enable: false         # 啓動開關
  length: 150           # 從開始日後選取的摘要文字數量。

# 摘要元數據
post_meta:
  item_text: true              # 是否顯示「發表於」這幾個文字
  created_at: true             # 文章建立日期
  updated_at: false            # 文章修改日期
  categories: true             # 文章所屬分類

post_wordcount:                # 字數統計。依賴https://github.com/willin/hexo-wordcount
  item_text: true              # 是否顯示文字
  wordcount: false             # 顯示字數
  min2read: false              # 顯示閱讀時間
  totalcount: false            # 顯示總數
  separated_meta: true         # 是否分開

#wechat_subscriber:            # 微信公衆號訂閱
  #enabled: true               # 是否啓用
  #qcode:                      # 二維碼圖片連接
  #description:                # 描述性文字，會放在二維碼上方

# 打賞
#reward_comment: # 打賞文字
#wechatpay: /images/wechatpay.jpg   # 微信打賞二維碼
#alipay: /images/alipay.jpg         # 支付寶打賞二維碼
#bitcoin: /images/bitcoin.png       # 比特幣打賞二維碼

post_copyright:
  enable: false                     # 文檔許可聲明
  license: CC BY-NC-SA 3.0          # 文檔聲明協議
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/


# ---------------------------------------------------------------
# Misc 主題專用設置
# ---------------------------------------------------------------
# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

# Android Chrome header panel color ($black-deep).
android_chrome_color: "#222"

# 定製Logo，只對默認Muse有效。
# Options:
#   enabled: [true/false] - # 是否啓用
#   image: url-of-image   - # 圖片url
custom_logo:
  enabled: false
  image:

# 代碼高亮主題。可選值normal | night | night eighties | night blue | night bright
highlight_theme: normal

# ---------------------------------------------------------------
# 字體設置兒
# - 請從谷歌查找字體
# - 全部字體必須具備下列樣式
#     light, light italic, normal, normal italic, bold, bold italic
font:
  enable: false                  # 是否啓用
  host:                          # 字體host地址
  # Font options:                # 字體選項
  # `external: true`             # true，則會從上面的host地址裝載
  # `family: Times New Roman`. 
  # `size: xx`. 單位是`px`.

  # 在<body>元素中設置全局字體
  global:
    external: true
    family: Lato
    size:

  # 標題（h1~h6字體，有global字體設置託底）
  headings:
    external: true
    family:
    size:

  # post文章字體，有global字體設置託底
  posts:
    external: true
    family:

   # logo字體設置，有global字體設置託底
  logo:
    external: true
    family:
    size:

  # 代碼塊字體
  codes:
    external: true
    family:
    size:


# ---------------------------------------------------------------
# 第三方服務設置
# ---------------------------------------------------------------

# MathJax數學公式設置
mathjax:
  enable: false
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

# Han Support docs: https://hanzi.pro/
han: false

# Swiftype Search API Key
#swiftype_key:

#baidu_analytics:          # 百度分析的id
#duoshuo_shortname:        # 多說的shorname

# Disqus Disqus評論支持
disqus:
  enable: false
  shortname:
  count: true

# Hypercomments
#hypercomments_id:

# 暢言
changyan:                                        
  enable: false
  appid:
  appkey:


# 韓國來必力網站評論系統.https://valine.js.org
valine:
  enable: false
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size


# 友言評論
#youyan_uid: your uid

# LiveRe評論系統。從https://livere.com/insight/myCode獲取uid
#livere_uid: your uid

# Gitment評論系統。https://imsun.net/posts/gitment-introduction/
# You can get your Github ID from https://api.github.com/users/<Github username>
gitment:
  enable: false
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: # MUST HAVE, Your Github ID
  github_repo: # MUST HAVE, The repo you use to store Gitment comments
  client_id: # MUST HAVE, Github client id for the Gitment
  client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
#baidushare:
##  type: button

# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
#jiathis:
  ##uid: Get this uid from http://www.jiathis.com/
#add_this_id:

# Share
#duoshuo_share: true

# NeedMoreShare2
# This plugin is a pure javascript sharing lib which is useful in China.
# See: https://github.com/revir/need-more-share2
# Also see: https://github.com/DzmVasileusky/needShareButton
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
#           Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
#           Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
#           Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:

# Google Analytics
#google_analytics:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
#bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
#yandex_site_verification:

# CNZZ count
#cnzz_siteid:

# Application Insights
# See https://azure.microsoft.com/en-us/services/application-insights/
# application_insights:

# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 0
  #admin_nickname: Author

# Post widgets & FB/VK comments settings.
# ---------------------------------------------------------------
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable:       false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true

# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
  enable:       false
  num_of_posts: 10    # min posts num is 1
  width:        100%  # default width is 550px
  scheme:       light # default scheme is light (light or dark)

# VKontakte API Support.
# To get your AppID visit https://vk.com/editapp?act=create
vkontakte_api:
  enable:       false
  app_id:       #<app_id>
  like:         true
  comments:     true
  num_of_posts: 10

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: false
  id:     #<app_id>
  color:  fc6423
# ---------------------------------------------------------------

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>

# Another tool to show number of visitors to each article.
# visit https://console.firebase.google.com/u/0/ to get apiKey and projectId
# visit https://firebase.google.com/docs/firestore/ to get more information about firestore
firestore:
  enable: false
  collection: articles #required, a string collection name to access firestore database
  apiKey: #required
  projectId: #required
  bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: false
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:


# Tencent analytics ID
# tencent_analytics:

# Tencent MTA ID
# tencent_mta:


# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: false

# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
  enable: false
  calendar_id: <required>
  api_key: <required>
  orderBy: startTime
  offsetMax: 24
  offsetMin: 4
  timeZone:
  showDeleted: false
  singleEvents: true
  maxResults: 250

# Algolia Search
algolia_search:
  enable: false
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: false
  # 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


# ---------------------------------------------------------------
# 標籤設置
# ---------------------------------------------------------------
# 對外鏈採用BASE64進行加密解密
# 用法: {% exturl text url "title" %}
# 別名: {% extlink text url "title" %}
exturl: false    # 是否對外鏈進行加密解密

# Note tag (bs-callout).
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

# Label tag.
label: true

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0


#! ---------------------------------------------------------------
#! 下面慎重修改，除非你指定它的意義
#! ---------------------------------------------------------------

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

# Fancybox
fancybox: true

# Progress bar in the top during page loading.
pace: false
# 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
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: false
  size: 300
  alpha: 0.6
  zIndex: -1

# 腳本提供者設置。
# 爲js文件指定CDN，加快加載速度
# 注意，CDN版本一致。若是CDN提供https，無別加上https協議。
vendors:
  _internal: lib    # 本網站提供腳本的路徑，不要輕易修改。
  
  jquery:    https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js # 內部版本2.1.3。CDN版本應一致

  fancybox:        # 內部版本2.1.5。
  fancybox_css:
  fastclick:       # 內部版本1.0.6。
  lazyload:        # 內部版本1.9.7。
  velocity:        # 內部版本1.2.1。
  velocity_ui:     # 內部版本1.2.1。
  ua_parser:       # 內部版本0.7.9。
  fontawesome:     # 內部版本4.6.2
  algolia_instant_js:    fontawesome:    # 內部版本 1
  algolia_instant_css:
  pace:            # 內部版本 1.0.2。
  pace_css:
  canvas_nest:     # 內部版本 1.0.0
  three:           # 3D腳本庫，未指定內部版本
  three_waves:     # 未指定內部版本
  canvas_lines:    # 未指定內部版本
  canvas_sphere:   # 未指定內部版本
  canvas_ribbon:   # 內部版本 1.0.0
  han:             # 內部版本 3.3.0
  needMoreShare2:  # 未指定內部版本

# 資源種類
css: css
js: js
images: images

# Theme version
version: 5.1.4
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。