善用 Ghost 的 Code Injection 功能

Ghost 后台有一个 Code Injection 的功能,就是可以用我们自己的代码替换皮肤模板的 {{ghost_head}}{{ghost_foot}} 变量

在默认皮肤中,{{ghost_head}} 位于 <head> 标签末尾,而 {{ghost_foot}} 位于 <body> 标签末尾

由于皮肤经常会升级,所以我们如果自定义了一些东西则每次都要手动修改一遍,非常麻烦,这时我们可以利用 Code Injection 功能来简化这些操作,详见以下代码及注释

{{ghost_head}} 代码:

<!-- Nginx 反向代理 Google Fonts 以便国内访问,注意替换为你自己的域名,详见 http://www.99css.com/google-fonts-chinese-bug-in-safari/ -->  
<link rel="stylesheet" type="text/css" href="//fonts.99css.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />  
<!-- 底部搜索框样式 -->  
<style>  
#search {text-align:center}
@media only screen and (max-width: 320px) {
    #search-field {width: 80%; margin-bottom: 20px}
}
</style>  

{{ghost_foot}} 代码:

<script>  
    $(document).ready(function(){
        // 修复 Google Fonts 中文字体在 Safari 中的显示 Bug http://www.99css.com/google-fonts-chinese-bug-in-safari/
        $('html').attr('lang', 'zh-CN');
        //列表页底部加入搜索框
        $('.pagination:last').after('<form id="search" onsubmit="return search()"><input id="search-field"> <button type="submit">search</button></form>');
        //去除不能访问的 Google Fonts
        $('link[rel="stylesheet"]').each(function() {
            var href = $(this).attr('href');
            if (href.indexOf("//fonts.googleapis.com") == 0) {
                $(this).remove();
            }
        });
        //在文章页面加入 disqus 第三方评论代码
        $('.post-footer').append('<div id="disqus_thread"></div>');
        if ($('.post-footer').length > 0) {
            //注意:此处替换 99css 为你自己的 disqus shortname
            var disqus_shortname = '99css';
            (function() {
                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
            })();
        }
    })
//搜索函数,注意替换 99css.com 为你自己的域名
function search() {  
    var q = document.getElementById("search-field");
    if (q.value != "") {
        var url = 'http://www.google.com/search?q=site:99css.com%20' + q.value;
        if (navigator.userAgent.indexOf('iPad') > -1 || navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPhone') > -1) {
            location.href = url;
        } else {
            window.open(url, "_blank");
        }
        return false;
    } else {
        return false;
    }
}
</script>  

此外,{{ghost_foot}} 中还可以加入你自己的网站统计代码等等