1.添加Hexo的swiftype站内搜索

先去swiftype官网注册一个账号,然后根据指引建立好自己网站对应的索引。

步骤:
Create an engine
—> Create a search engine >(standard web crawler)
—> WEBSITE URL下填写你的网站地址:如:http://chaooo.github.io
—> ENGINE NAME自己取一个名字:如:chaooo
—> 然后他开始抓取你网站的数据。
—> 完成后,可以点击Content去看看抓了些什么数据,然后可以自己删除不想要的数据。(可选)
—> 点击Install Search复制里面的代码:

然后在themes\landscape\layout\_partial\after-footer.ejs在最后加上刚复制的代码:

1
2
3
4
5
6
7
8
<script type="text/javascript">
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
_st('install','Hvy4-e-Ew4x8PR6Let84','2.0.0');
</script>

themes\landscape\_config.yml末尾添加如下代码:

1
2
swift_search:
enable: true

然后到themes\landscape\layout\_partial\header.ejs中找到:<div id="search-form-wrap">...</div>刪除里面的內容,插入如下代码:

1
2
3
4
5
6
<div id="search-form-wrap">
<form action="" method="get" accept-charset="UTF-8" class="search-form">
<input autocapitalize="off" autocorrect="off" autocomplete="off" name="q" results="0" id="search" maxlength="20" placeholder="Search" style="border:none;background:none;width:161px;height:30px;line-height:30px;padding:0px 11px 0px 28px;" class="st-default-search-input search-form-input" type="text">
<button type="submit" class="search-form-submit"></button>
</form>
</div>

然后到themes\landscape\source\css\_partial\header.styl找到#search-form-wrap对其样式微调,大概在118行,修改后的值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#search-form-wrap
position: absolute
top: 14px
width: 200px
height: 30px
right: 35px
opacity: 0
visibility: hidden
transition: 0.2s ease-out
transform: scale(.5) translate(94px, 0)
&.on
opacity: 1
visibility: visible
transform: scale(1) translate(0, 0)
@media mq-mobile
width: 80%
right: -80%

然后到themes\landscape\source\css\_partial\header.styl找到.nav-icon,大概在81行,在其后面添加(z-index: 1):

1
2
3
4
5
6
7
8
9
10
11
.nav-icon
@extend $nav-link
font-family: font-icon
text-align: center
font-size: font-size
width: font-size
height: font-size
padding: 20px 15px
position: relative
cursor: pointer
z-index: 1

注意:在使用中我发现swiftype搜索框在IE和火狐浏览器根本不能唤醒搜狗输入法的中文输入,必须要先输入一个英文字母才能输入中文,我在swiftype官网测试的swiftype搜索框也一样。(我分别测试了Chrome–v49,Firefox Developer Edition–v47,IE11/IE10/IE9,结果只有Chrome能唤起搜狗中文。)

2. 页尾版权信息修改

themes\landscape\layout\_partial\footer.ejs中,第6行开始,修改其为居中对齐,添加网站地图、订阅、联系博主链接:

1
2
3
4
5
<div id="footer-info" class="inner" style="text-align:center;">
Copyright &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
<%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a><br>
<a href="/baidusitemap.xml">网站地图</a>&nbsp; &nbsp;|&nbsp; &nbsp;<a href="/atom.xml">订阅本站</a>&nbsp; &nbsp;|&nbsp; &nbsp;<a href="mailto:zhenggchaoo@gmail.com" target="_blank">联系博主</a>
</div>

3. 对于低版本IE布局微调

3.1 加入低版本IE浏览器提醒

Hexo主题大多都只完美支持IE9及以上版本的浏览器,低版本IE会影响网站体验,所以要提示浏览者及时更换现代浏览器,在themes\landscape\layout\_partial\header.ejs中找到<div id="header-outer" class="outer"></div>以其为父元素添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--[if lt IE 9]>
<style>
.hid-ltIE9{position:absolute;bottom:0;z-index:999;width:100%;line-height:46px;color:#7b1a00;font-size:14px;text-align:center;background:#fff3c8;border-radius:4px;border:1px solid #;text-shadow:0 1px #fff;-webkit-box-shadow:0 -1px 4px #ccc inset;box-shadow:0 -1px 4px #ccc inset;border:1px solid #ccc;}
.hid-ltIE9 a{color:#258fb8;text-decoration:none;}
.hid-ltIE9 a:hover{text-decoration:underline;}
.hid-exclamation-triangle,.hid-chrome,.hid-firefox{font:normal normal normal 14px/1 FontAwesome;display:inline-block;width:30px;height:30px;font-size:14px;text-align:center;}
.hid-exclamation-triangle:before{content:"\f071";}
.hid-chrome:before{content:"\f268";}
.hid-firefox:before{content:"\f269";}
</style>
<p class="hid-ltIE9">
<i class="hid-exclamation-triangle" aria-hidden="true"></i>重要提示:您当前使用的浏览器版本过低,可能存在安全风险!想要更好的体验,建议升级浏览器:
<a href="https://www.google.cn/intl/zh-CN/chrome/browser/desktop/" title="谷歌Chrome浏览器"><i class="hid-chrome" aria-hidden="true"></i>
Chrome</a>、
<a href="http://www.firefox.com.cn/download/"title="火狐Firefox浏览器"><i class="hid-firefox" aria-hidden="true"></i>Firefox</a>
</p>
<![endif]-->

这样,现代浏览器都不会解析这段代码,直到IE8及其版本的浏览器才会显示。

3.2 (对于旧IE)header与footer布局微调

发现博客在IE8及其版本的浏览器显示很多样式都乱掉了,特别是头部header,毕竟还有不少人用的低版本浏览器,平常工作中也要求做到兼容到IE8,所以这里只做稍微调。
themes\landscape\layout\_partial\header.ejs中,把<header id="header"></div>用下面的代码包起来:

1
2
3
4
5
<!--[if lt IE 9]><div id="header"><![endif]-->
<header id="header">
//....其他代码
</header>
<!--[if lt IE 9]></div><![endif]-->

themes\landscape\layout\_partial\footer.ejs中,把<header id="footer"></div>用下面的代码包起来:

1
2
3
4
5
<!--[if lt IE 9]><div id="footer"><![endif]-->
<footer id="footer">
//....其他代码
</footer>
<!--[if lt IE 9]></div><![endif]-->

虽然这样调整并不高明,但能使其在IE8下显示效果大体上还能接受。