1. jQuery 库的优化

landscape默认是使用Google jQuery 库,但在国内速度不是很理想,这里把它换成新浪的,在themes\landscape\layout\_partial\after-footer.ejs17行:

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

替换为如下代码:

1
2
3
4
5
6
7
8
<script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.3.min.js' type='text/javascript'%3E%3C/script%3E"));
}
// ]]>
</script>

这里不但将 Google 的 jQuery 替换成了 SAE 的,随后还进行了一个判断,如果获取新浪的 jQuery 失败,则使用本网站自己的 jQuery。为了让这段代码有效,我们要去 jQuery 官方下载合适版本的 jQuery 并将其放到 themes/landscape/source/js/目录下,命名为 jquery-2.0.3.min.js
还有一点需要特别注意,那就是 jQuery 这个文件在 hexo 生成博客时会被解析,因此一定要将 jQuery 文件开头处的 //@ sourceMappingURL=jquery-2.0.3.min.map 这一行代码删去,否则会导致博客无法生成。

2. 字体优化

2.1跨平台字体优化

为了能在各个平台上都显示令人满意的字体,我们要修改CSS文件中的字体设置,列出多个备选的字体,操作系统会依次尝试,使用系统中已安装的字体。我们要修改的是themes/landscape/source/css/_variables.styl这一文件,将其中第22行:

1
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif

改成如下内容:

1
font-sans = Tahoma, "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei Light", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif

其中海维提卡(Helvetica)、Arial是英文字体,前者一般存在于苹果电脑和移动设备上,后者一般存在于Windows系统中。冬青黑体(Hiragino Sans GB)、思源黑体(Source Han Sans CN)、文泉驿米黑(WenQuanYi Micro Hei)是中文字体,冬青黑体从OS X 10.6开始集成在苹果系统中,文泉驿米黑在Linux的各大发行版中均较为常见,而思源黑体是近期Google和Adobe合作推出的一款开源字体,很多电脑上也安装了这一字体。这样一来,在绝大部分操作系统中就可以显示美观的字体了。

2.2代码等宽字体优化

Hexo默认的等宽字体是Google的Source Code Pro,这里把它换成360的,在themes/landscape/layout\_partial\head.ejs 第31行:

1
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">

改成如下内容:

1
<link href="http://fonts.useso.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">

3. hexo提交搜索引擎(百度+谷歌)

3.1 确认博客是否被收录

在百度或者谷歌上面输入下面格式来判断,如果能搜索到就说明被收录,否则就没有,用你的域名替代我的http:chaooo.github.io

1
site:chaooo.github.io

3.2 验证网站

两个搜索引擎入口:
Google搜索引擎提交入口百度搜索引擎入口
不管谷歌还是百度都要先添加域名,然后验证网站,这里统一都使用文件验证,就是下载对应的html文件,放到域名根目录下,也就收博客根目录下的source/下面 。
然后部署到服务器,输入地址:http://chaooo.github.io/google4cc3eef6ff5975bf.htmlhttp://chaooo.github.io/baidu_verify_wjJ25Q3cv2.html能访问到就可以点验证按钮(按照谷歌或百度的引导步骤就好)。
注意:若出现验证失败,则是因为hexo编译文件时,会给下载的HTML文件中添加其他的内容,导致验证失败。
则需要在Github里手动修改验证HTML文件,或者不编译。
我的做法是,删除根目录source/下面刚拷贝的两个文件,和编译后生成的public/下的两个同名文件(若细心会注意到source/public/下的两个同名文件大小不一样)。
然后重新执行:

1
hexo generate -d

现在重新验证就通过了。

3.3 安装 RSS(订阅) 和 sitemap(网站地图) 插件

1
2
3
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

修改 hexo_config.yml 站点配置,添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#Extensions
Plugins:
hexo-generator-feed
hexo-generator-sitemap
hexo-generator-baidu-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

部署后,访问 chaooo.github.io/sitemap.xmlchaooo.github.io/baidusitemap.xml,就能看到有内容且第一行为:该 XML 文件并未包含任何关联的样式信息。文档树显示如下。,就说明成功了。
RSS 也差不多,访问 chaooo.github.io/atom.xml ,能看到订阅信息。
注意:把chaooo.github.io换成你自己的个人域名(订阅是顺带安装的,也可以后在安装)。

3.4 让谷歌收录我们的博客

谷歌操作比较简单,就是向Google站长工具提交sitemap。
登录Google账号,添加了站点验证通过后,选择站点,之后在抓取——站点地图中就能看到添加/测试站点地图,然后输入sitemap.xml点击提交。

3.5 让百度收录我们的博客

正常情况,是要等百度爬虫来爬到你的网站,才会被收录。
但是github屏蔽了百度爬虫目前,所以我们要主动出击,我们自己把网站提交给百度。
这就要使用到百度站长平台
1.进入站点管理,找到网页抓取——链接提交——详情点进去。
一般主动提交比手动提交效果好,这里介绍主动提交的两种简单的方法

3.5.1 sitemap提交

直接点击sitemap填写数据文件地址:chaooo.github.io/baidusitemap.xml,输入验证码提交。

3.5.2 自动推送

自动推送很简单,就是在你代码里面嵌入自动推送JS代码,在页面被访问时,页面URL将立即被推送给百度,可将代码添加到\themes\landscape\layout\_partial\after_footer.ejs中的最下面就行。
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>

百度链接提交主动推送后不收录的原因

4. 开启谷歌统计(google analysis)

先到google analysis注册服务,注册时,需要正确填写 网站的URL。注册成功后,会得到一个跟踪ID,以及一段跟踪代码。

1
2
3
4
5
6
7
8
9
10
// 跟踪 ID
// UA-58387143-1
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58387143-1', 'auto');
ga('send', 'pageview');
</script>

\themes\landscape\layout\_config.yml中,将google analysis打开:

1
2
3
google_analytics:
enable: true
id: UA-58387143-1 #刚注册获取的ID

如果设置不起作用,检查在themes\pacman\layout\_partial\下有没有google_analytics.ejs ,有的话就在\themes\landscape\layout\_partial\head.ejs</head>之前,添加下面代码试试:

1
<%- partial('google_analytics') %>

themes\pacman\layout\_partial\不存在google_analytics.ejs 文件,就手动创建:

1
2
3
4
5
6
7
8
9
10
11
12
<% if (theme.google_analytics){ %>
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%= theme.google_analytics %>', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<% } %>

最笨的方法就是删除google_analytics.ejs和刚在_config.yml配置google analysis的几行代码,直接从注册来的代码拷贝到\themes\landscape\layout\_partial\head.ejs</head>之前。

5. 文章永久链接

默认文章链结是以: http://chaooo.github.io/2016/05/24/文章标题/ 的格式,末尾没有.html结尾,有点动态页面的感觉,好像对搜索引擎不太友好,于是可以修改根目录下的 _config.yml 文件里:

1
permalink: :year/:month/:day/:title/

改为:

1
permalink: :year/:month/:day/:title.html

最后浏览器访问就是http://chaooo.github.io/2016/05/24/文章标题.html 的格式了。