前言
NexT是Hexo上最有名的主题之一,大量的文字留白、简洁的配置项、清爽的布局使得它的文字阅读体验非常好,到目前它已经在开源社区的维护下迭代了八个大版本,并且保持每月一次更新的稳定维护频率。各种丰富的自定义美化都可以通过inject
注入和不修改主题源码
的条件下做到,在网上通过搜索引擎能找到关于NexT主题的很多自定义教程,我当时在寻找教程的时候的发现很多并不是特别新,本文记录自己使用NexT 8.2.x一个多月以来自己使用的一些美化和配置的记录,也希望能帮助后来的NexT新手。(PS:修改的结果并不一定符合所有人的审美,请酌情选择👻)
More,我要换回Butterfly主题了😂
预览
修改后的样式预览:



样式
NexT提供了四种不同的样式方案:
在主题的配置文件找到Schemes字段,然后选择你想启用的样式方案取消注释,并且将其他三种方案注释掉即可,本文所有的自定义全部基于Gemini方案,修改如下:

侧边栏
修改侧边栏的显示方式:

自定义样式
找到NexT主题配置文件的custom_file_path:
字段,取消如图所示的两个自定义文件的注释:

在本地Hexo源文件目录的/source/_data目录新建这两个文件(如果没有_data目录就自己新建一个)

自定义风格
编辑styles.styl
的内容如下,可根据注释内容自定义:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
| .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-size: cover;
+mobile() { background-size: auto auto; } }
.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; }
.theme-link { color:#333333; border-bottom: 1px solid #333333;
&:hover { color: #333333; border-bottom: 1px solid #333333; } }
|
自定义页脚
编辑footer.njk
的内容如下,可根据注释内容自定义:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <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>
|
页脚我加了一个萌ICP备号,不需要的可以自行删除,仅保留建站时间即可🎈
代码样式
在主题配置文件里修改codeblock
字段如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| codeblock: theme: light: tomorrow dark: night-owl prism: light: prism-material-light dark: prism-duotone-sea copy_button: enable: true style: mac
|
修改后的样式如下:

鸣谢