Next是Hexo静态博客生成器下的一款博客展示主题样式,该主题相较而言比较好看,功能也比较全,博客网站拥有的功能都有所具备,同时也支持其他功能的扩展,文章使用版本为8.27.0
官网及下载
Next官网,下载方式到最新的Next仓库拉取或直接下载,然后放到themes下,在配置文件中启用
// 这里是文件夹名字
theme: next
Next主题的所有配置在Next目录下的_config.yml中,更改文件即会生效,不需要重启。如需清除Next冗余文件,下面为Next的必须文件
next
|--languages
|--layout
|--scripts
|--source
|--_config.yml
|--_vendors.yml
|--package.json
之后的配置都在_config.yml中进行
主题选择
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
网站图标
favicon:
small: https://s1.ax1x.com/2020/11/10/BqTOfA.png
medium: https://s1.ax1x.com/2020/11/10/BqTOfA.png
apple_touch_icon: https://s1.ax1x.com/2020/11/10/BqTOfA.png
safari_pinned_tab: https://s1.ax1x.com/2020/11/10/BqTOfA.png
菜单配置
menu:
home: / || fa fa-home
导航: /nav || fa fa-paper-plane
categories: /categories || fa fa-th
archives: /archives || fa fa-archive
作者: /author || fa fa-user
通过命令hexo n page nav创建与路径同名的文件,然后进行配置:
---
title: 标签
date: 2020-11-10 13:57:59
type: "tags"
comments: false
---
Next使用的图标为Font Awesome,可根据喜欢自行选择
侧边头像
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.png
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false
侧边社交
social:
GitHub: https://github.com/fanmore || fab fa-github
Gitee: https://gitee.com/riskfan || fab fa-github-alt
开启版权
creative_commons:
license: by-nc-sa
sidebar: true
post: false
language:
浏览进度
默认放在右下角,开启后放在文章目录下
back2top:
enable: true
# Back to top in sidebar. 放在作者下
sidebar: true
# Scroll percent label in b2t button. 浏览进行百分比
scrollpercent: true
关闭大纲数字和展示所有
toc:
number: false
expand_all: true
底部运行时间
footer:
# Specify the year when the site was setup. If not defined, current year will be used.
since: 2021
备案号
beian:
enable: true
icp: 黔ICP备2021005697号
背景彩带
解决页面整体黑白调的问题
canvas_ribbon:
enable: true
size: 100 # The width of the ribbon
alpha: 0.4 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon
关闭首页阅读全文
read_more_btn: false
代码复制功能
copy_button:
enable: true
代码样式
copy_button:
enable: true
# Available values: default | flat | mac
style: mac
在source/css/main.styl中加入
// 代码样式
figure.highlight {
box-shadow: none;
}
figure.highlight::before {
height: 9px;
width: 9px;
}
异步加载
相同的数据不在重复加载,加快页面加载,页面转换更流畅
# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true
图片放大功能
mediumzoom: true
图片懒加载
页面滚动到才加载,但是会影响文章侧边导航定位的精确性,有时会因为没有加载图片无法直接到达某个标题
# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true
导航开启统计
menu_settings:
icons: true
badges: true
在进入文章后页面后,导航是没有小点的,这个时候会出现导航右侧空白的情况,不喜欢该风格的情况可以开启导航统计,缓解右侧空白的情况并且导航统计是左右对称的,小点是靠右一丢丢的,与自定义的左侧分类能保持一致的宽度
标签云配置
tagcloud:
min: 13 # Minimum font size in px
max: 24 # Maximum font size in px
amount: 1000 # Total amount of tags
orderby: name # Order of tags
order: 1 # Sort order
顶部加载条
pace:
enable: false
# All available colors:
# black | blue | green | orange | pink | purple | red | silver | white | yellow
color: blue
# All available themes:
# 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 | minimal
theme: minimal
底部驱动
个人建议还是开启,毕竟开源需要大家维护
footer:
# Powered by Hexo & NexT
powered: true
ICP备案展示
footer:
beian:
enable: true
icp: xxxx
文章底部标签图标
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true
默认使用的是#,开启后就有图标了
文章文字间距固定
某些文字间的间距因为页面宽度而增大,手机端尤为严重,是文字的对齐方式造成的,可在配置文件中配置
# Set the text alignment in posts / pages.
text_align:
# Available values: start | end | left | right | center | justify | justify-all | match-parent
desktop: left
mobile: left
全局字体配置
font:
enable: false
# Uri of fonts host, e.g. https://fonts.googleapis.com (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: true
family: Helvetica # 更改此处
size:
首页摘要
Next默认是开启的,在文章的头部加上description:即可,同时可以美化样式
// 摘要
.post-description {
margin-bottom: 20px;
text-align: left;
text-indent: 2em;
}
