next优化
hexo next7.80主题
记录一下自己对next主题的修改和优化
为方便阅读,下面将根目录指定为hexo
安装 next
主题在 hexo
下执行命令
git clone https://github.com/theme-next/hexo-theme-next themes/next
数据文件
自从 NexT-7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。
本文后续修改基于此种方案。
- 在
hexo/source/_data
目录中创建 next.yml(如果_data 不存在,则创建目录)。 - 将**所有 NexT 主题选项(
hexo/themes/next/_confing.yml
)**复制到hexo/source/_data/next.yml
中。 - 在
next.yml
搜索override
将选项改为true
。
这样后续更改不必再改动 hexo/themes/next/_confing.yml
直接更改 next.yml
中的选项即可.
- 数据文件的介绍详见:NexT 中文文档 - 快速入门 - 数据文件
这样做的好处可以直接通过 git pull
平滑更新。
next.yml
NexT分主题设置
在 next.yml
中搜索 Schemes
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
根据自己喜好选择相应主题默认样式为 Muse
菜单设置
在 next.yml
中搜索 menu
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 //公益404
根据需要取消相应注释
头像设置
在 next.yml
中搜索 avatar
avatar:
url: /images/avatar.jpg # 设置头像资源的位置
rounded: true # 开启圆形头像
rotated: false # 不开启旋转
设置网站LOGO
在 next.yml
中搜索 favicon
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
可以看到有四种效果,一般我们只需将medium换成我们自己图标路径就行了。
回到顶部
在 next.yml
中搜索 back2top
back2top:
# 开启右下角的回到顶部箭头
enable: true
# 将回到顶部按钮改到侧边栏下方
sidebar: false
# 回到顶部不止显示箭头,也显示阅读进度百分比
scrollpercent: true
代码风格
在 next.yml
中搜索 codeblock
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: solarized
# Add copy button on codeblock
#若将copy_button.enable设为true,可在代码块右侧开启复制按钮,点击即可复制代码
copy_button:
enable: true
# Show text copy result.
show_result: false
# Available values: default | flat | mac
style:
styles.styl
在 next.yml
中搜索 #style: source/_data/styles.styl
取消注释,在 hexo/source/_data/
中新建 styles.styl
要添加什么功能直接复制代码到 styles.styl
中。
custom_file_path:
- #style: source/_data/styles.styl
+ style: source/_data/styles.styl
设置背景图片
body {
background:url(/images/yourbackground.jpg);
background-repeat: no-repeat;
background-attachment:fixed; //不重复
background-size: cover; //填充
background-position:50% 50%;
}
- background:url 为图片路径,也可以直接使用链接。
- background-repeat:若果背景图片不能全屏,那么是否平铺显示,充满屏幕
- background-attachment:背景是否随着网页上下滚动而滚动,fixed 为固定
- background-size:图片展示大小,这里设置 100%,100% 的意义为:如果背景图片不能全屏,那么是否通过拉伸的方式将背景强制拉伸至全屏显示。
博客内容透明化
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.9;
}
//侧边框的透明度设置
.sidebar {
opacity: 0.9;
}
//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9);
}
//搜索框(local-search)的透明度设置
.popup {
opacity: 0.9;
}
页面局部圆角
//按钮圆角化
.btn {
border-radius: 20px;
}
//代码块圆角化
.highlight {
border-radius: 5px;
}
//代码块复制按钮圆角
.copy-btn {
border-radius: 5px;
}
//底部页面数字跳转链接圆角化
.page-number {
border-radius: 5px
}
.extend {
border-radius: 5px;
}
参考文章:
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!