官网及下载
Next官网,下载方式到最新的Next仓库拉取,然后放到themes
下,在配置文件中启用
// 这里是文件夹名字
theme: next
Next主题的所有配置在Next目录下的_config.yml
中,更改文件即会生效,不需要重启
如需清除Next冗余文件,下面为Next的必须文件
next
|--languages
|--layout
|--scripts
|--source
|--_config.yml
|--_vendors.yml
|--package.json
主题选择
# 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/riskfan || 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
底部运行时间
footer:
# Specify the year when the site was setup. If not defined, current year will be used.
since: 2021
背景彩带
解决页面整体黑白调的问题
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
代码复制功能
代码量过大的时候如果出现了左右滚动条,滑动是复制按钮并没有固定,算个BUG,介意不要开启
copy_button:
enable: true
异步加载
相同的数据不在重复加载,加快页面加载,页面转换更流畅
# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true
图片放大功能
# 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
导航开启统计
menu_settings:
icons: true
badges: true
在进入文章后页面后,导航是没有小点的,这个时候会出现导航右侧空白的情况,不喜欢该风格的情况可以开启导航统计,缓解右侧空白的情况并且导航统计是左右对称的,小点是靠右一丢丢的,与自定义的左侧分类能保持一致的宽度
顶部加载条
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
默认使用的是#
,开启后就有图标了
图片懒加载
页面滚动到才加载,但是会影响文章侧边导航定位的精确性,有时会因为没有加载图片无法直接到达某个标题
# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true
网页初始化慢问题
有天发现网站刷新后要等很久网页才出来,网上说的都是字体问题,在配置文件中也发现了其字体的配置位置:
font:
enable: false
# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:
根据网上的方法进行了配置,刚开始并没有效果,不知是否缓存问题,之后有了效果
font:
enable: true
# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host: //fonts.lug.ustc.edu.cn
本地搜索功能
安装插件:npm install hexo-generator-searchdb
,然后在配置文件中开启
local_search:
enable: true
在点击搜索时发现有网页有闪动问题,使用以下代码解决了开启搜索时的闪动,但是关闭时依然存在
// 搜索样式
.search-active {
// 防闪动
padding-right: 7px;
transition: none;
}
如果对闪动不是很喜欢,可以使用滚动条插件解决,具体在高级篇中有提到
Gitalk评论
在测试了所有支持的评论系统后,发现只有Gitalk的效果最好,简洁无广告
登录Github,在头像功能中以此找到:Settings
-> Developer settings
-> OAuth Apps
-> New OAuth App
其中:
Application name
:为该OAuth application取名,不重复即可Homepage URL
:填写网站首页的地址,如:https://fanmore.github.io/Application description
:备注信息Authorization callback URL
:回调地址,这个很重要,如果网站在本地就写本地地址,如果网站已经部署,就填写部署的网站地址,可随时更改
完成后拿到Client ID
,再通过创建拿到Client secrets
然后在Next的配置中开启评论,先将评论的方式改为gitalk
# Multiple Comment System Support
comments:
# Available values: tabs | buttons
style: tabs
# Choose a comment system to be displayed by default.
# Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
active: gitalk
# Setting `true` means remembering the comment system selected by the visitor.
storage: true
# Lazyload all comment systems.
lazyload: true
# Modify texts or order for any naves, here are some examples.
nav:
#disqus:
# text: Load Disqus
# order: -1
#gitalk:
# order: -2
然后配置gitalk
gitalk:
enable: true
github_id: fanmore # 你的Github名
repo: fanmore.github.io # 用于issues的仓库,通常即部署Hexo的仓库
client_id: xxx
client_secret: xxx
admin_user: fanmore # 仓库管理员用户名
distraction_free_mode: true
proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
language: zh-CN # 评论显示语言
配置完成后在评论处登录授权,进行初始化即可使用
不蒜子统计
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye
会在文章详情页头部加上阅读次数,在网站底部加上总访问人次和总访问量
文章文字间距固定
某些文字间的间距因为页面宽度而增大,手机端尤为严重,是文字的对齐方式造成的,可在配置文件中配置
# 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:
代码样式
copy_button:
enable: true
# Available values: default | flat | mac
style: mac
在source/css/main.styl
中加入
figure.highlight {
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
}