Hexo博客优化——站内搜索、版权、IE8兼容
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 | <script type="text/javascript"> |
在themes\landscape\_config.yml
末尾添加如下代码:
1 | swift_search: |
然后到themes\landscape\layout\_partial\header.ejs
中找到:<div id="search-form-wrap">...</div>
刪除里面的內容,插入如下代码:
1 | <div id="search-form-wrap"> |
然后到themes\landscape\source\css\_partial\header.styl
找到#search-form-wrap
对其样式微调,大概在118行,修改后的值:
1 | #search-form-wrap |
然后到themes\landscape\source\css\_partial\header.styl
找到.nav-icon
,大概在81行,在其后面添加(z-index: 1):
1 | .nav-icon |
注意:在使用中我发现swiftype搜索框在IE和火狐浏览器根本不能唤醒搜狗输入法的中文输入,必须要先输入一个英文字母才能输入中文,我在swiftype官网测试的swiftype搜索框也一样。(我分别测试了Chrome–v49,Firefox Developer Edition–v47,IE11/IE10/IE9,结果只有Chrome能唤起搜狗中文。)
2. 页尾版权信息修改
在themes\landscape\layout\_partial\footer.ejs
中,第6行开始,修改其为居中对齐,添加网站地图、订阅、联系博主链接:
1 | <div id="footer-info" class="inner" style="text-align:center;"> |
3. 对于低版本IE布局微调
3.1 加入低版本IE浏览器提醒
Hexo主题大多都只完美支持IE9及以上版本的浏览器,低版本IE会影响网站体验,所以要提示浏览者及时更换现代浏览器,在themes\landscape\layout\_partial\header.ejs
中找到<div id="header-outer" class="outer"></div>
以其为父元素添加:
1 | <!--[if lt IE 9]> |
这样,现代浏览器都不会解析这段代码,直到IE8及其版本的浏览器才会显示。
3.2 (对于旧IE)header与footer布局微调
发现博客在IE8及其版本的浏览器显示很多样式都乱掉了,特别是头部header,毕竟还有不少人用的低版本浏览器,平常工作中也要求做到兼容到IE8,所以这里只做稍微调。
在themes\landscape\layout\_partial\header.ejs
中,把<header id="header"></div>
用下面的代码包起来:
1 | <!--[if lt IE 9]><div id="header"><![endif]--> |
在themes\landscape\layout\_partial\footer.ejs
中,把<header id="footer"></div>
用下面的代码包起来:
1 | <!--[if lt IE 9]><div id="footer"><![endif]--> |
虽然这样调整并不高明,但能使其在IE8下显示效果大体上还能接受。
原文作者: 郑超(Charles·Zheng)
原文链接: http://chaoo.oschina.io/2016/05/25/Hexo博客优化--站内搜索、版权、IE8兼容.html
版权声明: 转载请注明出处(保留作者署名及原文链接)