Hexo博客 Next主题
(1) Next主题
Next主题有多个版本
next | 版本 | 仓库地址 | 对应官网 |
---|---|---|---|
iissnan/hexo-theme-next | 0.1.0 ~ 5.1.4 | https://github.com/iissnan/hexo-theme-next | - |
theme-next/hexo-theme-next | 6.0.0 ~ 7.8.0 | https://github.com/theme-next/hexo-theme-next | https://theme-next.org/index.html |
next-theme/hexo-theme-next | 8.0.0 ~ | https://github.com/next-theme/hexo-theme-next | https://theme-next.js.org/ |
(1.1) Next主题配置文件
Next主题 6.x 7.x 8.x的配置在 blog/_config.next.yml
,目的是为了和next主题的_config.yml
解耦,同时解决每次merge合并代码冲突的烦恼。
(2) 主题通用配置
配置文件使用 blog/_config.next.yml
(2.1) 主题风格
NexT主题 风格为 Muse
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
(2.2) 侧边栏标题配置
# 侧边栏中的目录(标题)配置
toc:
enable: true
# 自动将列表(标题)编号添加到目录中。
number: false
# 如果为 true,则当标题宽度长于侧边栏宽度时,所有单词都将放置在下一行。
wrap: false
# 如果为 true,则将显示帖子中所有级别的目录,而不是其中激活的部分。
expand_all: false
# 生成目录(标题)的最大深度。 最多支持6级标题 ######
max_depth: 6
(3) 个性化设置
修改blog的 $blog/_config.next.yml
文件
修改后如下
# filepath: blog/_config.next.yml
# 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.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
v6.x v7.x v8.x 都支持上面这种方法
(3.1) style配置
(3.1.1) 设置背景
修改 blog/source/_data/styles.styl
文件,添加以下配置
// source/_data/styles.styl
// background
body {
background-image:url(../images/background.jpg);
height:100%;
width:100%;
background-repeat:repeat-x;
background-attachment:fixed; //不滚动
background-size:100% 100%; //填充
}
(3.1.2) 设置透明度
修改 blog/source/_data/styles.styl
文件,添加以下配置
//###### 博客内容透明化 ######
//文章内容的透明度设置
//文章内容的透明度设置+文章边框设置
.post-block {
margin-top: 60px; // 内容
margin-bottom: 60px;
padding: 35px; // 内容边框
background: rgba(255,255,255,0.9) none repeat scroll !important; // 内容不透明
}
//分页(主页最下面的那一小块)
.pagination {
background: rgba(255,255,255,0.9);
}
//菜单栏背景
.header-inner {
background: rgba(255,255,255,0.9);
}
//侧边框的透明度设置
.sidebar-inner {
background: rgba(255,255,255,0.9) none repeat scroll !important;
}
//搜索框(local-search)的透明度设置
.popup {
opacity: 0.9;
}
//评论区
.comments {
background: rgba(255,255,255,0.9);
}
(3.2) variables配置
(3.2.1) 设置页面内容宽度
next主题默认配置在 blog/themes/next/source/css/_variables/base.styl
// Layout sizes
// --------------------------------------------------
$content-desktop = 700px;
$content-desktop-large = 800px;
$content-desktop-largest = 900px;
$content-desktop-padding = 40px;
$content-tablet-padding = 10px;
$content-mobile-padding = 8px;
需要添加自定义配置 source/_data/variables.styl
$content-desktop = 80%
$content-desktop-large = 85%
$content-desktop-largest = 90%
并且修改配置文件,blog的 blog/_config.next.yml
把 variable: source/_data/variables.styl
前面的#
去掉
Hexo Next 主题优化
How-to-Change-Content-Width
(4) Next插件
(4.1) Next主题添加Valine评论系统
# ---------------------------------------------------------------
# Comments Settings
# See: https://theme-next.js.org/docs/third-party-services/comments
# ---------------------------------------------------------------
# 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: valine
# 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 naves, here are some examples.
nav:
#disqus:
# text: Load Disqus
# order: -1
#gitalk:
# order: -2
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true
appId: xxxx
appKey: xxxx
placeholder: 期待您的评论 # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
meta: # Custom comment header
pageSize: 10 # Pagination size
language: zh-cn # Language, available values: en, zh-cn
visitor: true # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: true # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
notify: true # Mail notifier
verify: false # Verification code
#post_meta_order: 0
# ---------------------------------------------------------------
# CDN Settings
# See: https://theme-next.js.org/docs/advanced-settings/vendors
# ---------------------------------------------------------------
vendors:
# The CDN provider of NexT internal scripts.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Warning: If you are using the latest master branch of NexT, please set `internal: local`
internal: local
# The default CDN provider of third-party plugins.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Dependencies for `plugins: local`: https://github.com/next-theme/plugins
plugins: unpkg
# Custom CDN URL
# For example:
# custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
# custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
custom_cdn_url:
# Valine
# valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
valine: //cdn.jsdelivr.net/npm/valine@1.5.1/dist/Valine.min.js
https://github.com/theme-next/hexo-theme-next/pull/345
https://github.com/xCss/Valine/issues/172
https://github.com/iissnan/hexo-theme-next/blob/620b1e829eb8b6fd72426f3009866b79d8ee2e7b/layout/_third-party/comments/valine.swig#L1-L3
(4.2) Next主题添加3d小地球实时访客统计工具
Revolver Maps 是一个交互式的网站访客地图。每一个浏览者的位置都会实时在由 Canvas 渲染的地球上标记出来。
官网 https://www.revolvermaps.com/
改动点:
在 $blog/themes/next/
的 layout/_partials/sidebar/site-overview.swig
文件尾部添加以下代码
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5rcgvdncuwu&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&rs=80" async="async"></script>
参考文章
一行代码为你的网站添加一个3d小地球实时访客统计工具
Hexo5-在博客主页侧边栏添加网易云音乐外链&访问者地图
个人博客网站搭建与优化
参考资料
[1] Next主题自定义文件
[2] hexo-next主题优化
[3] Hexo之Next主题美化代码
[4] Hexo Next 主题优化
[5] How-to-Change-Content-Width
[6] 一行代码为你的网站添加一个3d小地球实时访客统计工具
[7] Hexo5-在博客主页侧边栏添加网易云音乐外链&访问者地图
[8] 个人博客网站搭建与优化