hexo之next主题优化篇1

编程入门 行业动态 更新时间:2024-10-10 01:26:56

hexo之next<a href=https://www.elefans.com/category/jswz/34/1770689.html style=主题优化篇1"/>

hexo之next主题优化篇1

文章目录

  • 更换 next 主题
    • 下载主题
    • 修改站点配置文件
  • 主题配置文件概览
    • 缓冲及其他设置
    • 站点基本信息配置
    • 选择框架
    • 菜单栏设置
    • 侧边栏设置
    • 文章设置
    • 用户界面设置
    • 主题框架设置
    • 字体设置部分
    • 第三方插件
      • 数学公式加持
      • 评论功能
      • 文章评价功能
      • 文章统计和分析功能
      • 站内搜索功能
      • 站内即时聊天功能
      • 标签插件
      • 动画设置部分

这篇博客完成的时候已经是现在了,首先给大家拜个晚年,祝大家新年快乐!
好的还是不好的都已经过去了,希望大家不要为旧的忧伤浪费新的眼泪。

上一篇博客介绍了如何搭建 hexo 环境,最近放假在家有时间(而且为了安全更不能出门)可以更博,所以打算将环境优化篇内容完成,做一个简单的总结(是不是转的有点快_)!

主题优化最重要的一部分内容就是修改 _config.yml 文件,我们把它叫站点配置文件,在我们的 themes 目录下还有一个名称是 _config.yml 文件,我们把它叫做主题配置文件,注意进行区分。

更换 next 主题

下载主题

下载地址:next最新版本地址

我们进入 hexo 的博客目录,然后将 next 仓库克隆至 themes 目录下:

$ cd Blog
$ git clone .git themes/next

这个时候就已经将 next 这一主题仓库克隆至 themes 文件夹的 next 目录内,直接打开文件夹也可以看到。

修改站点配置文件

我们打开站点配置文件 _config.yml (Blog目录下) ,找到 theme,修改为 next 即可:

theme: next

只需要修改这一处就可以更换主题,记住需要重启服务器主题才能生效。

主题配置文件概览

缓冲及其他设置

想要优化主题,我们首先要熟悉的一个就是主题配置文件 _config.yml (不是站点配置文件),下面就详细的介绍这个文件的内容 (其实我们通过文件各部分的英文说明都能明白各部分的作用,建议大家在配置之前还是先通读一遍)

首先是总体的设置,这一部分基本可以不用理会,默认就好

# If false, merge configs from `_data/next.yml` into default configuration (rewrite).
# If true, will fully override default configuration by options from `_data/next.yml` (override). Only for NexT settings.
# And if true, all config from default NexT `_config.yml` must be copied into `next.yml`. Use if you know what you are doing.
# Useful if you want to comment some options from NexT `_config.yml` by `next.yml` without editing default config.
override: false # 默认 false 即可# Console reminder if new version released.
reminder: false # 控制台是否提醒新版本的更新,false# Allow to cache content generation. Introduced in NexT v6.0.0.
cache:enable: true # 允许缓存,true# Remove unnecessary files after hexo generate.
minify: false # 是否在 hexo 生成之后删除不必要的文件,false# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path: # 常用的文件路径#head: source/_data/head.swig#header: source/_data/header.swig#sidebar: source/_data/sidebar.swig#postMeta: source/_data/post-meta.swig#postBodyEnd: source/_data/post-body-end.swig#footer: source/_data/footer.swig#bodyEnd: source/_data/body-end.swig#variable: source/_data/variables.styl#mixin: source/_data/mixins.styl#style: source/_data/styles.styl

站点基本信息配置

# 网站图标设置,不是个人头像,个人头像设置是在侧边栏设置部分 
# 设置分为不同的浏览器不同的设备以及不同的大小都可以分别进行设置,根据自己的喜好选择就行
favicon: small: /images/favicon-16x16-next.pngmedium: /images/favicon-32x32-next.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml# 网站的页脚设置部分
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是页脚建站时间和网站名字之间的图标,默认是 `user`图标# Icon name in Font Awesome. See: .7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: user #图标名称# If you want to animate the icon, set it to true.animated: false # 是否是动画,默认# Change the color of icon, using Hex Code.color: "#808080" # 颜色,16进制# If not defined, `author` from Hexo `_config.yml` will be used.copyright: # 文章版权设置部分powered:# Hexo link (Powered by Hexo).enable: true # 是否显示 hexo链接,如果不想显示设置为false即可# Version info of Hexo after Hexo link (vX.X.X).version: true # 是否显示版本号,如果不想显示设置为false即可theme: # 这一部分是设置在页脚是否显示主题提供商和版本号,false即可# Theme & scheme info link (Theme - NexT.scheme).enable: true# Version info of NexT after scheme info (vX.X.X).version: true# Beian ICP and gongan information for Chinese users. See: , : #这一部分设置网站备案,如果还没有备案就不需要填写enable: falseicp:# The digit in the num of gongan beian.gongan_id:# The full num of gongan beian.gongan_num:# The icon for gongan beian. See: :# Creative Commons 4.0 International License.
# See: 
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on 
creative_commons: # 文章版权说明,这一部分比较重要,也是值得说明的一部分license: by-nc-sa # 版权说明sidebar: false # 侧边栏就不需要版权了,falsepost: false # 文章需要搬去哪说明,修改为truelanguage: # 语言可以不用设置,因为在站点配置文件中已经设置好了

选择框架

# 根据自己的喜好选择框架,可以挨个尝试,但我自己还是更喜欢这个默认框架 `Muse`
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

菜单栏设置

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------# 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-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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 # 404界面# Enable / Disable menu icons / item badges.
menu_settings: # 菜单栏设置icons: true # 是否显示图标badges: false 

注:在使用的时候直接设置就好,但是并不会起作用,因为我们还要为菜单创建一个新的界面,例如使用命令 hexo new page about 创建 about 界面,然后点击about才会跳出。

侧边栏设置

# ---------------------------------------------------------------
# Sidebar Settings
# See: 
# ---------------------------------------------------------------sidebar:# Sidebar Position.position: left # 侧边栏位置,默认在左侧#position: right# Manual define the sidebar width. If commented, will be default for:# Muse | Mist: 320# Pisces | Gemini: 240#width: 300 # 定义侧边栏的宽度,一般默认300就挺好# Sidebar Display (only for Muse | Mist), available values:#  - post    expand on posts automatically. Default.#  - always  expand for all pages automatically.#  - hide    expand only when click on the sidebar toggle icon.#  - remove  totally remove sidebar including sidebar toggle.display: post # post指的是默认的是在文章界面自动展开# always在所有的页面都默认展开# hide 是在所有的页面都默认隐藏# remove 完全移除侧边栏# Sidebar padding in pixels.padding: 18 # 侧边栏填充像素大小,可忽略# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12 # 侧边栏距离顶部菜单的距离(单位像素)# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false # 在移动设备是否显示菜单栏,仅仅针对 Muse 和 Mist主题有效# Sidebar Avatar
avatar: # 个人头像设置# Replace the default image and set the url here.url: #/images/avatar.gif# If true, the avatar will be dispalyed in circle.rounded: false # 是否是圆形显示# If true, the avatar will be rotated with the cursor.rotated: false # 鼠标放置头像上可以旋转# Posts / Categories / Tags in sidebar.
site_state: true # 侧边栏头像下是否显示文章、分类和标签设置# 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:  || github#E-Mail: mailto:yourname@gmail || envelope#Weibo:  || weibo#Google:  || google#Twitter:  || twitter#FB Page:  || facebook#StackOverflow:  || stack-overflow#YouTube:  || youtube#Instagram:  || instagram#Skype: skype:yourname?call|chat || skype#RSS: /atom.xml || rsssocial_icons: # 友链的图标,默认就好enable: trueicons_only: falsetransition: false# Blog rolls
links_settings: # 友链的设置icon: link    # 图标linktitle: Links # 链接名称,可以修改为:友情链接# Available values: block | inlinelayout: block # 友链的布局: 块 或 行links: # 上面是设置,这里是添加链接,title + 链接#Title: # Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc: # 文章标题设置,这一部分默认设置即可enable: true # 是否显示文章标题# Automatically add list number to toc.number: true # 标题是否自动编号# If true, all words will placed on next lines if header width longer then sidebar width.wrap: false # 如果题目过长,是否换行# If true, all level of TOC in a post will be displayed, rather than the activated part of it.expand_all: false # 是否显示所有等级的标题# Maximum heading depth of generated toc.max_depth: 6 # 接受生成的标题的最大深度# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat: # 打开chat服务的按钮,首先你需要激活一个  chat 服务,这里可以不用设置,没有实用价值enable: false # 关闭在线聊天服务即可#service: chatra#service: tidioicon: comment # Icon name in Font Awesome, set false to disable icon.text: Chat # Button text, change it as you wish.

文章设置

# ---------------------------------------------------------------
# Post Settings
# See: 
# ---------------------------------------------------------------# Automatically excerpt description in homepage as preamble text.
excerpt_description: true # 在主页显示预览文本# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true # 是否显示  按钮# Post meta display settings
post_meta: # 文章显示设置,这里建议默认item_text: true # 是否显示文章内容created_at: true # 是否显示创建时间updated_at:      # 是否显示更新时间enable: trueanother_day: truecategories: true # 是否显示分类# Post wordcount display settings
# Dependencies: 
symbols_count_time: # 预计阅读时间和文章字数统计,需要安装插件,具体的设参考上面的链接,但我不建议设置(太繁琐)separated_meta: trueitem_text_post: trueitem_text_total: falseawl: 4wpm: 275# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: false # 文章底部默认的标签是 # 号,建议改为 true# Reward (Donate) # 打赏设置
# Front-matter variable (unsupport animation).
reward_settings:# If true, reward will be displayed in every article by default.enable: false # 时候开启打赏服务animation: false # 是否添加动画#comment: Donate comment here.reward: # 此处是贴上自己的收款码,收款码放置在 images 目录下,然后在此处添加链接#wechatpay: /images/wechatpay.png#alipay: /images/alipay.png#bitcoin: /images/bitcoin.png# Related popular posts
# Dependencies: 
related_posts: # 是否开启相关文章推荐,不建议开启enable: falsetitle: # Custom header, leave empty to use the default onedisplay_in_home: falseparams:maxCount: 5#PPMixingRate: 0.0#isDate: false#isImage: false#isExcerpt: false# Post edit
# Dependencies: 
post_edit: enable: falseurl:  # Link for view source#url:  # Link for fork & edit# Show previous post and next post in post footer if exists
# Available values: left | right | false
post_navigation: left # 上一篇/下一篇文章导航,选择项有 left/right/false

用户界面设置

# ---------------------------------------------------------------
# Custom Page Settings
# See: 
# ---------------------------------------------------------------# TagCloud settings for tags page.
tagcloud: # 标签云界面# All values below are same as default, change them by yourself.min: 12 # Minimun font size in pxmax: 30 # Maxium font size in pxstart: "#ccc" # Start color (hex, rgba, hsla or color keywords)end: "#111" # End color (hex, rgba, hsla or color keywords)amount: 200 # Amount of tags, change it if you have more than 200 tags# Google Calendar
# Share your recent schedule to others via calendar page.
calendar: # 日程表界面calendar_id: <required> # Your Google account E-Mailapi_key: <required>orderBy: startTimeoffsetMax: 24 # Time RangeoffsetMin: 4 # Time RangeshowDeleted: falsesingleEvents: truemaxResults: 250

主题框架设置

# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------# Set the text alignment in posts / pages.
text_align: # 文本对齐方式,默认居中 justify 即可# Available values: start | end | left | right | center | justify | justify-all | match-parentdesktop: justifymobile: justify# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false # 移动端是否窄化布局,默认即可# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222" # 安卓chrome浏览器颜色,默认即可# Hide sticky headers and color the menu bar on Safari (iOS / macOS).
safari_rainbow: false # safari浏览器,默认即可# Custom Logo (Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg  # 用户 logo ,默认即可codeblock: # 代码块设置# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic# See: : normal  # 代码高亮主题,有 normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic 几种选择# Add copy button on codeblockcopy_button: # 代码块中的复制按钮enable: false # 建议 true# Show text copy result.show_result: false # 是否显示复制成功/复制失败信息,建议 true# Available values: default | flat | macstyle: # 代码块的风格,其中有mac风格,自己可以选择尝试一下,但我还是觉得默认的 normal 可以back2top: # 返回页面顶部按钮enable: true # 建议开启# Back to top in sidebar.sidebar: false # 在侧边栏就不建议了,默认false即可# Scroll percent label in b2t button.scrollpercent: false # 显示滚动的百分比,根据个人喜好# Reading progress bar
reading_progress: # 阅读进度条,这里建议默认enable: false# Available values: top | bottomposition: topcolor: "#37c6c0"height: 3px# Bookmark Support
bookmark: # 书签,如果开启,则下一次使用的时候就会从你上次浏览的地方显示,改为 true 即可enable: false# 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# `Follow me on GitHub` banner in the top-right corner.
github_banner: # 在右上角的 github 图标处,点击进入自己的github账户,建议自己有开源的项目可以开启,也是一个宣传自己的机会enable: falsepermalink: : Follow me on GitHub

字体设置部分

# ---------------------------------------------------------------
# Font Settings
# See: 
# ---------------------------------------------------------------
# Find fonts on Google Fonts ()
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------font: # 这一部分是字体设置,如果字体是false,即表示不适用外部字体,使用的是 next 主题默认字体# 如果对默认字体感到不合适,可以修改,选择自己找到的字体库,添加链接就可,但是要确保能够访问,# 比如谷歌字体库在大陆就无法访问,即使你使用科学上网可以获得资源,但是不能保证你的访问用户能够顺利看到,# 关于字体的详细设置请看下面的字体设置篇enable: false# Uri of fonts host, e.g. //fonts.googleapis (Default).host:# Font options:# `external: true` will load this font family from `host` above.# `family: Times New Roman`. Without any quotes.# `size: x.x`. Use `em` as unit. Default: 1 (16px)# Global font settings used for all elements inside <body>.global:external: truefamily: Latosize:# Font settings for site title (.site-title).title:external: truefamily:size:# Font settings for headlines (<h1> to <h6>).headings:external: truefamily:size:# Font settings for posts (.post-body).posts:external: truefamily:# Font settings for <code> and code blocks.codes:external: truefamily:

第三方插件

数学公式加持

# ---------------------------------------------------------------
# Third Party Plugins & Services Settings
# See: /
# You may need to install dependencies or set CDN URLs in `vendors`
# There are two different CDN providers by default:
#   - jsDelivr (cdn.jsdelivr), works everywhere even in China
#   - CDNJS (cdnjs.cloudflare), provided by cloudflare
# ---------------------------------------------------------------# Math Formulas Render Support
math: # 数学公式插件,显示数学公式的插件,仅设置为 true 还不行,需要下载依赖插件# 可以选择两个引擎 mathjax / katex# Default (true) will load mathjax / katex script on demand.# That is it only render those page which has `mathjax: true` in Front-matter.# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.per_page: true# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.mathjax:enable: false# See: : false# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.katex:enable: false# See: : false# Easily enable fast Ajax navigation on your website.
# Dependencies: 
pjax: false# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: 
fancybox: false# A JavaScript library for zooming images like Medium.
# Do not enable both `fancybox` and `mediumzoom`.
# For more information: 
mediumzoom: false# Vanilla JavaScript plugin for lazyloading images.
# For more information: .js
lazyload: false# Pangu Support
# For more information: .js
pangu: false# Quicklink Support
# For more information: 
# Front-matter (unsupport home archive).
quicklink:  # 快链,我还没有尝试过,可以自己试试enable: false# Home page and archive page can be controlled through home and archive options below.# This configuration item is independent of `enable`.home: falsearchive: false# Default (true) will initialize quicklink after the load event fires.delay: true# Custom a time in milliseconds by which the browser must execute prefetching.timeout: 3000# Default (true) will enable fetch() or falls back to XHR.priority: true# For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores.# See: :

评论功能

# ---------------------------------------------------------------
# Comments Settings
# See: 
# ---------------------------------------------------------------
# next 主题支持几个评论插件 disqus | disqusjs |gitalk | livere | changyan(china) | valine(china) | 
# 而且同时支持多个评论系统
# 具体的请看我所配置 valine 方法
# Multiple Comment System Support
comments:# Available values: tabs | buttonsstyle: tabs# Choose a comment system to be displayed by default.# Available values: changyan | disqus | disqusjs | gitalk | livere | valineactive:# Setting `true` means remembering the comment system selected by the visitor.storage: true# Lazyload all comment systems.lazyload: false# Modify texts or order for any navs, here are some examples.nav:#disqus:#  text: Load Disqus#  order: -1#gitalk:#  order: -2# Disqus
disqus:enable: falseshortname:count: true#post_meta_order: 0# DisqusJS
# Alternative Disqus - Render comment component using Disqus API.
# Demo: /
# For more information: 
disqusjs:enable: false# API Endpoint of Disqus API (/).# Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.# For example:# api: /disqus/api:apikey: # Register new application from : # See:  Changyan
changyan:enable: falseappid:appkey:#post_meta_order: 0# Valine
# For more information: , 
valine:enable: falseappid: # Your leancloud application appidappkey: # Your leancloud application appkeynotify: false # Mail notifierverify: false # Verification codeplaceholder: Just go go # Comment box placeholderavatar: mm # Gravatar styleguest_info: nick,mail,link # Custom comment headerpageSize: 10 # Pagination sizelanguage: # Language, available values: en, zh-cnvisitor: false # Article reading statisticcomment_count: true # If false, comment count will only be displayed in post page, not in home pagerecordIP: false # Whether to record the commenter IPserverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)#post_meta_order: 0# LiveRe comments system
# You can get your uid from  (General web site)
livere_uid: # <your_uid># Gitalk
# For more information: , 
gitalk:enable: falsegithub_id: # GitHub repo ownerrepo: # Repository name to store issuesclient_id: # GitHub Application Client IDclient_secret: # GitHub Application Client Secretadmin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issuesdistraction_free_mode: true # Facebook-like distraction free mode# Gitalk's display language depends on user's browser or system environment# If you want everyone visiting your site to see a uniform language, you can set a force language value# Available values: en | es-ES | fr | ru | zh-CN | zh-TWlanguage:

文章评价功能

# ---------------------------------------------------------------
# Post Widgets & Content Sharing Services
# See: 
# ---------------------------------------------------------------
# next 主题支持两个评估系统: Widgetpack Rating 和 AddThis
# Star rating support to each article.
# To get your ID visit 
rating: # rating 插件设置enable: falseid:     # <app_id>color:  fc6423# AddThis Share. See: 
# Go to  to customize your tools.
add_this_id: # AddThis 插件设置

文章统计和分析功能

#  next 主题支持许多的统计和分析插件,用于统计站点浏览量文章浏览数等等
# 包括有 google_analytics baidu_analytics cnzz leancloud firesrtore 以及最常使用的卜算子
# 这一部分只需要现在是干什么的就可以,具体的配置过程见下一篇博客# ---------------------------------------------------------------
# Statistics and Analytics
# See: 
# ---------------------------------------------------------------# Google Analytics 谷歌统计设置
google_analytics: tracking_id: # <app_id># By default, NexT will load an external gtag.js script on your site.# If you only need the pageview feature, set the following option to true to get a better performance.only_pageview: false# Baidu Analytics # 百度统计设置
baidu_analytics: # <app_id># Growingio Analytics
growingio_analytics: # <project_id># CNZZ count CNZZ的设置
cnzz_siteid:# Show number of visitors of each article.
# You can visit  to get AppID and AppKey.
# AppID and AppKey are recommended to be the same as valine's for counter compatibility.
# Do not enable both `valine.visitor` and `leancloud_visitors`.
leancloud_visitors: # leancloud插件设置enable: falseapp_id: # <app_id>app_key: # <app_key># Dependencies:  If you don't care about security in leancloud counter and just want to use it directly# (without hexo-leancloud-counter-security plugin), set `security` to `false`.security: truebetterPerformance: false# Another tool to show number of visitors to each article.
# Visit / to get apiKey and projectId.
# Visit / to get more information about firestore.
firestore: # firestore设置enable: falsecollection: articles # Required, a string collection name to access firestore databaseapiKey: # RequiredprojectId: # Required# Show Views / Visitors of the website / page with busuanzi.
# Get more information on 
busuanzi_count: # 卜算子enable: falsetotal_visitors: truetotal_visitors_icon: usertotal_views: truetotal_views_icon: eyepost_views: truepost_views_icon: eye

站内搜索功能

# ---------------------------------------------------------------
# Search Services
# See: 
# ---------------------------------------------------------------# next 主题支持两种站内搜索插件 algolia_search 和 local_search(比较常用);
# local_search 的具体配置见下一篇博客内容# Algolia Search
# For more information: 
algolia_search:enable: falsehits:per_page: 10labels:input_placeholder: Search for Postshits_empty: "We didn't find any results for the search: ${query}"hits_stats: "${hits} results found in ${time} ms"# Local Search
# Dependencies: 
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 -1top_n_per_article: 1# Unescape html strings to the readable one.unescape: false# Preload the search data when the page loads.preload: false# Swiftype Search API Key
swiftype_key:

站内即时聊天功能

# ---------------------------------------------------------------
# Chat Services
# See: 
# ---------------------------------------------------------------# next 主题支持在线聊天服务,支持两个插件 charta 和 tidioA,这一部分自认为没有必要,所以我也没有配置# Chatra Support
# See: 
# Dashboard: 
chatra: # charta 插件设置enable: falseasync: trueid: # Visit Dashboard to get your ChatraID#embed: # Unfinished experimental feature for developers. See:  Tidio Support
# See: 
# Dashboard: 
tidio: # tidio 插件设置enable: falsekey: # Public Key, get it from dashboard. See: 

标签插件

# ---------------------------------------------------------------
# Tags Settings
# See: /
# ---------------------------------------------------------------# 标签插件和 Front-matter 中的标签不同,它们是用于在文章中快速插入特定内容的插件。
# 这一部分的内容还是挺有意思的,可以尝试学习学习,具体的使用方法我会在后面的使用篇具体讲解;
# 现在详细的介绍以及效果演示可以看中文官方文档 ()# 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: simpleicons: false# 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# Tabs tag
tabs:transition:tabs: falselabels: true# PDF tag, requires two plugins: pdfObject and pdf.js
# pdfObject will try to load pdf files natively, if failed, pdf.js will be used.
# The following `cdn` setting is only for pdfObject, because cdn for pdf.js might be blocked by CORS policy.
# So, you must install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# See: 
pdf:enable: false# Default heightheight: 500px# Mermaid tag
mermaid:enable: false# Available themes: default | dark | forest | neutraltheme: forest

动画设置部分

# ---------------------------------------------------------------
# Animation Settings
# ---------------------------------------------------------------
# 这一部分主要是使用页面动画设置
# Use velocity to animate everything.
# For more information: 
motion: # 第一部分主要是使用 velocity 引擎实现的界面动态的效果,默认就好# 否则可能还需要学习一下 velocityenable: trueasync: falsetransition:# Transition variants:# fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn# swoopIn | whirlIn | shrinkIn | expandIn# bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn# slideUpIn | slideDownIn | slideLeftIn | slideRightIn# slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn# perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightInpost_block: fadeInpost_header: slideDownInpost_body: slideDownIncoll_header: slideLeftIn# Only for Pisces | Gemini.sidebar: slideUpIn# Progress bar in the top during page loading.
# Dependencies: 
# For more information: 
pace: # 文章加载时候显示的进度条,需要添加依赖(个人认为没有必要)enable: false# Themes list:# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimaltheme: minimal# JavaScript 3D library.
# Dependencies: 
three: # javaScript 的3D库,同样需要添加依赖库文件,我也没有设置enable: falsethree_waves: falsecanvas_lines: falsecanvas_sphere: false# Canvas-nest
# Dependencies: 
# For more information: .js
canvas_nest:enable: falseonmobile: true # Display on mobile or notcolor: "0,0,255" # RGB values, use `,` to separateopacity: 0.5 # The opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 99 # The number of lines# Canvas-ribbon
# Dependencies: 
# For more information: 
canvas_ribbon:enable: falsesize: 300 # The width of the ribbonalpha: 0.6 # The transparency of the ribbonzIndex: -1 # The display level of the ribbon

更多推荐

hexo之next主题优化篇1

本文发布于:2024-02-06 08:40:12,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1747391.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:主题   hexo

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!