• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

[Hexo]下一个主题的配置和使用记录


Recommended Posts

介绍版本安装配置记录样式/主题网页图标菜单栏侧边栏本地搜索代码块动画效果阅读进度书签Mermaidlazyloadfancyboxpangu捐赠版权声明无蒜gitalk参考

简介

NexT是Hexo上使用最广泛的主题,也是GitHub上最受欢迎的主题。错误修复和功能更新也更快。目前博客搭建有Hexo和NexT主题。

版本

【必读】更新说明和常见问题中有相关解释。NexT有三个不同的仓库:

版本

年龄

仓库

V5.1.4或更低版本

2014 ~ 2017

IIS snan/hexo-主题-下一个

6 . 0 . 0 ~ 7 . 8 . 0版

2018 ~ 2019

主题-下一个/hexo-主题-下一个

V8.0.0或更高版本

2020

下一个主题/hexo主题-下一个

老仓库基本不再更新,建议选择最新的next-theme/hexo-theme-next仓库的下一个主题。

安装

建议使用GitHub进行安装,可以随时更新。

因为作者在Windows环境下写博客,后续命令以PowerShell为例。

cd六角目录

# git克隆https://github.com/next-theme/hexo-theme-next.git。\主题\下一个\

git克隆git @ github.com : next-theme/hexo-theme-next . git

比较\themes\next\_config.yml。\_config.next.yml

配置记录

下一个主题的配置可以直接在hexo仓库下的配置文件_config.next.yml中修改。当生成页面时,对此文件的修改将覆盖主题目录中的配置文件。\ themes \ next \ _ config.yml。

派生:[Hexo]配置文件优先级

风格/主题

NexT的主题包含四种风格。个人喜欢双子座,和卡牌风格差不多,界限明显。

NexT_Schemes

修改_config.next.yml后,使用hexo cleanhexo g;hexo s一旦重新生成,就可以在本地预览了(后续流程基本相同,除非特别说明)

#方案

# scheme:缪斯

# scheme:薄雾

双鱼座

scheme:双子座

网页图标

从各个网站下载合适的图标,按照配置文件中的文件名命名,放在images下。

衍生:[苹果]配置网络应用

favicon:

small :/images/favicon-16x 16-next . png

梅迪乌

m: /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:[email protected] || 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: 赏个鸡腿
Link to comment
Share on other sites