更新热力图
This commit is contained in:
小赵同学 committed
1 parent
e32ca6759d
commit
92ca74ac8a
11 files changed
+1280
-3
No files matched your search
@@ -0,0 +1,11 @@
|
||||
+++
|
||||
title = "Demo05"
|
||||
date = 2024-07-12T19:38:33+08:00
|
||||
draft = false
|
||||
categories = []
|
||||
tags = []
|
||||
author = "小赵同学"
|
||||
+++
|
||||
|
||||
请输入您的文章内容。
|
||||
|
||||
@@ -63,6 +63,205 @@
|
||||
|
||||
|
||||
<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;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var dataMap = new Map();
|
||||
|
||||
var key = "2024-07-12";
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = "0.0";
|
||||
var link = "/post/demo05/";
|
||||
var title = "Demo05";
|
||||
|
||||
|
||||
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}
|
||||
var key = "2024-07-11";
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = "0.0";
|
||||
var link = "/post/demo03/";
|
||||
var title = "Demo03";
|
||||
|
||||
|
||||
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}
|
||||
var key = "2024-07-11";
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = "0.1";
|
||||
var link = "/post/demo01/";
|
||||
var title = "Demo01";
|
||||
|
||||
|
||||
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}
|
||||
var key = "2024-07-11";
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = "0.0";
|
||||
var link = "/post/my-second-post/";
|
||||
var title = "My Second Post";
|
||||
|
||||
|
||||
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}
|
||||
var key = "2024-07-11";
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = "0.0";
|
||||
var link = "/post/my-first-post/";
|
||||
var title = "My First Post";
|
||||
|
||||
|
||||
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}
|
||||
var key = "2024-07-09";
|
||||
var value = dataMap.get(key);
|
||||
var wordCount = "0.0";
|
||||
var link = "/post/helloworld/";
|
||||
var title = "Helloworld";
|
||||
|
||||
|
||||
|
||||
if (value == null || wordCount > value[0]) {
|
||||
dataMap.set(key, {wordCount, link, title});
|
||||
}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);
|
||||
|
||||
|
||||
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: {
|
||||
|
||||
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 },
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.0)',
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
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">
|
||||
<h2 id="关于我">关于我</h2>
|
||||
<p>00后，湖北襄阳人，目前大三本科在读</p>
|
||||
@@ -71,10 +270,14 @@
|
||||
<p>喜欢用文字记录生活，是用心在写文章的宝藏博主</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<nav class="nav" style="clear: both;">
|
||||
© 2019 - 2024
|
||||
|
||||
@@ -90,6 +90,18 @@
|
||||
uk-scrollspy="cls: uk-animation-slide-right-medium; repeat: false">
|
||||
|
||||
|
||||
<li data-date="2024 0712">
|
||||
<span class="articles_date_time">07/12</span>
|
||||
<a class="a-archives" uk-scrollspy="cls: uk-animation-slide-left-medium; repeat: false"
|
||||
href="http://localhost:1313/post/demo05/">Demo05</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li data-date="2024 0711">
|
||||
<span class="articles_date_time">07/11</span>
|
||||
<a class="a-archives" uk-scrollspy="cls: uk-animation-slide-left-medium; repeat: false"
|
||||
|
||||
@@ -1694,3 +1694,187 @@ input[type=submit] {
|
||||
.wl-editor, .wl-input {
|
||||
max-width: 96%important;
|
||||
}
|
||||
|
||||
/* 热力图css */
|
||||
: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: column;
|
||||
justify-content: space-around;
|
||||
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);
|
||||
}
|
||||
+7
-2
@@ -70,6 +70,13 @@
|
||||
<div class="posts">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 12, 2024</div>
|
||||
<a href="http://localhost:1313/post/demo05/">Demo05</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 11, 2024</div>
|
||||
<a href="http://localhost:1313/post/demo03/">Demo03</a>
|
||||
@@ -97,8 +104,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
+8
-1
@@ -6,8 +6,15 @@
|
||||
<description>Recent content on 小赵同学的博客</description>
|
||||
<generator>Hugo</generator>
|
||||
<language>zh-cn</language>
|
||||
<lastBuildDate>Thu, 11 Jul 2024 15:30:40 +0800</lastBuildDate>
|
||||
<lastBuildDate>Fri, 12 Jul 2024 19:38:33 +0800</lastBuildDate>
|
||||
<atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>Demo05</title>
|
||||
<link>http://localhost:1313/post/demo05/</link>
|
||||
<pubDate>Fri, 12 Jul 2024 19:38:33 +0800</pubDate>
|
||||
<guid>http://localhost:1313/post/demo05/</guid>
|
||||
<description>请输入您的文章内容。</description>
|
||||
</item>
|
||||
<item>
|
||||
<title>Demo03</title>
|
||||
<link>http://localhost:1313/post/demo03/</link>
|
||||
|
||||
@@ -86,3 +86,186 @@ function fetchCommentsAndCreateBarrager(path, options) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取最近一年的文章数据
|
||||
{{ $pages := where .Site.RegularPages "Date" ">" (now.AddDate -1 0 0) }}
|
||||
{{ $pages := $pages.Reverse }}
|
||||
var blogInfo = {
|
||||
"pages": [
|
||||
{{ range $index, $element := $pages }}
|
||||
{
|
||||
"title": "{{ replace (replace .Title "《" "〈") "》" "〉" }}",
|
||||
"date": "{{ .Date.Format "2006-01-02" }}",
|
||||
"year": "{{ .Date.Format "2006" }}",
|
||||
"month": "{{ .Date.Format "01" }}",
|
||||
"day": "{{ .Date.Format "02" }}",
|
||||
"word_count": "{{ .WordCount }}"
|
||||
}{{ if ne (add $index 1) (len $pages) }},{{ end }}
|
||||
{{ end }}
|
||||
]
|
||||
};
|
||||
// console.log(blogInfo)
|
||||
|
||||
let currentDate = new Date();
|
||||
currentDate.setFullYear(currentDate.getFullYear() - 1);
|
||||
|
||||
let startDate;
|
||||
|
||||
let monthDiv = document.querySelector('.month');
|
||||
let monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
numMonths = 6;
|
||||
} else {
|
||||
numMonths = 12;
|
||||
}
|
||||
|
||||
let startMonthIndex = (currentDate.getMonth() - (numMonths - 1) + 12) % 12;
|
||||
for (let i = startMonthIndex; i < startMonthIndex + numMonths; i++) {
|
||||
let monthSpan = document.createElement('span');
|
||||
let monthIndex = i % 12;
|
||||
monthSpan.textContent = monthNames[monthIndex];
|
||||
monthDiv.appendChild(monthSpan);
|
||||
}
|
||||
|
||||
function getStartDate() {
|
||||
const today = new Date();
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
numMonths = 6;
|
||||
} else {
|
||||
numMonths = 12;
|
||||
}
|
||||
|
||||
const startDate = new Date(today.getFullYear(), today.getMonth() - numMonths + 1, 1, today.getHours(), today.getMinutes(), today.getSeconds());
|
||||
|
||||
while (startDate.getDay() !== 1) {
|
||||
startDate.setDate(startDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return startDate;
|
||||
}
|
||||
|
||||
function getWeekDay(date) {
|
||||
const day = date.getDay();
|
||||
return day === 0 ? 6 : day - 1;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function createWeek() {
|
||||
const week = document.createElement('div');
|
||||
week.className = 'heatmap_week';
|
||||
return week;
|
||||
}
|
||||
|
||||
function createHeatmap() {
|
||||
const container = document.getElementById('heatmap');
|
||||
const startDate = getStartDate();
|
||||
const endDate = new Date();
|
||||
const weekDay = getWeekDay(startDate);
|
||||
|
||||
let currentWeek = createWeek();
|
||||
container.appendChild(currentWeek);
|
||||
|
||||
let currentDate = startDate;
|
||||
let i = 0;
|
||||
|
||||
while (currentDate <= endDate) {
|
||||
if (i % 7 === 0 && i !== 0) {
|
||||
currentWeek = createWeek();
|
||||
container.appendChild(currentWeek);
|
||||
}
|
||||
|
||||
const dateString = `${currentDate.getFullYear()}-${("0" + (currentDate.getMonth()+1)).slice(-2)}-${("0" + (currentDate.getDate())).slice(-2)}`;
|
||||
|
||||
const articleDataList = blogInfo.pages.filter(page => page.date === dateString);
|
||||
|
||||
if (articleDataList.length > 0) {
|
||||
const titles = articleDataList.map(data => data.title);
|
||||
const title = titles.map(t => `《${t}》`).join('<br />');
|
||||
|
||||
let count = 0;
|
||||
let post = articleDataList.length;
|
||||
|
||||
articleDataList.forEach(data => {
|
||||
count += parseInt(data.word_count, 10);
|
||||
});
|
||||
|
||||
const formattedDate = formatDate(currentDate);
|
||||
const day = createDay(formattedDate, title, count, post);
|
||||
currentWeek.appendChild(day);
|
||||
} else {
|
||||
const formattedDate = formatDate(currentDate);
|
||||
const day = createDay(formattedDate, '', '0', '0');
|
||||
currentWeek.appendChild(day);
|
||||
}
|
||||
|
||||
i++;
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const options = { month: 'short', day: 'numeric', year: 'numeric' };
|
||||
return date.toLocaleDateString('en-US', options);
|
||||
}
|
||||
|
||||
createHeatmap();
|
||||
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>Demo05</title>
|
||||
<link rel='stylesheet' href='/css/light.css'>
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="/css/normalize.css">
|
||||
<link rel="stylesheet" href="/css/remixicon.css">
|
||||
<link rel="stylesheet" href="/css/uikit.min.css">
|
||||
<link rel="stylesheet" href="/css/nprogress.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
||||
<link rel="stylesheet" href="https://usj.cc/usr/themes/Ying/css/barrager.css">
|
||||
<script src="/js/jquery.min.js"></script>
|
||||
<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>
|
||||
<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" />
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="head_author_img load-memos-editor">
|
||||
<img src="https://avatars.githubusercontent.com/u/94612053" class="blog-img" width="80" height="80" alt="小赵同学的博客" />
|
||||
</div>
|
||||
<div class="site-description">
|
||||
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
||||
<nav class="nav social uk-visible@m">
|
||||
<ul class="flat">
|
||||
|
||||
|
||||
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
||||
|
||||
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
||||
|
||||
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
||||
|
||||
|
||||
</ul>
|
||||
<div class="yiyandes">风吹云散，云卷云舒</div>
|
||||
</nav>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<ul class="flat">
|
||||
<li class="active"><a href="http://localhost:1313/">首页</a></li>
|
||||
<li class="active"><a href="http://localhost:1313//about">关于</a></li>
|
||||
<li class="active"><a href="http://localhost:1313//says">留言</a></li>
|
||||
<li class="active"><a href="http://localhost:1313//archives">归档</a></li>
|
||||
<li class="active"><a href="http://localhost:1313//links">友链</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="pjax-container">
|
||||
<article style="margin-bottom: 3.5em;">
|
||||
<h1 class="post-title" itemprop="name headline">Demo05</h1>
|
||||
<div class="meta">
|
||||
作者: 小赵同学 浏览: 字数: 1 分类:
|
||||
</div>
|
||||
<div class="post-content" itemprop="articleBody">
|
||||
<p>请输入您的文章内容。</p>
|
||||
|
||||
</div>
|
||||
<div class="post-tags" style="margin-top: -30px;">
|
||||
<nav class="nav tags">
|
||||
<ul class="flat">
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
<hr class="uk-divider-icon">
|
||||
<div id="comments" class="comments-area">
|
||||
|
||||
<div id="waline"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
|
||||
currentPath = "\/post\/demo05\/";
|
||||
|
||||
|
||||
fetchCommentsAndCreateBarrager(currentPath, {
|
||||
looper_time: 3000,
|
||||
defaultAvatar: 'static/default-avatar.png',
|
||||
defaultInfo: 'No comment',
|
||||
defaultLink: '#',
|
||||
close: true,
|
||||
speed: 6,
|
||||
color: '#fff',
|
||||
old_ie_color: '#000000'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<nav class="nav" style="clear: both;">
|
||||
© 2019 - 2024
|
||||
<br>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/iconfont.js"></script>
|
||||
<script src="/js/lightgallery.umd.min.js"></script>
|
||||
<script src="/js/uikit.min.js"></script>
|
||||
<script src="/js/EasyLazyload.min.js"></script>
|
||||
<script src="/js/view-image.min.js"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
<script src="/js/mypjax.js"></script>
|
||||
<script src="/js/nprogress.js"></script>
|
||||
<script>
|
||||
var currentPath = "\/post\/demo05\/";
|
||||
document.addEventListener("pjax:send", function () {
|
||||
var currentPath = "\/post\/demo05\/";
|
||||
});
|
||||
</script>
|
||||
|
||||
<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',
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,158 @@
|
||||
{{ 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>
|
||||
|
||||
|
||||
{{ end }}
|
||||
@@ -1694,3 +1694,187 @@ input[type=submit] {
|
||||
.wl-editor, .wl-input {
|
||||
max-width: 96%important;
|
||||
}
|
||||
|
||||
/* 热力图css */
|
||||
: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: column;
|
||||
justify-content: space-around;
|
||||
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);
|
||||
}
|
||||
@@ -86,3 +86,186 @@ function fetchCommentsAndCreateBarrager(path, options) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取最近一年的文章数据
|
||||
{{ $pages := where .Site.RegularPages "Date" ">" (now.AddDate -1 0 0) }}
|
||||
{{ $pages := $pages.Reverse }}
|
||||
var blogInfo = {
|
||||
"pages": [
|
||||
{{ range $index, $element := $pages }}
|
||||
{
|
||||
"title": "{{ replace (replace .Title "《" "〈") "》" "〉" }}",
|
||||
"date": "{{ .Date.Format "2006-01-02" }}",
|
||||
"year": "{{ .Date.Format "2006" }}",
|
||||
"month": "{{ .Date.Format "01" }}",
|
||||
"day": "{{ .Date.Format "02" }}",
|
||||
"word_count": "{{ .WordCount }}"
|
||||
}{{ if ne (add $index 1) (len $pages) }},{{ end }}
|
||||
{{ end }}
|
||||
]
|
||||
};
|
||||
// console.log(blogInfo)
|
||||
|
||||
let currentDate = new Date();
|
||||
currentDate.setFullYear(currentDate.getFullYear() - 1);
|
||||
|
||||
let startDate;
|
||||
|
||||
let monthDiv = document.querySelector('.month');
|
||||
let monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
numMonths = 6;
|
||||
} else {
|
||||
numMonths = 12;
|
||||
}
|
||||
|
||||
let startMonthIndex = (currentDate.getMonth() - (numMonths - 1) + 12) % 12;
|
||||
for (let i = startMonthIndex; i < startMonthIndex + numMonths; i++) {
|
||||
let monthSpan = document.createElement('span');
|
||||
let monthIndex = i % 12;
|
||||
monthSpan.textContent = monthNames[monthIndex];
|
||||
monthDiv.appendChild(monthSpan);
|
||||
}
|
||||
|
||||
function getStartDate() {
|
||||
const today = new Date();
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
numMonths = 6;
|
||||
} else {
|
||||
numMonths = 12;
|
||||
}
|
||||
|
||||
const startDate = new Date(today.getFullYear(), today.getMonth() - numMonths + 1, 1, today.getHours(), today.getMinutes(), today.getSeconds());
|
||||
|
||||
while (startDate.getDay() !== 1) {
|
||||
startDate.setDate(startDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return startDate;
|
||||
}
|
||||
|
||||
function getWeekDay(date) {
|
||||
const day = date.getDay();
|
||||
return day === 0 ? 6 : day - 1;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function createWeek() {
|
||||
const week = document.createElement('div');
|
||||
week.className = 'heatmap_week';
|
||||
return week;
|
||||
}
|
||||
|
||||
function createHeatmap() {
|
||||
const container = document.getElementById('heatmap');
|
||||
const startDate = getStartDate();
|
||||
const endDate = new Date();
|
||||
const weekDay = getWeekDay(startDate);
|
||||
|
||||
let currentWeek = createWeek();
|
||||
container.appendChild(currentWeek);
|
||||
|
||||
let currentDate = startDate;
|
||||
let i = 0;
|
||||
|
||||
while (currentDate <= endDate) {
|
||||
if (i % 7 === 0 && i !== 0) {
|
||||
currentWeek = createWeek();
|
||||
container.appendChild(currentWeek);
|
||||
}
|
||||
|
||||
const dateString = `${currentDate.getFullYear()}-${("0" + (currentDate.getMonth()+1)).slice(-2)}-${("0" + (currentDate.getDate())).slice(-2)}`;
|
||||
|
||||
const articleDataList = blogInfo.pages.filter(page => page.date === dateString);
|
||||
|
||||
if (articleDataList.length > 0) {
|
||||
const titles = articleDataList.map(data => data.title);
|
||||
const title = titles.map(t => `《${t}》`).join('<br />');
|
||||
|
||||
let count = 0;
|
||||
let post = articleDataList.length;
|
||||
|
||||
articleDataList.forEach(data => {
|
||||
count += parseInt(data.word_count, 10);
|
||||
});
|
||||
|
||||
const formattedDate = formatDate(currentDate);
|
||||
const day = createDay(formattedDate, title, count, post);
|
||||
currentWeek.appendChild(day);
|
||||
} else {
|
||||
const formattedDate = formatDate(currentDate);
|
||||
const day = createDay(formattedDate, '', '0', '0');
|
||||
currentWeek.appendChild(day);
|
||||
}
|
||||
|
||||
i++;
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const options = { month: 'short', day: 'numeric', year: 'numeric' };
|
||||
return date.toLocaleDateString('en-US', options);
|
||||
}
|
||||
|
||||
createHeatmap();
|
||||
Reference in new issue
Block a user