hexo-matery添加站点统计页面


之前有不少铁子让我写一写教程,一直在折腾就没空写现在空了打算逐步开始写一写(本站大多数页面都是我从别人网站借鉴来的),写出来能帮助到有需要的好兄弟也是挺棒的。这里是我开始写matery魔改日记第一站。

演示页面

由于本站建站时间太短,数据过少,导致 统计
效果并不好,可以去大佬的站点查看效果。

百度统计

去百度统计注册账号,添加站点会得到一段js代码以我的为例,每个人都不一样所以要自己注册。

<script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?8723c5c2669a112d08b51b84e31ef4c2";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
    })();
    </script>

将这段js加入head.ejs里,上传百度统计就可以开始记录你站点各种信息了,注意如果你有跳过渲染的页面,该页面需要单独添加这段js代码。

新建页面

1.在source文件夹下新建文件夹census,在该文件夹中新建一个名字为index.md 文本文件
的文件内容为

---
title: census
date: 2020-10-31 10:11:28
type: "census"
layout: "census"
---

2.在主题-config.yaml文件里菜单menu添加

统计:
    url: /census
    icon: fa fa-layer-group

3.在layout文件夹里新建一个census.ejs文本文件,用于后续写入htmlcss和js

这也是matery主题新建页面通用步骤,将对应的文件名替换即可

编辑census.ejs文件

将以下内容,复制到census.ejs文件中需要修改的地方我已经注释了,对照着改就好建议等百度统计积累的时间长一点在添加不然像我一样数据太少不好看。需要自己按月输入数据,动态调用百度统计api有点难。

<%- partial('_partial/bg-cover') %>
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.echarts) %>"></script>
<main class="content">  
    <div class="card">
       <div class="card-content">

       <div id="uv-container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1609569953900"><div style="position: relative; width: 800px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="1000" height="500" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 146px; top: 150px; pointer-events: none;">二月<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d223e7;"></span>2020年访客数: -<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3F77FE;"></span>2021年访客数: 2,225</div></div>
       <div id="pv-container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1609569953901"><div style="position: relative; width: 800px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="1000" height="500" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 577px; top: 315px; pointer-events: none;">九月<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#01C2F9;"></span>2020年访问量: 14,501<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#18D070;"></span>2021年访问量: 9,436</div></div>
       <div id="refer-container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1609569953902"><div style="position: relative; width: 800px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="1000" height="500" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 538px; top: 206px; pointer-events: none;">访问来源 <br>直达: 16334 (52.67%)</div></div>

       </div>
   </div>
   <script>
       var uvChart=echarts.init(document.getElementById('uv-container'),'shine');
       var option={color:['#d223e7','#3F77FE','#01C2F9','#18D070'],title:{text:'站点访客数统计',subtext:'数据来源: 百度统计(自 2020/11/14 开始统计)',textStyle:{color:'#504b4d',}},tooltip:{trigger:'axis'},
       legend:{data:['2020年访客数','2021年访客数'],bottom:0,left:'center',textStyle:{color:'#504b4d',}},//修改年份
       toolbox:{show:true,feature:{mark:{show:true},magicType:{show:true,type:['line','bar','stack','tiled']},restore:{show:true},saveAsImage:{show:true}}},
       calculable:true,xAxis:[{type:'category',boundaryGap:false,data:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
       axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],yAxis:[{type:'value',axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],
       series:[{name:'2020年访客数',type:'line',smooth:true,itemStyle:{normal:{areaStyle:{type:'default'}}},
       data:[null,null,null,null,null,null,null,null,null,null,379,702],//第一个年份对应的数据顺序对应月份
       axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}},},
       {name:'2021年访客数',type:'line',smooth:true,itemStyle:{normal:{areaStyle:{type:'default'}}},
       data:[122,null,null,null,null,null,null,null,null,null,null,null],//第二个年份对应的数据顺序对应月份
       axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}},}]};
       uvChart.setOption(option);var pvChart=echarts.init(document.getElementById('pv-container'));



       var pv_option={color:['#01C2F9','#18D070','#d223e7','#3F77FE'],
       title:{text:'站点访问量统计',subtext:'数据来源: 百度统计(自 2020/11/14 开始统计)',
       textStyle:{color:'#504b4d',}},legend:{data:['2020年访问量','2021年访问量'],//修改年份
       bottom:0,left:'center',textStyle:{color:'#504b4d',}},
       tooltip:{trigger:'axis'},toolbox:{show:true,feature:{mark:{show:true},
       magicType:{show:true,type:['line','bar','stack','tiled']},
       restore:{show:true},saveAsImage:{show:true}}},calculable:true,
       xAxis:[{type:'category',boundaryGap:false,data:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
       axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],yAxis:[{type:'value',axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],
       series:[{name:'2020年访问量',type:'line',stack:'总量',data:[null,null,null,null,null,null,null,null,null,null,2974,4362],axisLabel:{formatter:'{value}',//第一个年份对应的数据顺序对应月份
       textStyle:{color:'#929298'}}},{name:'2021年访问量',type:'line',stack:'总量',data:[500,null,null,null,null,null,null,null,null,null,null,null],//第二个年份对应的数据顺序对应月份
       axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}]};
       pvChart.setOption(pv_option);

       var referChart=echarts.init(document.getElementById('refer-container'));

       var refer_option={title:{text:'站点访客来源统计',itemGap:20,subtext:'数据来源: 百度统计(最近三个月的统计数据)',left:'right',textStyle:{color:'#504b4d',}},
       tooltip:{trigger:'item',
       formatter:'{a} <br/>{b}: {c} ({d}%)'},

       legend:{orient:'vertical',left:10,data:['直达','友链','百度','Google','Bing'],//来源

       textStyle:{color:'#929298',}},series:[{name:'访问来源',type:'pie',selectedMode:'single',radius:[0,'30%'],label:{position:'inner'},labelLine:{show:false},

       data:[{value:5982,name:'直接访问',selected:true},{value:1756,name:'外链'},{value:238,name:'搜索'}]},//大类数据,修改value后面的值

       {name:'访问来源',type:'pie',radius:['40%','55%'],
       label:{formatter:'{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',backgroundColor:'#eee',borderColor:'#aaa',borderWidth:1,borderRadius:4,rich:{a:{color:'#999',lineHeight:22,align:'center'},hr:{borderColor:'#aaa',width:'100%',borderWidth:0.5,height:0},b:{fontSize:16,lineHeight:33},per:{color:'#eee',backgroundColor:'#334455',padding:[2,4],borderRadius:2}}},

       data:[{value:5982,name:'直达'},{value:1756,name:'友链'},{value:126,name:'百度'},{value:92,name:'Google'},{value:19,name:'Bing'}]}]};//各个来源数据,修改value后面的值

       referChart.setOption(refer_option);
       </script>
</main>

对于非matery主题的人来说,去echarts官网https://echarts.apache.org/zh 下载 echarts.js将第二行的引入js这段

<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.echarts) %>"></script>

替换为

<script src="echarts.min.js"></script>

echarts官网提供了详细的教程有空可以去学习一下挺棒的。


文章作者: 不染轻裳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 不染轻裳 !
评论
 上一篇

阅读全文

我的mc服务器又开服了
我的mc服务器又开服了 我的mc服务器又开服了
回顾自己买云服务器的初心其实是用来mc开服和朋友联机玩mc的,后来逐渐走上建站的邪路,最近群里有好兄弟说开个服玩一玩,老腐竹我重操旧业再次开服,一直有一个梦想能有一个很长时间的存档,记得很久以前在b站看了一个玩了四年的存档的视频真的很震撼
2021-01-12
下一篇 

阅读全文

centos服务器手动安装PHP环境
centos服务器手动安装PHP环境 centos服务器手动安装PHP环境
为什么选择手动安装呢,因为不会用宝塔,虽然很多人都说宝塔好用,但我确实不太会用宝塔,还是选择手动安装吧。本文是我在安装过程中对网上教程的总结避坑,以及自己碰到的问题的总结。 安装顺序最佳的安装顺序是先安装apache再安装mysql最后
2021-01-05
  目录