next优化

发表于 分类于

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           # 不开启旋转

在 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 设置博客背景图片