记录

定制自己的Hexo博客主题Landscape

接触Hexo博客也一年多了，去年刚接触的时候，什么都不知道，Git、Node.js等一概不知，按着网上的教程，一步步抓瞎地折腾，花了一个周末，没想到竟然搭建成功了。那时，跟着教程，使用了主题Jacman，一阵子后自己把主题的配色给改成暗黑系的了，当时觉得很酷，后来越来越觉得不顺眼，寻思着什么时候换个主题。这时，我发现Hexo博客默认的主题Landscape挺好，尤其是那张banner大图，感觉很大气。纵使自己现在依然很菜，但我想以此主题为起点，个性化定制自己的博客主题，此文会长期更新下去，记录我的主题定制之路。

导航栏添加链接

修改themes/landscape/layout/_partial下的文件header.ejs，在idsub-nav添加自己想要添加链接的内容，譬如Github。

1
2
3
4
5
6
<% if (theme.github_url){ %>
  <a id="nav-github-link" class="nav-icon" href="<%- url_for(theme.github_url) %>" title="Github"></a>
<% } %>
<% if (theme.rss){ %>
  <a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>"></a>
<% } %>

然后在themes/landscape/source/css/_partial下的文件header.styl，为添加的新链接指定样式。

1
2
3
4
5
6
7
#nav-github-link
  &:before
    content: "\f09b"

#nav-rss-link
  &:before
    content: "\f09e"

最后在主题的配置文件themes/landscape/_config.yml，添加新加链接的值。

1
github_url: https://github.com/laowang