Customize a topic of hexo

Hexo with the framework of a topic, but would like to do their own custom modifications, online search is all modification method NexT topic. Do not choose their own set of how to do?

Do not worry, you can grasp the following two points:

Focus on the themes directory (blog template)
If you want to change the place has some special text, or use the developer tools to see special html attribute name, directly in the blog project folder global search, and then locate the corresponding position in the themes directory location instead of generating the .

For example, you want to modify the search box to increase the text in the lower part.

Search search results will be a lot, ignore other folders, concerns themes folder, you will find should be modifiedthemes/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>

For example, the interval is too small letter code region, modifyingthemes/aircloud/source/css/aircloud.css

.highlight .code pre {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f7f7f7;
  /* 代码块间距太窄故添加 */
  letter-spacing: 1px;
}

It was discovered that the above pitch does not move, modify the file directly to the very beginning of font-familybetter.

* {
  /* font-family: "italic", Helvetica, Arial, "Heiti SC", "Microsoft YaHei"; */
  font-family: Menlo, Monaco, 'Courier New', monospace;
}

Likewise, the list of styles indentation too, modify it.

.post-content ol {
  /* 列表缩进太大，所以减小 */
  padding-left: 0em;
}

Customize a topic of hexo

Guess you like