diff options
| -rw-r--r-- | assets/css/components/_pages.scss | 8 | ||||
| -rw-r--r-- | hugo.yaml | 1 | ||||
| -rw-r--r-- | layouts/partials/head/headscript.html | 39 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 3 | ||||
| -rw-r--r-- | layouts/section/posts.html | 7 |
5 files changed, 56 insertions, 2 deletions
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss index d9ac3efc..b19d79ad 100644 --- a/assets/css/components/_pages.scss +++ b/assets/css/components/_pages.scss @@ -276,6 +276,14 @@ section.taxonomy { @include section-title; } } + + #cal-heatmap-container { + display: flex; + width: 100%; + overflow-x: auto; + justify-content: flex-end; + margin: 1rem 0; + } } #previous-post-link { @@ -83,6 +83,7 @@ params: - https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.css - https://unpkg.com/@waline/client@v3/dist/waline.css - https://unpkg.com/littlefoot/dist/littlefoot.css + - https://unpkg.com/cal-heatmap/dist/cal-heatmap.css externalJSFIles: - https://unpkg.com/swup@4 - https://unpkg.com/tocbot@4.32.2/dist/tocbot.min.js diff --git a/layouts/partials/head/headscript.html b/layouts/partials/head/headscript.html index 06835b1c..3fae65a6 100644 --- a/layouts/partials/head/headscript.html +++ b/layouts/partials/head/headscript.html @@ -1,4 +1,5 @@ -<!-- Global JavaScript Variables --> +<script src="https://d3js.org/d3.v7.min.js"></script> +<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script> <script> /* === littlefoot options === */ var littlefootOptions = { @@ -14,4 +15,40 @@ if (window.location.hostname !== 'localhost') { script.dataset.websiteId = 'ae8c2619-56eb-4577-ac31-9dc6ea44bda7'; document.head.appendChild(script); } + +/* === cal-heatmap Initializing Method */ + +function initCalHeatmap() { + // Initialize CalHeatmap + const cal = new CalHeatmap(); + + // Calculate the date 6 months ago + const startDate = new Date(); + startDate.setMonth(startDate.getMonth() - 12); + + // Render the heatmap + cal.paint({ + domain: { + type: 'month', + }, + subDomain: { type: 'day' }, + scale: { + color: { + range: ['#eee', 'black'], + type: 'linear', + domain: [0, 6000], + }, + }, + date: { + timezone: 'Asia/Shanghai', + start: startDate, + }, + data: { + source: '/cal-heatmap.json', // 指定数据源 + x: d => new Date(d.date), // 提取日期字段并转换为 Date 对象 + y: d => d.value, // 提取数值字段 + defaultValue: 0, // 缺失数据的默认值 + }, + }); +} </script> diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index e498c129..a7b8f6ba 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -33,6 +33,7 @@ swup.hooks.on('page:view', () => { lazyLoadInstance.update(); Fancybox.bind("[data-fancybox]"); loadToc(); - littlefoot.littlefoot(littlefootOptions) + littlefoot.littlefoot(littlefootOptions); + initCalHeatmap(); }); </script> diff --git a/layouts/section/posts.html b/layouts/section/posts.html index 3c2c862c..1f433ac9 100644 --- a/layouts/section/posts.html +++ b/layouts/section/posts.html @@ -3,6 +3,13 @@ {{ partial "header.html" . }} <div id="posts-archive" class="posts-list"> + <!-- Post Word-count Heatmap --> + <div id="cal-heatmap-container"> + <div id="cal-heatmap"></div> + </div> + <script>initCalHeatmap();</script> + + <!-- Post Archive List --> {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}} <section class="posts-year-archive"> <h1 class="posts-year-title"> |