Hexo NexT 主题 v8.2.0 美化教程

Hexo NexT 主题 v8.2.0 美化教程

NexT 是 Hexo 上最有名的主题之一:大量的文字留白、丰富的功能配置、简洁的布局使得它的文字阅读体验非常清爽。目前为止(本文时间)其已经在开源社区的维护下迭代了八个大版本,并且稳定保持每月一次更新的维护频率。各种丰富的自定义美化都可以通过 注入 的方式不修改主题源码的条件下做到,本文记录我使用 NexT 8.2.x 一个多月以来的一些美化和配置的记录,希望能对他人有所帮助(PS:修改的结果并不一定符合所有人的审美,请酌情选择 🙂

预览

样式参考:

首页

文章阅读

标签云和站点概览

布局

打开 NexT 主题的配置文件,找到 #Schemes 字段,NexT 默认提供了四种不同的样式方案:

  • Muse

  • Mist

  • Pisces

  • Gemini

本文美化基于 Gemini 样式,取消 Gemini 的样式,其他三个保持注释即可

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

侧边栏

修改侧边栏的显示方式

# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # 侧边栏位置 
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  # always 总是显示侧边栏
  display: always

  # Sidebar padding in pixels.
  padding: 18
  # 侧边栏和顶部间距像素 ( 只对Pisces | Gemini 布局有效).
  offset: 13

引入样式

修改主题配置文件中的 custom_file_path: 字段,在 Hexo 根目录的 /source/_data/ 下新建 footer.njkstyles.styl 文件,这就是 NexT 主题修改不会影响主题平滑升级的灵魂所在了

# 取消掉页脚和自定义样式的注释
# 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

引入样式

自定义样式

使用文本编辑器编辑 styles.styl,部分数值可以根据注释自行调整

// 文本居中
.index .post-body{
    text-align: center !important;
}
// 图片阴影
.medium-zoom-image {
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
}
// 短代码颜色
code {
  background: #64dfdf;
  color:#383a42;
}
// 隐藏顶部黑线条
.headband {
  display: none;
}

//底部文字颜色
.footer-inner {
  color: #07031a;
}

// 选字颜色
::selection {
  background: rgba(0, 149, 255, 0.2);
  color: #555;
}
::-moz-selection {
  background: rgba(0, 149, 255, 0.2);
  color: #555;
}

// 代码滑块
.table-container {
  scrollbar-width: thin;
}
.table-container::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}
.table-container::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #00af91;
}
.table-container::-webkit-scrollbar-track {
  background: none;
}

// 背景图
body {
  background-image: url('https://此处修改为你的背景图片直链');
  background-repeat: no-repeat;
  background-attachment: fixed;
  //background-position: center;
  background-size: cover;

  +mobile() {
    background-size: auto auto;
  }
}

//透明化:自定义opacity的值。范围为0~1的小数
//文章内容透明
.main-inner { 
    opacity: 0.95;
}
//侧边框透明
.sidebar {
  opacity: 0.95;
}
//判断保持夜间模式颜色
@media (prefers-color-scheme: dark) {
  body {
.header-inner {
  margin-top: 18px;
  background: rgba(51,51,51,0.95);
}
  }
}

//菜单栏透明
.header-inner {
  margin-top: 18px;
  background: rgba(255,255,255,0.95);
}

//搜索框透明
.popup {
  opacity: 0.95;
}

// 顶部渐变色
.site-brand-container {
background-image: linear-gradient(356deg, #df2650, #e56948, #e8983b, #e7c223);
}

// 添加顶部边距
.main {
  margin: 8px auto 0;
}

.header {
  +mobile() {
    padding: 8px;
  }
}
// 圆角计划
.header-inner {
  border-radius: 50px 50px 18px 18px;
}
.site-brand-container {
  border-radius: 18px 18px 0 0;
  +mobile() {
    border-radius: 18px;
  }
}
.sidebar-inner {
  border-radius: 18px;
}
.back-to-top {
  border-radius: 0 0 18px 18px;
}
.post-block {
  border-radius: 18px !important;
  margin-top: 18px;
}
.pagination {
  border-radius: 18px !important;
}
.comments {
  border-radius: 18px !important;
}
// 字体大小
.post-body {
  font-size: 1em;
}

// 页脚主题,hexo链接样式
.theme-link {
  color:#333333;
  border-bottom: 1px solid  #333333;

  &:hover {
    color:  #333333;
    border-bottom: 1px solid #333333;
  }
}

自定义页脚样式

使用文本编辑器编辑 footer.njk,此处加了一个萌 ICP 号,如不需要可自行去除

<a href="https://icp.gov.moe/?keyword=20180708" rel="external nofollow noreferrer" target="_blank" data-pjax-state="" style="
    border-bottom-width: 0px;
">萌 ICP 备 20180708 号</a>
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("12/31/2019 23:54:40");//此处修改你的建站时间,注意格式
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "小站在混沌中存活了 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

代码样式

编辑主题配置文件,修改主题默认代码样式为 mac 样式:

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: tomorrow
    dark: night-owl
  prism:
    light: prism-material-light
    dark: prism-duotone-sea
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

🤡 如果不出意外的话,你就可以获得和文章开始预览图差不多的样式了,并且这样通过 NexT 注入功能引入的样式不会影响主题的平滑升级(因为并没有修改主题的源代码)

鸣谢:

Hexo NexT 主题 v8.2.0 美化教程

https://www.dejavu.moe/posts/hexo-next-beautify/

作者

Dejavu

发布于

2021-02-04

更新于

2021-05-13

许可协议

评论