微调landscape主题
微调原因
在使用Hexo完成我的首部博客后,在官网看了若干主题,但是感觉默认的主题非常的简洁明了符合我的性格。但是由于图片中间的亮光,使得白色副标题显示不清析。同时,既然对landscape做出了微调,那他就不是原来的主题了,同时随着使用,以后我也希望能够逐步完美我的博客,更改一些像分享之类的链接。所以专门开了一个主题仓库,用来做为主题维护之用。
具体修改
下载landscape主题
$git clone https://github.com/hexojs/hexo-theme-landscape ~/文档/hexo/theme/landscape
按步骤修改模板
模板的修改,比如博客最下面的版权信息等,都是一些ejs文件,使用vim直接修改就行。本次修改的是footer.ejs文件。即
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16位置:~/文档/hexo/theme/landscape/layout/_partial/footer.ejs
<footer id="footer">
<% if (theme.sidebar === 'bottom'){ %>
<%- partial('_partial/sidebar') %>
<% } %>
<div class="outer">
<div id="footer-info" class="inner">
<% if (theme.copyright){ %>
<%- render(theme.copyright, 'pug'); %>
<% } %>
© <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
<%= __('powered_by') %> <a href="https://github.com/fengzhenhua-vip/hexo-theme-landscape/" target="_blank">Zhenhua Feng</a>
</div>
</div>
</footer>标题的修改,主要是修改了标题到顶端的比例由50% 到30%,这样子主标题和副标题都在黑色背景下,容易看清楚。
1
2
3
4
5
6
7
8
9位置:~/文档/hexo/theme/landscape/source/_partical/header.styl
#header-title
text-align: center
height: logo-size
position: absolute
top: 30%
left: 0
margin-top: logo-size * -0.5修改副标题字号大小,由18px调整到20px,这样子将邮箱写到副标题下,更易识别。
1
2
3
4
5// Header
logo-size = 40px
subtitle-size = 20px
banner-height = 300px
banner-url = hexo-config("banner")一些分享链接及图片的修改,暂时不修改,记录下位置
1
2~/文档/hexo/theme/landscape/source/js/script.js
~/文档/hexo/theme/landscape/source/js/css/images