diff --git a/content/post/demo05.md b/content/post/demo05.md new file mode 100644 index 00000000..025beae9 --- /dev/null +++ b/content/post/demo05.md @@ -0,0 +1,11 @@ ++++ +title = "Demo05" +date = 2024-07-12T19:38:33+08:00 +draft = false +categories = [] +tags = [] +author = "小赵同学" ++++ + +请输入您的文章内容。 + diff --git a/public/about/index.html b/public/about/index.html index 1661a9cf..61e25bff 100644 --- a/public/about/index.html +++ b/public/about/index.html @@ -63,6 +63,205 @@
+

热力图

+
+ +

关于我

00后，湖北襄阳人，目前大三本科在读

@@ -71,7 +270,11 @@

喜欢用文字记录生活，是用心在写文章的宝藏博主

+ +
+ + diff --git a/public/archives/index.html b/public/archives/index.html index 5849e4c2..19bfe789 100644 --- a/public/archives/index.html +++ b/public/archives/index.html @@ -90,6 +90,18 @@ uk-scrollspy="cls: uk-animation-slide-right-medium; repeat: false"> +
  • + 07/12 + Demo05 +
    • + + + + + + +
  • 07/11 +
    +
    July 12, 2024
    +     Demo05 +
    + + +
    July 11, 2024
    Demo03 @@ -97,8 +104,6 @@
    - - diff --git a/public/index.xml b/public/index.xml index e4344b54..16d6e193 100644 --- a/public/index.xml +++ b/public/index.xml @@ -6,8 +6,15 @@ Recent content on 小赵同学的博客 Hugo zh-cn - Thu, 11 Jul 2024 15:30:40 +0800 + Fri, 12 Jul 2024 19:38:33 +0800 + + Demo05 + http://localhost:1313/post/demo05/ + Fri, 12 Jul 2024 19:38:33 +0800 + http://localhost:1313/post/demo05/ + 请输入您的文章内容。 + Demo03 http://localhost:1313/post/demo03/ diff --git a/public/js/main.js b/public/js/main.js index 92c2739d..bad4e821 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -85,4 +85,187 @@ function fetchCommentsAndCreateBarrager(path, options) { } } }); -} \ No newline at end of file +} + + +// 获取最近一年的文章数据 +{{ $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 += '' + '共 ' + post + ' 篇' + ''; + } + + if (count && parseInt(count, 10) !== 0) { + tooltipContent += '' + ' ' + count + ' 字；' + ''; + } + + if (title && parseInt(title, 10) !== 0) { + tooltipContent += '' + title + ''; + } + + if (date) { + tooltipContent += '' + date + ''; + } + + 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('
    '); + + 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(); diff --git a/public/post/demo05/index.html b/public/post/demo05/index.html new file mode 100644 index 00000000..8e35dac5 --- /dev/null +++ b/public/post/demo05/index.html @@ -0,0 +1,154 @@ + + + + + + + + Demo05 + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + 小赵同学的博客 +
    +
    +

    风吹云散，云卷云舒

    + +
    + +
    + + + +
    +
    +

    Demo05

    +
    + 作者: 小赵同学 浏览: 字数: 1 分类: +
    +
    +

    请输入您的文章内容。

    + +
    +
    + +
    +
    +
    +
    + +
    +
    + + +
    + + + +
    + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/themes/Ying/layouts/_default/about.html b/themes/Ying/layouts/_default/about.html index 85357755..9c72cd45 100644 --- a/themes/Ying/layouts/_default/about.html +++ b/themes/Ying/layouts/_default/about.html @@ -1,7 +1,158 @@ {{ define "main" }}
    +

    热力图

    +
    + +
    {{ .Content }}
    + +
    + + {{ end }} \ No newline at end of file diff --git a/themes/Ying/static/css/light.css b/themes/Ying/static/css/light.css index 09d217d3..9695cf50 100644 --- a/themes/Ying/static/css/light.css +++ b/themes/Ying/static/css/light.css @@ -1693,4 +1693,188 @@ input[type=submit] { .wl-editor, .wl-input { max-width: 96%important; -} \ No newline at end of file +} + +/* 热力图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); +} diff --git a/themes/Ying/static/js/main.js b/themes/Ying/static/js/main.js index 92c2739d..bad4e821 100644 --- a/themes/Ying/static/js/main.js +++ b/themes/Ying/static/js/main.js @@ -85,4 +85,187 @@ function fetchCommentsAndCreateBarrager(path, options) { } } }); -} \ No newline at end of file +} + + +// 获取最近一年的文章数据 +{{ $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 += '' + '共 ' + post + ' 篇' + ''; + } + + if (count && parseInt(count, 10) !== 0) { + tooltipContent += '' + ' ' + count + ' 字；' + ''; + } + + if (title && parseInt(title, 10) !== 0) { + tooltipContent += '' + title + ''; + } + + if (date) { + tooltipContent += '' + date + ''; + } + + 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('
    '); + + 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();