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 中的选项即可。

这样做的好处可以直接通过 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           # 不开启旋转

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 协议 ,转载请注明出处!