简介

主旨:数据可视化,一次性加载完毕

  • Google Analytics:大数据分析神器,可以统计ip,大数据分析流量的质量,考虑广告的投放。

  • Baidu Analytics:基本上没多大用途,跟谷歌的类似,但是并没有谷歌用心,介于只要在footer.php调用多两行代码我就顺便贴上了。

  • 静态CDN公共库:像jquery,bootstarp,font awesome这些常见的js/css/font文件;可以调用一些大型网站的统一文件,从而减轻服务器对这些文件的请求。

  • 多说:一款第三方社区评论系统,用在静态博客上非常爽。


教程

  1. 到各个工具的官网注册,并把生成的js/css代码粘贴到footer.php的html部分

  2. 样式类粘贴到header.php中

  3. DIY多说样式教程,在多说那段html前面把自己想要的样式覆盖它原来的样式即可。
    例(comments.php):

<div id="comments"> 
<?php if($this->allow('comment')): ?>
<!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<?php echo $this->cid;?>" data-title="<?php echo $this->title;?>" data-author-key="<?php echo $this->authorId;?>" data-url=""></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"mountainguan-tech"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多说公共JS代码 end -->

<?php else: ?>
<h4><?php _e('评论已关闭'); ?></h4> 
<?php endif; ?> 
</div>

改为:

<!-- 下面的为多说评论代码-->
<div id="comments">
<style type="text/css">
<!-- 下面的为自定义样式->
#ds-thread #ds-reset .ds-post-button{
    background: #9eabb3;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #9eabb3;
}
#ds-reset .ds-meta {
    display: none;
    position: relative;
    padding: 8px 0;
    line-height: 24px;
    border-bottom: 0;
}

#ds-thread #ds-reset button:hover, #ds-thread #ds-reset button:active, #ds-thread #ds-reset a.ds-unread-comments-count:hover, #ds-thread #ds-reset .ds-post-button:hover {
    background: #555;
    color: #fff;
    box-shadow: none;
}
#ds-thread #ds-reset .ds-powered-by a {
    color: #999;
    text-decoration: none;
    display: none;
}
#ds-thread #ds-reset .ds-post-button {
    font-weight: normal;
    font-size: 12px;
    text-shadow: none;
    border: 0;
    line-height: 23px;
    width: 57px;
    background: #999;
    color: #fff;
}

</style> 

<script>
<!-- 下面的为自定义js-->
$('ds-powered-by').remove();
</script>
<?php if($this->allow('comment')): ?>
<!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<?php echo $this->cid;?>" data-title="<?php echo $this->title;?>" data-author-key="<?php echo $this->authorId;?>" data-url=""></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"mountainguan-tech"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.unstable.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多说公共JS代码 end -->

<?php else: ?>
<h4><?php _e('评论已关闭'); ?></h4> 
<?php endif; ?> 
</div>