Hexo博客 - 自定义主页进阶修改

在将主页固定为特定博文后，对页面样式进行进一步修改：

• 隐藏主页的 博文题图 和 时间标签 ；
• 修改左边栏的文字说明。

需求

在上一篇文章，”Hexo博客 - 简单的自定义主页方法 “ 中，已经通过简单的方法，成功将特定的某一篇博文修改为主页。
但是，主页的风格依旧与普通博文样式相同。对于主页来说，博文的题图和时间、字数等标签，是并无必要的；同时，也可能想要对左边栏的内容进行增删，如为社交按钮标签添加说明等。
为了自定义这些无法在 config 配置文件中，直接修改的样式，我们需要使用一些进阶的方式：对 Hexo 的主题 css 样式文件动刀了。
本篇博客基于 Nexmoe 主题进行修改。其他的官方或第三方主题，基本原理是相似的。

完全删除主页题图

正常情况下，Nexmoe 主题可以在博文的 markdown 文件头部位置，自定义标题图片的宽度和高度：

1
2

coverWidth: 1200
coverHeight: 0

然而，即使将题图的高度定义为 0，主页仍然会显示一个较窄的图片。
其根本原因应该是，Nexmoe 主题限制了题图的最小高度。
遵循这个思路，我们可以找到主题的样式文件。它位于 Hexo 文件夹内的以下路径：

1

node_modules\hexo-theme-nexmoe\source\css\style.styl

通过检查页面元素，发现题图对应的是 nexmoe-post-cover 字段。因此，使用查找工具查找 nexmoe-post-cover 段，并修改其中的 min-height 值为 0：

1
2
3
4
5
6
7
8
9
10
11

.nexmoe-post {
	.nexmoe-post-cover {
		width: 100%;
		padding-bottom: 56.25%;
		position: relative;
		overflow: hidden;
		border-radius: 16px;
		min-height: 0px; # 原先为95px，改为0px
		background-color: #eee;
		}
	}

使用 hexo g 命令更新后，即可看到题图已经消失。

删除主页题图下的时间、字数等标签

为了不改变原有主题设置，同时使特定博文不显示这些标签，我们可以通过 创建一个新 layout 的方式，来实现这一目标。
以后，如果我们也不希望其他博文显示这个标签，直接调用这个 layout 即可。

1 新建对应的 layout 文件

通过检查元素，可以得知，标签所在的主层级为 nexmoe-post。
因此，我们进入 Hexo 主文件夹下的路径：

1

node_modules\hexo-theme-nexmoe\layout

复制该文件夹下的文件：post.ejs，直接粘贴到 同一文件夹 下，并重命名为 diy-mainpage.ejs（当然，也可以自己随便命名）。

2 新建对应的 meta 文件

原理

通过检查元素，可知其元素变量名为class="nexmoe-post-meta nexmoe-rainbow"。打开 diy-mainpage.ejs 文件，查找可知，该元素通过 <%- partial('_partial/_post/meta') %> 调用。

修改方式

首先，我们进入 Hexo 主文件夹下的路径：

1

node_modules\hexo-theme-nexmoe\layout\_partial\_post

找到 meta.ejs 文件，复制该文件，直接粘贴到 同一文件夹 下，并重命名为 diy-meta.ejs。
随后，打开 diy-mainpage.ejs 文件，将第 16 行： <%- partial('_partial/_post/meta') %> ，修改为：

1

<%- partial('_partial/_post/diy-meta') %>

这时候，diy-mainpage 样式中，对应着时间、文字、阅读时间的标签，会通过 diy-meta.ejs 文件调用。

3 修改标签的元素，使其隐藏

打开上一步生成的 diy-meta.ejs 文件，可以看到nexmoe-post-meta nexmoe-rainbow元素的结构。
删除 <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">与</div>之间的所有命令。
修改后，diy-meta.ejs 文件的内容应该如下所示：

1
2
3

<div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
	
</div>

4 在博文中定义新的 layout

打开目标博文的 markdown 文件（依据上一次的教程，应该为hello-world.md），在头部添加以下语句：

1

layout: diy-mainpage

使用 hexo g 命令更新后，即可看到这些标签已经消失。

对左边栏进行定制

左边栏的样式文件，都位于以下路径：

1

node_modules\hexo-theme-nexmoe\layout\_widget

可以在网页中，通过检查元素功能，得知目标元素的 class 名称，并依据需要进行定制。
下面将举出两个例子，如果需要进行其他修改，可以遵循相同的原理。

例子 1：为社交按钮添加说明标题

打开文件：

1

node_modules\hexo-theme-nexmoe\layout\_widget\social.ejs

可以看到社交按钮栏，对应的 nexmoe-widget-wrap 元素类。
如果想要添加标题，需要在这个类的按钮元素（即<div class="nexmoe-widget nexmoe-social">）前面，添加对应标题的样式。如添加”社交账号直达“ 标题：

1

<h2 class="nexmoe-widget-title"><font color="black">社交账号直达</font></h2>

修改后的代码结构如下：

1
2
3
4
5
6

<div class="nexmoe-widget-wrap">
	<h2 class="nexmoe-widget-title"><font color="black">社交账号直达</font></h2>
	<div class="nexmoe-widget nexmoe-social">
		... # 原代码省略...
	</div>
</div>

保存后，执行hexo g命令，即可看到标题。

例子 2：修改搜索栏内的说明文本

打开文件：

1

node_modules\hexo-theme-nexmoe\layout\_widget\search.ejs

可以看到搜索栏，对应的 nexmoe-widget nexmoe-search 元素类。
其中，文本框中内置的文字，使用 placeholder定义。因此，分别将文件中第 5 行和第 9 行中的

1

placeholder="<%= __('search') %>"

修改为：

1

placeholder="<%= __('站内搜索') %>"

保存后，执行hexo g命令，即可看到搜索栏中的文字已经改变。

最终效果

完成上述所有步骤后，最终得到的效果如图：

大功告成！