hexo next7.80主题
记录一下自己对next主题的修改和优化
为方便阅读,下面将根目录指定为hexo
安装 next
主题在 hexo
下执行命令
1 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
1 2 3 4 5 # Schemes #scheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini
根据自己喜好选择相应主题默认样式为 Muse
菜单设置 在 next.yml
中搜索 menu
1 2 3 4 5 6 7 8 9 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
1 2 3 4 avatar: url: /images/avatar.jpg # 设置头像资源的位置 rounded: true # 开启圆形头像 rotated: false # 不开启旋转
设置网站LOGO 在 next.yml
中搜索 favicon
1 2 3 4 5 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
1 2 3 4 5 6 7 back2top: # 开启右下角的回到顶部箭头 enable: true # 将回到顶部按钮改到侧边栏下方 sidebar: false # 回到顶部不止显示箭头,也显示阅读进度百分比 scrollpercent: true
代码风格 在 next.yml
中搜索 codeblock
1 2 3 4 5 6 7 8 9 10 11 12 13 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
中。
1 2 3 4 custom_file_path: - #style: source/_data/styles.styl + style: source/_data/styles.styl
设置背景图片 1 2 3 4 5 6 7 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% 的意义为:如果背景图片不能全屏,那么是否通过拉伸的方式将背景强制拉伸至全屏显示。 博客内容透明化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //博客内容透明化 //文章内容的透明度设置 .content-wrap { opacity: 0.9; } //侧边框的透明度设置 .sidebar { opacity: 0.9; } //菜单栏的透明度设置 .header-inner { background: rgba(255,255,255,0.9); } //搜索框(local-search)的透明度设置 .popup { opacity: 0.9; }
页面局部圆角 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //按钮圆角化 .btn { border-radius: 20px; } //代码块圆角化 .highlight { border-radius: 5px; } //代码块复制按钮圆角 .copy-btn { border-radius: 5px; } //底部页面数字跳转链接圆角化 .page-number { border-radius: 5px } .extend { border-radius: 5px; }
参考文章:
Hexo-NexT 版本更新记录 使用hexo在github上搭建博客:个性化篇 Hexo-NexT 设置博客背景图片