2024.7.13
This commit is contained in:
小赵同学 committed
1 parent
92ca74ac8a
commit
2c90fe1cbf
30 files changed
+588
-1268
No files matched your search
@@ -1,158 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<div id="pjax-container">
|
||||
<h2>热力图</h2>
|
||||
<div id="heatmap" style="
|
||||
max-width: 600px;
|
||||
height: 180px;
|
||||
padding: 2px;
|
||||
text-align: center;"
|
||||
></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var chartDom = document.getElementById('heatmap');
|
||||
var myChart = echarts.init(chartDom);
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
var option;
|
||||
|
||||
// echart heatmap data seems to only support two elements tuple
|
||||
// it doesn't render when each item has 3 value
|
||||
// it also only pass first 2 elements when reading event param
|
||||
// so here we build a map to store additional metadata like link and title
|
||||
// map format {date: [wordcount, link, title]}
|
||||
// for more information see https://blog.douchi.space/hugo-blog-heatmap
|
||||
var dataMap = new Map();
|
||||
{{ range ((where .Site.RegularPages "Type" "post")) }}
|
||||
var key = {{ .Date.Format "2006-01-02" }};
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = {{ div .WordCount 1000.0 | lang.FormatNumber 1 }};
|
||||
var link = {{ .RelPermalink}};
|
||||
var title = {{ .Title }};
|
||||
|
||||
// multiple posts in same day, chose the longer one
|
||||
// can also store all posts and use sum as value, but seems like an overkill
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}
|
||||
{{- end -}}
|
||||
|
||||
var data = [];
|
||||
for (const [key, value] of dataMap.entries()) {
|
||||
data.push([key, value.wordCount]);
|
||||
}
|
||||
|
||||
var startDate = new Date();
|
||||
var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
|
||||
var startDate = +new Date(year_Mill);
|
||||
var endDate = +new Date();
|
||||
|
||||
var dayTime = 3600 * 24 * 1000;
|
||||
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
||||
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
||||
|
||||
// change date range according to months we want to render
|
||||
function heatmap_width(months){
|
||||
var startDate = new Date();
|
||||
var mill = startDate.setMonth((startDate.getMonth() - months));
|
||||
var endDate = +new Date();
|
||||
startDate = +new Date(mill);
|
||||
|
||||
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
||||
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
||||
|
||||
var showmonth = [];
|
||||
showmonth.push([
|
||||
startDate,
|
||||
endDate
|
||||
]);
|
||||
return showmonth
|
||||
};
|
||||
|
||||
function getRangeArr() {
|
||||
const windowWidth = window.innerWidth;
|
||||
if (windowWidth >= 600) {
|
||||
return heatmap_width(12);
|
||||
} else if (windowWidth >= 400) {
|
||||
return heatmap_width(9);
|
||||
} else {
|
||||
return heatmap_width(6);
|
||||
}
|
||||
}
|
||||
|
||||
option = {
|
||||
title: {
|
||||
top: 0,
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (p) {
|
||||
const post = dataMap.get(p.data[0]);
|
||||
return post.title + ' | ' + post.wordCount + ' 千字';
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
type: 'piecewise',
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 30,
|
||||
|
||||
inRange: {
|
||||
// [floor color, ceiling color]
|
||||
color: ['#7aa8744c', '#7AA874' ]
|
||||
},
|
||||
splitNumber: 4,
|
||||
text: ['千字', ''],
|
||||
showLabel: true,
|
||||
itemGap: 20,
|
||||
},
|
||||
calendar: {
|
||||
top: 80,
|
||||
left: 20,
|
||||
right: 4,
|
||||
cellSize: ['auto', 12],
|
||||
range: getRangeArr(),
|
||||
itemStyle: {
|
||||
color: '#F1F1F1',
|
||||
borderWidth: 2.5,
|
||||
borderColor: '#fff',
|
||||
},
|
||||
yearLabel: { show: false },
|
||||
// the splitline between months. set to transparent for now.
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.0)',
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
// shadowBlur: 5,
|
||||
// width: 0.5,
|
||||
// type: 'dashed',
|
||||
}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
data: data,
|
||||
}
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.on('click', function(params) {
|
||||
if (params.componentType === 'series') {
|
||||
const post = dataMap.get(params.data[0]);
|
||||
const link = window.location.origin + post.link;
|
||||
window.open(link, '_blank').focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="post-content" itemprop="articleBody">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="post-content" itemprop="articleBody">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -12,6 +12,9 @@
|
||||
<!-- main主体部分 -->
|
||||
{{ block "main" . }}{{ end }}
|
||||
<!-- main主体部分结束 -->
|
||||
{{ if or (eq .Type "about") (eq .Type "post") }}
|
||||
{{ partial "waline.html" . }}
|
||||
{{ end }}
|
||||
<!-- footer页脚部分 -->
|
||||
{{ partial "footer.html" .}}
|
||||
<!-- footer页脚部分结束 -->
|
||||
{{ partial "footer.html" .}}
|
||||
<!-- footer页脚部分结束 -->
|
||||
@@ -26,7 +26,10 @@
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
// 获取当前页面的路径
|
||||
currentPath = "{{ .RelPermalink }}";
|
||||
var currentPath = "{{ .RelPermalink }}";
|
||||
|
||||
console.log(currentPath)
|
||||
|
||||
|
||||
// 调用封装的函数
|
||||
fetchCommentsAndCreateBarrager(currentPath, {
|
||||
@@ -41,5 +44,6 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -3,12 +3,12 @@
|
||||
© 2019 - {{ now.Year }}
|
||||
<br>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||||
{{/* <br>
|
||||
{{/* <br>
|
||||
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
||||
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
||||
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
||||
</a>提供CDN加速服务
|
||||
<br> */}}
|
||||
<br> */}}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@@ -21,28 +21,7 @@
|
||||
<script src="/js/main.js"></script>
|
||||
<script src="/js/mypjax.js"></script>
|
||||
<script src="/js/nprogress.js"></script>
|
||||
<script>
|
||||
var currentPath = "{{ .RelPermalink }}";
|
||||
document.addEventListener("pjax:send", function () {
|
||||
var currentPath = "{{ .RelPermalink }}";
|
||||
});
|
||||
</script>
|
||||
<!-- 加载 Waline 和 PJAX -->
|
||||
<script type="module">
|
||||
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
|
||||
|
||||
// 将 walineInit 赋值给全局变量
|
||||
window.walineInit = walineInit;
|
||||
|
||||
// 定义全局的 initWaline 函数
|
||||
window.initWaline = function() {
|
||||
walineInit({
|
||||
el: '#waline',
|
||||
serverURL: 'https://waline.usj.cc',
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -14,6 +14,9 @@
|
||||
<script src="https://usj.cc/usr/themes/Ying/js/jquery.barrager.js"></script>
|
||||
<script src="/js/jquery.scrollUp.min.js"></script>
|
||||
<script src="/js/pjax.js"></script>
|
||||
{{ if or (eq .Type "about") (eq .Type "post") }}
|
||||
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
||||
{{ end }}
|
||||
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
||||
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
||||
<meta name="template" content="Ying" />
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
<a href="{{ .url }}" rel="noopener" title="{{ .title }}" target="_blank">
|
||||
<span class="links-title">{{ .name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>丨
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,20 @@
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
|
||||
/>
|
||||
<div id="waline"></div>
|
||||
<script type="module">
|
||||
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
|
||||
|
||||
window.walineInit = walineInit;
|
||||
|
||||
window.initWaline = function() {
|
||||
walineInit({
|
||||
el: '#waline',
|
||||
serverURL: 'https://waline.usj.cc',
|
||||
});
|
||||
};
|
||||
|
||||
// Initial load
|
||||
window.initWaline();
|
||||
</script>
|
||||
@@ -0,0 +1,165 @@
|
||||
<div id="heatmap" style="
|
||||
max-width: 1900px;
|
||||
height: 180px;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
"
|
||||
></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var chartDom = document.getElementById('heatmap');
|
||||
var myChart = echarts.init(chartDom);
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
var option;
|
||||
|
||||
// echart heatmap data seems to only support two elements tuple
|
||||
// it doesn't render when each item has 3 value
|
||||
// it also only pass first 2 elements when reading event param
|
||||
// so here we build a map to store additional metadata like link and title
|
||||
// map format {date: [{wordcount, link, title}]}
|
||||
// for more information see https://blog.douchi.space/hugo-blog-heatmap
|
||||
var dataMap = new Map();
|
||||
{{ range ((where .Site.RegularPages "Type" "post")) }}
|
||||
var key = {{ .Date.Format "2006-01-02" }};
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = {{ .WordCount }};
|
||||
var link = {{ .RelPermalink}};
|
||||
var title = {{ .Title }};
|
||||
|
||||
// multiple posts in same day
|
||||
if (value == null) {
|
||||
dataMap.set(key, [{wordCount, link, title}]);
|
||||
} else {
|
||||
value.push({wordCount, link, title});
|
||||
}
|
||||
{{- end -}}
|
||||
|
||||
var data = [];
|
||||
// sum up the word count
|
||||
for (const [key, value] of dataMap.entries()) {
|
||||
var sum = 0;
|
||||
for (const v of value) {
|
||||
sum += v.wordCount;
|
||||
}
|
||||
data.push([key, (sum / 1000).toFixed(1)]);
|
||||
}
|
||||
|
||||
var startDate = new Date();
|
||||
var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
|
||||
var startDate = +new Date(year_Mill);
|
||||
var endDate = +new Date();
|
||||
|
||||
var dayTime = 3600 * 24 * 1000;
|
||||
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
||||
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
||||
|
||||
// change date range according to months we want to render
|
||||
function heatmap_width(months){
|
||||
var startDate = new Date();
|
||||
var mill = startDate.setMonth((startDate.getMonth() - months));
|
||||
var endDate = +new Date();
|
||||
startDate = +new Date(mill);
|
||||
|
||||
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
||||
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
||||
|
||||
var showmonth = [];
|
||||
showmonth.push([
|
||||
startDate,
|
||||
endDate
|
||||
]);
|
||||
return showmonth
|
||||
};
|
||||
|
||||
function getRangeArr() {
|
||||
const windowWidth = window.innerWidth;
|
||||
if (windowWidth >= 600) {
|
||||
return heatmap_width(12);
|
||||
} else if (windowWidth >= 400) {
|
||||
return heatmap_width(9);
|
||||
} else {
|
||||
return heatmap_width(6);
|
||||
}
|
||||
}
|
||||
|
||||
option = {
|
||||
title: {
|
||||
top: 0,
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
hideDelay: 1000,
|
||||
enterable: true,
|
||||
formatter: function (p) {
|
||||
const date = p.data[0];
|
||||
const posts = dataMap.get(date);
|
||||
var content = `${date}`;
|
||||
for (const [i, post] of posts.entries()) {
|
||||
content += "<br>";
|
||||
var link = post.link;
|
||||
var title = post.title;
|
||||
var wordCount = (post.wordCount / 1000).toFixed(1);
|
||||
content += `<a href="${link}" target="_blank">${title} | ${wordCount} k</a>`
|
||||
}
|
||||
return content;
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
type: 'piecewise',
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 30,
|
||||
|
||||
inRange: {
|
||||
// [floor color, ceiling color]
|
||||
color: ['#7aa8744c', '#7AA874' ]
|
||||
},
|
||||
splitNumber: 4,
|
||||
text: ['千字', ''],
|
||||
showLabel: true,
|
||||
itemGap: 20,
|
||||
},
|
||||
calendar: {
|
||||
top: 80,
|
||||
left: 20,
|
||||
right: 4,
|
||||
cellSize: ['auto', 13],
|
||||
range: getRangeArr(),
|
||||
itemStyle: {
|
||||
color: '#F1F1F1',
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#fff',
|
||||
},
|
||||
yearLabel: { show: false },
|
||||
// the splitline between months. set to transparent for now.
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.0)',
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
// shadowBlur: 5,
|
||||
// width: 0.5,
|
||||
// type: 'dashed',
|
||||
}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
data: data,
|
||||
}
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.on('click', function(params) {
|
||||
if (params.componentType === 'series') {
|
||||
// open the first post on the day
|
||||
const post = dataMap.get(params.data[0])[0];
|
||||
const link = window.location.origin + post.link;
|
||||
window.open(link, '_blank').focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in new issue
Block a user