定制自己的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

Copyright © 2021 DukeLuo Blog

Powered by Hexo • Theme Candelas