自定义hexo的某个主题

用了 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 {
  width: 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;
}

自定义hexo的某个主题

猜你喜欢