感觉用hexo搭建博客是相当方便的,全程几乎不用接触与代码有关的东西,很快就能搭建起来了,hexo搭建博客的教程很多了,我就不多说了,给大家介绍Quiet,这个主题吧,在我看来这个主题的教程相对来说应该是比较全的吧(虽然我也没浏览过几个主题(◑‿◐))。其实跟这教程走一下就搭好了。我建议安装主题时这样安装:
git clone https://github.com/79e/hexo-theme-quiet.git themes/Quiet
唯一一个不好的地方就是他好像没有弄修改界面背景的配置,我研究了一下其实很简单,我们只要打开themes内的Quiet文件里面layout->_widget->header_body.ejs文件将文件里的东西替换为下面代码:
<% if(theme.Customizebackground==="" ){ %>
<div class="header-body-background">
<div class="header-body-background-content">
<span>
<img src="<%- icon %>" alt="Quiet">
</span>
<h1 style="color: <%- theme.header_message %>"><%- message %></h1>
</div>
</div>
<% }else{ %>
<div class="header-body-background"
style="background-image: url('<%= theme.Customizebackground %>');background-size:100%">
<div class="header-body-background-content">
<span>
<img src="<%- icon %>" alt="Quiet">
</span>
<h1 style="color: <%- theme.header_message %>"><%- message %></h1>
</div>
</div>
<% } %>
再向Quiet文件内的_config.yml添加以下属性:
#header背景图片
Customizebackground: /image/backgound.png # (替换)替换为自己的图片路径
#所有头部信息的颜色
header_message: black # 黑色为例
about界面还需要单独修改,依旧Quiet文件下layout->about.ejs修改为一下代码:
<%- partial('_partial/header',{name:'about'}) %>
<div class="about">
<% if(theme.Customizebackground==="" ){ %>
<div class="about-header-background">
<div class="about-header-background-content">
<img src="<%= page.portrait %>" alt="Q">
<h1 style="color: <%- theme.header_message %>"> <%- page.aubot %>
<span style="color: <%- theme.header_message %>"><%- page.describe %></span>
</h1>
</div>
</div>
<% }else{ %>
<div class="about-header-background"
style="background-image: url('<%= theme.Customizebackground %>');background-size:100%">
<div class="about-header-background-content">
<img src="<%= page.portrait %>" alt="Q">
<h1 style="color: <%- theme.header_message %>"> <%- page.aubot %>
<span style="color: <%- theme.header_message %>"><%- page.describe %></span>
</h1>
</div>
</div>
<% } %>
<div class="about-content" id="content">
<div id="article" class="about-content-info">
<%- page.content %>
</div>
<div id="<%- page.comments ? 'gitalk-container' : ''%>"></div>
</div>
</div>
保存后重新运行就能看到效果了。总的来说这个blog主题还是很不错的,感谢主题作者!!!