hexo-matery主题魔改日记（1）

hexo-matery添加站点统计页面

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

演示页面

由于本站建站时间太短，数据过少，导致 [统计]<https://hesifan.top/census >效果并不好，可以去[大佬的站点]<https://bestzuo.cn/s/statistics >查看效果。

百度统计

去百度统计注册账号，添加站点会得到一段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官网提供了详细的教程有空可以去学习一下挺棒的。