Ghost 开源博客平台

Ghost 是一个简洁、强大的写作平台。你只须专注于用文字表达你的想法就好,其余的事情就让 Ghost 来帮你处理吧。

为 Ghost 添加统计代码

目前 Ghost 系统并未在后台提供设置统计代码的功能,也没有提供在主题(theme)中获取统计代码的能力。现在的解决办法是在主题模板中手动添加,这就需要对模板文件做些改动,我们以 Ghost 默认的 casper 主题为例。

进入你的 Ghost 安装目录,用任何编辑器打开 content/themes/casper/default.hbs 文件:

<!DOCTYPE html>  
<html>  
<head>  
    {{! Document Settings }}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {{! Page Meta }}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />

    {{! Ghost outputs important style and meta data with this tag }}
    {{ghost_head}}

    <!-- 可以把统计代码加到此处 -->
</head>  
<body class="{{body_class}}">

    {{! Everything else gets inserted here }}
    {{{body}}}

    <footer class="site-footer">
        <a class="subscribe icon-feed" href="{{@blog.url}}/rss/"><span class="tooltip">Subscribe!</span></a>
        <div class="inner">
             <section class="copyright">All content copyright <a href="{{@blog.url}}/">{{@blog.title}}</a> &copy; {{date format="YYYY"}} &bull; All rights reserved.</section>
             <section class="poweredby">Proudly published with <a class="icon-ghost" href="http://ghost.org">Ghost</a></section>
        </div>
    </footer>

    {{! Ghost outputs important scripts and data with this tag }}
    {{ghost_foot}}

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
    <!-- 也可以把统计代码加到此处 -->
</body>  
</html>

以本站所采用的百度统计为例,在百度后台获取到的统计代码为:

<script type="text/javascript">  
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");  
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6338835ad35c6d950a554fdedb598e48' type='text/javascript'%3E%3C/script%3E"));  
</script>  

我们把统计代码加到页面底部 -- 即 </body> 标签之前:

<!DOCTYPE html>  
<html>  
<head>  
    {{! Document Settings }}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {{! Page Meta }}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />

    {{! Ghost outputs important style and meta data with this tag }}
    {{ghost_head}}

</head>  
<body class="{{body_class}}">

    {{! Everything else gets inserted here }}
    {{{body}}}

    <footer class="site-footer">
        <a class="subscribe icon-feed" href="{{@blog.url}}/rss/"><span class="tooltip">Subscribe!</span></a>
        <div class="inner">
             <section class="copyright">All content copyright <a href="{{@blog.url}}/">{{@blog.title}}</a> &copy; {{date format="YYYY"}} &bull; All rights reserved.</section>
             <section class="poweredby">Proudly published with <a class="icon-ghost" href="http://ghost.org">Ghost</a></section>
        </div>
    </footer>

    {{! Ghost outputs important scripts and data with this tag }}
    {{ghost_foot}}

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
    <!-- 注意:我们把统计代码加到此处 -->
    <script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");  
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6338835ad35c6d950a554fdedb598e48' type='text/javascript'%3E%3C/script%3E"));  
</script>  
</body>  
</html>

你还可以在本页面点击鼠标右键 -> 查看页面源码,就能看到本页面尾部添加的统计代码了!

王赛
关于作者 王赛