自定义hexo的某个主题

2019/06/01 16:51
阅读数 41

用了 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;
}
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部