标签：Hexo 记录 com next fa theme https NexT true

目录

• 简介
  • 版本
• 安装
• 配置记录
  • 风格/主题
  • 网页图标
  • 菜单栏
  • 侧边栏
  • 本地搜索
  • 代码块
  • 动画效果
  • 阅读进度
  • 书签
  • Mermaid
  • lazyload
  • fancybox
  • pangu
  • 捐赠
  • 版权声明
  • 不蒜子
  • gitalk
• 参考资料

简介

NexT 主题是 Hexo 上使用最广，同时在 GitHub 上也是 Star 最多的主题，bug 修复和功能更新也比较快。当前博客就是使用 Hexo 配合 NexT 主题搭建的

版本

在 【必读】更新说明及常见问题 中有相关说明，NexT 一共有三个不同的仓库：

版本	年份	仓库
v5.1.4 或更低	2014 ~ 2017	iissnan/hexo-theme-next
v6.0.0 ~ v7.8.0	2018 ~ 2019	theme-next/hexo-theme-next
v8.0.0 或更高	2020	next-theme/hexo-theme-next

旧的仓库基本上已经不再更新，因此推荐选择最新的 next-theme/hexo-theme-next 仓库的 NexT 主题

安装

推荐使用 GitHub 进行安装，可以随时更新

因为笔者个人在 Windows 环境下写博客，后续命令均以 PowerShell 为例

cd <hexo-dir>
# git clone https://github.com/next-theme/hexo-theme-next.git .\themes\next\
git clone git@github.com:next-theme/hexo-theme-next.git

cp .\themes\next\_config.yml .\_config.next.yml

配置记录

对 NexT 主题的配置可以直接在 hexo 仓库下的配置文件 _config.next.yml 中进行修改即可，该文件的修改会在生成页面时覆盖主题目录下的配置文件 .\themes\next\_config.yml

衍生拓展：【Hexo】配置文件优先级

风格/主题

NexT 主题包含了 4 个风格，个人喜欢 Gemini，类似卡片的风格，边界比较明显

修改 _config.next.yml 之后，用 hexo clean; hexo g; hexo s 重新生成一下，就可以在 本地 预览了（后续流程如果没有特殊说明则基本一致）

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

网页图标

在各类网站上下载合适图标，按照配置文件中的文件名命名，并放在 images 下即可

衍生阅读：【Apple】Configuring Web Applications

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

菜单栏

菜单栏配置默认没有开启，个人开启了 首页、标签、分类、归档 四个子项目，并开启了图标和数量的气泡显示

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

侧边栏

默认头像会开启旋转功能，花里胡哨的而且旋转有点快，个人选择了关闭

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

在单独的文章页面时侧边栏会默认显示为目录，并且 标签、分类、归档 已经在菜单栏开启了，所以个人选择了关闭

# Posts / Categories / Tags in sidebar.
site_state: false

其他社交网站的主页的配置起来也很简单，简单替换一下链接，并且取消注释即可

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/ywang-wnlo || fab fa-github
  E-Mail: mailto:ywang_wnlo@qq.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

本地搜索

本地搜索可以快速的检索所有的文章，有时候还是很有用的

配置本地搜索之前，首先要在 hexo 下安装插件

npm install hexo-generator-searchdb --save

然后在配置中开启即可

# Local Search
# Dependencies: https://github.com/next-theme/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: true
  # Preload the search data when the page loads.
  preload: false

代码块

代码块的高亮有很多种配色可以选，并且可以开启一键复制功能

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: vs
    dark: vs2015
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: default

动画效果

NexT 默认开启了动画效果，但是感觉比较慢，感觉有些影响阅读，推荐开启 async，并且适当的修改动画效果

PS. 菜单栏的动画不可以关闭和调整，应该是个 bug

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: true
  async: true
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    post_block: fadeIn
    post_header:
    post_body:
    coll_header:
    # Only for Pisces | Gemini.
    sidebar: fadeInDown

阅读进度

阅读进度有两种展示方式，一个在回到首页的按钮上直接显示百分比，另一个可以配置在首位部增加进度条，个人两个都开启了

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

# Reading progress bar
reading_progress:
  enable: true
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: bottom
  reversed: false
  color: "#37c6c0"
  height: 5px

书签

NexT 的书签功能可以保存当前的阅读进度，下次打开是会在续接该进度

# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

Mermaid

Mermaid 可以快速的用代码生成简单的流程图、时序图、甘特图等

NexT 中开启 Mermaid 支持很方便，同时还有不同的风格可以选

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: neutral
    dark: dark

lazyload

lazyload 是网站常用的技术，通过按需加载，避免一次性加载过多内容导致的打开缓慢

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true

fancybox

fancybox 可以在点击图片时放大该图片，并且可以快速浏览当前文章的所有图片

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: true

pangu

对于强迫症来说，中英文混排时加上空格能很大程度改善阅读体验，但是有时候会不小心打漏部分空格，而 pangu 这个项目就可以帮你在展示时自动加上空格

# Pangu Support
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: true

捐赠

文章末尾还可以求打赏，需要配置好相应的二维码图片，并且可以修改提示语句

# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false
  comment: 赏个鸡腿
 
 
标签：Hexo,记录,com,next,fa,theme,https,NexT,true	

来源： https://www.cnblogs.com/ywang-wnlo/p/Hexo-NexT.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。