mirror of https://github.com/jkjoy/hugoblog.git
新增热力图
This commit is contained in:
parent
1047c5cbce
commit
a0cba86ab8
|
@ -14,11 +14,11 @@ theme = 'farallon'
|
||||||
[[languages.zh-cn.menu.main]]
|
[[languages.zh-cn.menu.main]]
|
||||||
name="影音"
|
name="影音"
|
||||||
url="/movies/"
|
url="/movies/"
|
||||||
weight="4"
|
weight="5"
|
||||||
[[languages.zh-cn.menu.main]]
|
[[languages.zh-cn.menu.main]]
|
||||||
name="分类"
|
name="分类"
|
||||||
url="/categories/"
|
url="/categories/"
|
||||||
weight="2"
|
weight="4"
|
||||||
[[languages.zh-cn.menu.main]]
|
[[languages.zh-cn.menu.main]]
|
||||||
name="标签"
|
name="标签"
|
||||||
url="/tags/"
|
url="/tags/"
|
||||||
|
@ -26,8 +26,11 @@ theme = 'farallon'
|
||||||
[[languages.zh-cn.menu.main]]
|
[[languages.zh-cn.menu.main]]
|
||||||
name="文章"
|
name="文章"
|
||||||
url="/archives/"
|
url="/archives/"
|
||||||
|
weight="2"
|
||||||
|
[[languages.zh-cn.menu.main]]
|
||||||
|
name="首页"
|
||||||
|
url="/"
|
||||||
weight="1"
|
weight="1"
|
||||||
|
|
||||||
[taxonomies]
|
[taxonomies]
|
||||||
category = 'categories'
|
category = 'categories'
|
||||||
tag = 'tags'
|
tag = 'tags'
|
||||||
|
|
|
@ -3,6 +3,401 @@
|
||||||
{{ if $.Site.Params.showprofile }}
|
{{ if $.Site.Params.showprofile }}
|
||||||
{{ partial "profile.html" . }}
|
{{ partial "profile.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
/* GitHub Light Color */
|
||||||
|
--ht-main: #334155;
|
||||||
|
--ht-day-bg: #ebedf0;
|
||||||
|
--ht-tooltip: #24292f;
|
||||||
|
--ht-tooltip-bg: #fff;
|
||||||
|
--ht-lv-0: #ebedf0;
|
||||||
|
--ht-lv-1: #9be9a8;
|
||||||
|
--ht-lv-2: #40c463;
|
||||||
|
--ht-lv-3: #30a14e;
|
||||||
|
--ht-lv-4: #216e39;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
/* GitHub Dark Dimmed Color */
|
||||||
|
--ht-main: #94a3b8;
|
||||||
|
--ht-day-bg: #161b22;
|
||||||
|
--ht-tooltip: #24292f;
|
||||||
|
--ht-tooltip-bg: #fff;
|
||||||
|
--ht-lv-0: #161b22;
|
||||||
|
--ht-lv-1: #0e4429;
|
||||||
|
--ht-lv-2: #006d32;
|
||||||
|
--ht-lv-3: #26a641;
|
||||||
|
--ht-lv-4: #39d353;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
color: var(--ht-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_week {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_month {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_footer {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level {
|
||||||
|
display: flex;
|
||||||
|
gap: 2px;
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: max-content;
|
||||||
|
height: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level_item {
|
||||||
|
display: block;
|
||||||
|
border-radius: 0.125rem;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level_0 {
|
||||||
|
background: var(--ht-lv-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level_1 {
|
||||||
|
background: var(--ht-lv-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level_2 {
|
||||||
|
background: var(--ht-lv-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level_3 {
|
||||||
|
background: var(--ht-lv-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_level_4 {
|
||||||
|
background: var(--ht-lv-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_week {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_day {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: var(--ht-day-bg);
|
||||||
|
margin: 1px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_tooltip {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 12px;
|
||||||
|
left: 50%;
|
||||||
|
width: max-content;
|
||||||
|
color: var(--ht-tooltip);
|
||||||
|
background-color: var(--ht-tooltip-bg);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
opacity: 1;
|
||||||
|
transition: 0.3s;
|
||||||
|
z-index: 1000;
|
||||||
|
text-align: right;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_tooltip_count,
|
||||||
|
.heatmap_tooltip_post {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_tooltip_title,
|
||||||
|
.heatmap_tooltip_date {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_tooltip_date {
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_day_level_0 {
|
||||||
|
background-color: var(--ht-lv-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_day_level_1 {
|
||||||
|
background-color: var(--ht-lv-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_day_level_2 {
|
||||||
|
background-color: var(--ht-lv-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_day_level_3 {
|
||||||
|
background-color: var(--ht-lv-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap_day_level_4 {
|
||||||
|
background-color: var(--ht-lv-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style> <div id="heatmap" style="max-width: 900px;height: 110px;margin-bottom: 40px;"></div>
|
||||||
|
<div class="heatmap_container"> <!-- 全部用 Flex 排版 -->
|
||||||
|
|
||||||
|
<div class="heatmap_footer">
|
||||||
|
<div class="heatmap_less">Less</div>
|
||||||
|
<div class="heatmap_level">
|
||||||
|
<span class="heatmap_level_item heatmap_level_0"></span>
|
||||||
|
<span class="heatmap_level_item heatmap_level_1"></span>
|
||||||
|
<span class="heatmap_level_item heatmap_level_2"></span>
|
||||||
|
<span class="heatmap_level_item heatmap_level_3"></span>
|
||||||
|
<span class="heatmap_level_item heatmap_level_4"></span>
|
||||||
|
</div>
|
||||||
|
<div class="heatmap_more">More</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.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;
|
||||||
|
var dataMap = new Map();
|
||||||
|
{{ range ((where .Site.RegularPages "Type" "posts")) }}
|
||||||
|
var key = {{ .Date.Format "2006-01-02" }};
|
||||||
|
var value = dataMap.get(key);
|
||||||
|
var link = {{ .RelPermalink}};
|
||||||
|
var title = {{ .Title }};
|
||||||
|
|
||||||
|
// multiple posts in same day
|
||||||
|
if (value == null) {
|
||||||
|
dataMap.set(key, [{link, title}]);
|
||||||
|
} else {
|
||||||
|
value.push({link, title});
|
||||||
|
}
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
|
var data = [];
|
||||||
|
for (const [key, value] of dataMap.entries()) {
|
||||||
|
data.push([key, value.length]);
|
||||||
|
}
|
||||||
|
|
||||||
|
var startDate = new Date();
|
||||||
|
var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
|
||||||
|
var startDate = +new Date(year_Mill);
|
||||||
|
var endDate = +new Date();
|
||||||
|
|
||||||
|
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
||||||
|
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
||||||
|
|
||||||
|
// 检测浏览器主题模式并选择颜色方案
|
||||||
|
var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
|
||||||
|
// 定义明亮模式下的颜色方案
|
||||||
|
var lightTheme = {
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
fangkuaicolor:'#F4F4F4',
|
||||||
|
gaoliangcolor: ['#9be9a8'],
|
||||||
|
riqiColor: '#999',
|
||||||
|
textbrcolor: '#FFF',
|
||||||
|
xiankuangcolor:'rgba(0, 0, 0, 0.0)',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定义暗黑模式下的颜色方案
|
||||||
|
var darkTheme = {
|
||||||
|
backgroundColor: '#1A1718',
|
||||||
|
fangkuaicolor:'#282325',
|
||||||
|
gaoliangcolor: ['#0e4429'],
|
||||||
|
riqiColor: '#666',
|
||||||
|
textbrcolor: '#332D2F',
|
||||||
|
xiankuangcolor:'rgba(0, 0, 0, 0.0)',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据浏览器主题模式选择当前主题
|
||||||
|
var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
hideDelay: 1000,
|
||||||
|
enterable: true,
|
||||||
|
backgroundColor: currentTheme.textbrcolor,
|
||||||
|
borderWidth: 0, // 边框宽度为0
|
||||||
|
formatter: function (p) {
|
||||||
|
const date = p.data[0];
|
||||||
|
const posts = dataMap.get(date);
|
||||||
|
var content = `<span style="font-size: 0.75rem;font-family: var(--font-family-code);">${date}</span>`;
|
||||||
|
for (const [i, post] of posts.entries()) {
|
||||||
|
content += "<br>";
|
||||||
|
var link = post.link;
|
||||||
|
var title = post.title;
|
||||||
|
content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
|
||||||
|
}
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
show: false,
|
||||||
|
inRange: {
|
||||||
|
color: currentTheme.gaoliangcolor
|
||||||
|
},
|
||||||
|
},
|
||||||
|
calendar: {
|
||||||
|
left: 20,
|
||||||
|
top:20,
|
||||||
|
bottom:0,
|
||||||
|
right: 0,
|
||||||
|
cellSize: ['auto', 13],
|
||||||
|
range: [startDate, endDate],
|
||||||
|
itemStyle: {
|
||||||
|
color: currentTheme.fangkuaicolor,
|
||||||
|
borderWidth: 3.5,
|
||||||
|
borderColor: currentTheme.backgroundColor,
|
||||||
|
},
|
||||||
|
yearLabel: { show: false },
|
||||||
|
monthLabel: {
|
||||||
|
nameMap: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
textStyle: {
|
||||||
|
color: currentTheme.riqiColor,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dayLabel: {
|
||||||
|
firstDay: 1,
|
||||||
|
nameMap: ['日', '一', '', '三', '', '五', ''],
|
||||||
|
textStyle: {
|
||||||
|
color: currentTheme.riqiColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: currentTheme.xiankuangcolor,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function createDay(date, title, count, post) {
|
||||||
|
const day = document.createElement("div");
|
||||||
|
|
||||||
|
day.className = "heatmap_day";
|
||||||
|
|
||||||
|
day.setAttribute("data-title", title);
|
||||||
|
day.setAttribute("data-count", count);
|
||||||
|
day.setAttribute("data-post", post);
|
||||||
|
day.setAttribute("data-date", date);
|
||||||
|
|
||||||
|
day.addEventListener("mouseenter", function () {
|
||||||
|
const tooltip = document.createElement("div");
|
||||||
|
tooltip.className = "heatmap_tooltip";
|
||||||
|
|
||||||
|
let tooltipContent = "";
|
||||||
|
|
||||||
|
if (post && parseInt(post, 10) !== 0) {
|
||||||
|
tooltipContent += '<span class="heatmap_tooltip_post">' + '共 ' + post + ' 篇' + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (count && parseInt(count, 10) !== 0) {
|
||||||
|
tooltipContent += '<span class="heatmap_tooltip_count">' + ' ' + count + ' 字;' + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (title && parseInt(title, 10) !== 0) {
|
||||||
|
tooltipContent += '<span class="heatmap_tooltip_title">' + title + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (date) {
|
||||||
|
tooltipContent += '<span class="heatmap_tooltip_date">' + date + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
tooltip.innerHTML = tooltipContent;
|
||||||
|
day.appendChild(tooltip);
|
||||||
|
});
|
||||||
|
|
||||||
|
day.addEventListener("mouseleave", function () {
|
||||||
|
const tooltip = day.querySelector(".heatmap_tooltip");
|
||||||
|
if (tooltip) {
|
||||||
|
day.removeChild(tooltip);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (count == 0) {
|
||||||
|
day.classList.add("heatmap_day_level_0");
|
||||||
|
} else if (count > 0 && count < 1000) {
|
||||||
|
day.classList.add("heatmap_day_level_1");
|
||||||
|
} else if (count >= 1000 && count < 2000) {
|
||||||
|
day.classList.add("heatmap_day_level_2");
|
||||||
|
} else if (count >= 2000 && count < 3000) {
|
||||||
|
day.classList.add("heatmap_day_level_3");
|
||||||
|
} else {
|
||||||
|
day.classList.add("heatmap_day_level_4");
|
||||||
|
}
|
||||||
|
|
||||||
|
return day;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
<div class="articleList">
|
<div class="articleList">
|
||||||
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
||||||
{{ $paginator := .Paginate ($pages) }}
|
{{ $paginator := .Paginate ($pages) }}
|
||||||
|
|
Loading…
Reference in New Issue