用了 hexo 框架中的某个主题,但是想自己定制做些修改,网上一搜全是 NexT 主题的修改方法。没有自己选那套怎么办?
别担心,把握住以下两个要点即可:
- 重点关注themes目录(博客模板)
- 如果想修改地方有特殊的一些文字,或者用开发者工具能看到特殊html属性名,可以直接在博客项目文件夹全局搜索,然后找到相应在themes目录下的对应位置,而不是生成后的位置。
如,想要修改搜索框,在下部增加文字说明。
搜 search 会出很多结果,忽略其他文件夹中的,关注themes文件夹,会发现应修改themes/aircloud/layout/_partial/nav.ejs
<div class="search-field" id="search-field">
<div class="search-container">
<div class="search-input">
<span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
<input id="search-input"/>
<span id="begin-search"><%= __('search.search') %></span>
</div>
<div style="padding:10px 20px;font=10;">
若搜索无反应请更换浏览器~
</div>
<div class="search-result-container" id="search-result-container">
</div>
</div>
</div>
如,代码区域字母间隔太小,修改themes/aircloud/source/css/aircloud.css
.highlight .code pre {
100%;
padding-left: 10px;
padding-right: 10px;
background-color: #f7f7f7;
/* 代码块间距太窄故添加 */
letter-spacing: 1px;
}
后来发现,上面间距不动,直接修改该文件最开头的font-family
效果更好。
* {
/* font-family: "italic", Helvetica, Arial, "Heiti SC", "Microsoft YaHei"; */
font-family: Menlo, Monaco, 'Courier New', monospace;
}
同样,列表的样式缩进太大,修改之。
.post-content ol {
/* 列表缩进太大,所以减小 */
padding-left: 0em;
}