zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed 关于页面bug

Browse Source
This commit is contained in:
Vaica committed 2026-01-22 21:26:48 +08:00
1 parent f1494d10dd
commit 371ec8adca
154 files changed
+767 -738
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/hugo.toml
+2 -2
View File
@@ -39,9 +39,9 @@ weight = 20
url = "/about.html"
[[menu.main]]
name = "ly"
name = "comment"
weight = 20
url = "/ly.html"
url = "/comment.html"
[[menu.main]]
name = "links"
themes/Ying/layouts/_default/about.html
+2 -3
View File
@@ -1,8 +1,7 @@
{{ define "main" }}
<div id="pjax-container">
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > h2,#heatmap,p; cls: uk-animation-slide-bottom-small; delay: 0">
<h2 class="uk-visible@m">热力图</h2>
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > h2,p; cls: uk-animation-slide-bottom-small; delay: 0">
{{ .Content }}
</div>
</div>
{{ end }}
{{ end }}
themes/Ying/layouts/_default/ly.html → themes/Ying/layouts/_default/comment.html
+2 -2
View File
@@ -1,7 +1,7 @@
{{ define "main" }}
<div id="pjax-container" uk-scrollspy="target: > #szh,hr,h2,p; cls: uk-animation-slide-bottom-small; delay: 0">
<!-- 用于 Pjax 获取当前文章 ID -->
<div id="data-pid" style="display:none;">/{{ .Params.pid | default .Title }}.html</div>
<div id="data-pid" style="display:none;">{{ .RelPermalink }}</div>
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > #szh; cls: uk-animation-slide-bottom-small; delay: 0">
{{ .Content }}
<div id="szh">
@@ -19,4 +19,4 @@
</div>
</div>
{{ end }}
{{ end }}
themes/Ying/layouts/partials/artalk.html
+1 -1
View File
@@ -27,7 +27,7 @@
el: '#Comments',
server: 'https://artalk.usj.cc',
site: '优世界',
pageKey: '/{{ .Params.pid | default .Title }}.html',
pageKey: '{{ .RelPermalink }}',
flatMode: true,
darkMode: isDark,
emoticons: '/emotion/OwO.json'
themes/Ying/layouts/partials/header.html
+1 -1
View File
@@ -27,7 +27,7 @@
<li class="active"><a href="/">首页</a></li>
<li class="active"><a href="/about.html">关于</a></li>
<li class="active"><a href="/circles.html">友圈</a></li>
<li class="active"><a href="/ly.html">留言</a></li>
<li class="active"><a href="/comment.html">留言</a></li>
<li class="active"><a href="/archives.html">归档</a></li>
<li class="active"><a href="/links.html">友链</a></li>
</ul>
themes/Ying/layouts/shortcodes/heatmap.html
+164 -111
View File
@@ -1,147 +1,200 @@
<div id="heatmap" class="uk-visible@m" style="max-width: 700px;height: 110px;margin-bottom: 40px;"></div>
<style>
.heatmap-scroll-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.heatmap-scroll-wrapper::-webkit-scrollbar {
display: none;
}
</style>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
<div id="heatmap-wrapper" class="heatmap-scroll-wrapper">
<div id="heatmap" style="max-width: 800px; height: 160px; margin: 0 auto 0px auto; padding: 10px; border-radius: 10px; transition: all 0.3s ease; display: block !important; visibility: visible !important; min-width: 300px;"></div>
</div>
<script type="text/javascript">
function renderHeatmap() {
if (!window.echarts) return;
if (!window.echarts) {
console.warn("ECharts not loaded yet, retrying...");
setTimeout(renderHeatmap, 500);
return;
}
var chartDom = document.getElementById('heatmap');
if (!chartDom) return;
if (!chartDom) {
console.warn("Heatmap DOM not found");
return;
}
// Dispose existing instance if any
var existing = echarts.getInstanceByDom(chartDom);
if (existing) {
existing.dispose();
}
var myChart = echarts.init(chartDom);
window.addEventListener('resize', function() {
myChart.resize();
});
var option;
var dataMap = new Map();
{{ range ((where .Site.RegularPages "Type" "post")) }}
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 myChart = echarts.init(chartDom, null, { renderer: 'svg' });
// Check mobile state
var isMobile = window.innerWidth < 768;
// Handle resize with debouncing and re-render for responsive range
var resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var newIsMobile = window.innerWidth < 768;
if (newIsMobile !== isMobile) {
// Re-render if switching between mobile/desktop to update range
renderHeatmap();
} else {
myChart.resize();
}
}, 100);
});
// Data Processing
var dataMap = new Map();
{{ range where .Site.RegularPages "Type" "post" }}
var key = "{{ .Date.Format "2006-01-02" }}";
var link = "{{ .RelPermalink }}";
var title = "{{ .Title }}";
var wordCount = {{ .WordCount }};
if (!dataMap.has(key)) {
dataMap.set(key, []);
}
dataMap.get(key).push({link, title, wordCount});
{{- 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);
// Date Range Logic
var endDate = new Date();
var startDate = new Date();
var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isMobile) {
// Mobile: Show last 5 months to fit screen
startDate.setMonth(startDate.getMonth() - 5);
} else {
// Desktop: Show last 12 months
startDate.setFullYear(startDate.getFullYear() - 1);
}
var startDateStr = echarts.format.formatTime('yyyy-MM-dd', startDate);
var endDateStr = echarts.format.formatTime('yyyy-MM-dd', endDate);
var lightTheme = {
backgroundColor: '#FFFFFF',
fangkuaicolor:'#F4F4F4',
gaoliangcolor: ['#333'],
riqiColor: '#999',
textbrcolor: '#FFF',
xiankuangcolor:'rgba(0, 0, 0, 0.0)',
};
var darkTheme = {
backgroundColor: '#FFFFFF',
fangkuaicolor:'#F4F4F4',
gaoliangcolor: ['#333'],
riqiColor: '#999',
textbrcolor: '#FFF',
xiankuangcolor:'rgba(0, 0, 0, 0.0)',
};
var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
option = {
// Theme Logic
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
// Minimalist Monochrome Colors (Black/White/Gray)
// Light: Light Gray -> Black
var colorLight = ['#f0f0f0', '#d9d9d9', '#a6a6a6', '#737373', '#000000'];
// Dark: Dark Gray -> White
var colorDark = ['#1f1f1f', '#404040', '#737373', '#a6a6a6', '#ffffff'];
var rangeColors = isDark ? colorDark : colorLight;
var calendarLabelColor = isDark ? '#a6a6a6' : '#737373';
var option = {
tooltip: {
hideDelay: 1000,
enterable: true,
backgroundColor: currentTheme.textbrcolor,
borderWidth: 0,
formatter: function (p) {
padding: 10,
backgroundColor: isDark ? '#2d2d2d' : '#ffffff',
borderColor: isDark ? '#444' : '#eee',
borderWidth: 1,
textStyle: {
color: isDark ? '#eee' : '#333',
fontSize: 12
},
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>';
if (!posts) return;
var content = `<div style="font-weight:bold; margin-bottom:5px;">${date}</div>`;
content += `<div style="max-height:150px; overflow-y:auto;">`;
for (const post of posts) {
content += `<div style="margin-bottom:2px;">`;
content += `<a href="${post.link}" target="_blank" style="color:${isDark ? '#fff' : '#000'}; text-decoration:none;">${post.title}</a>`;
content += `</div>`;
}
content += `</div>`;
return content;
}
}
},
visualMap: {
show: false,
inRange: {
color: currentTheme.gaoliangcolor
},
min: 0,
max: 4,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 0,
show: false,
inRange: {
color: rangeColors.slice(1)
}
},
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: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
textStyle: {
color: currentTheme.riqiColor,
}
},
dayLabel: {
firstDay: 1,
nameMap: ['日', '一', '', '三', '', '五', ''],
textStyle: {
color: currentTheme.riqiColor
}
},
splitLine: {
lineStyle: {
color: currentTheme.xiankuangcolor,
}
}
top: 30,
left: 'center',
range: [startDateStr, endDateStr],
cellSize: ['auto', 13],
splitLine: { show: false },
itemStyle: {
color: isDark ? '#1f1f1f' : '#f0f0f0',
borderWidth: 2,
borderColor: isDark ? '#121212' : '#ffffff'
},
yearLabel: { show: false },
monthLabel: {
nameMap: 'CN',
color: calendarLabelColor,
fontSize: 12
},
dayLabel: {
show: true,
firstDay: 1,
nameMap: ['日', '一', '二', '三', '四', '五', '六'],
color: calendarLabelColor,
fontSize: 10
}
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: data,
type: 'heatmap',
coordinateSystem: 'calendar',
data: data,
itemStyle: {
borderRadius: 2
}
}
};
myChart.setOption(option);
myChart.resize();
myChart.on('click', function(params) {
if (params.componentType === 'series') {
const post = dataMap.get(params.data[0])[0];
const link = window.location.origin + post.link;
window.open(link, '_blank').focus();
}
});
}
if (document.readyState === 'complete' || document.readyState === 'interactive') {
setTimeout(renderHeatmap, 0);
// Initial render
if (window.echarts) {
renderHeatmap();
} else {
document.addEventListener('DOMContentLoaded', renderHeatmap);
// Retry a few times if script is still loading
setTimeout(renderHeatmap, 500);
setTimeout(renderHeatmap, 1500);
setTimeout(renderHeatmap, 3000);
}
// Re-render on theme change
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == "attributes" && mutation.attributeName == "data-theme") {
renderHeatmap();
}
});
});
observer.observe(document.documentElement, {
attributes: true
});
</script>
themes/Ying/static/css/main.css
+22 -1
View File
@@ -22,7 +22,7 @@
--text-highlight-color: #696565;
--frame-dark-color: #1f2933;
--frame-color: #eee;
--artalk-editer-color: #bac6d3;
--artalk-editer-color: #333333;
--erji-color: #666;
--sanji-color: #999;
--bankuai-color: #f6f6f6;
@@ -2849,3 +2849,24 @@ img[atk-emoticon] {
/* GenericTraceback */ [data-theme="dark"] .chroma .gt { }
/* GenericUnderline */ [data-theme="dark"] .chroma .gl { text-decoration:underline }
/* TextWhitespace */ [data-theme="dark"] .chroma .w { }
/* Fix Artalk comment textarea color in light mode */
.atk-textarea {
color: #1a1a1a !important;
}
[data-theme="dark"] .atk-textarea {
color: #e5e7eb !important;
}
/* About Page Card Style */
.about-card {
background-color: transparent;
border-radius: 0;
padding: 0;
box-shadow: none !important;
margin-bottom: 30px;
}
[data-theme="dark"] .about-card {
background-color: transparent;
box-shadow: none !important;
}
themes/Ying/static/js/mypjax.js
+2 -16
View File
@@ -175,28 +175,14 @@ document.addEventListener("pjax:complete", function () {
pjax_reload()
// 初始化代码复制
initCodeCopy()
// 激活返回顶部插件
$(function () {
$.scrollUp({
animation: 'fade',
scrollImg: true
});
});
// 重载评论
if (document.querySelector("#Comments")) {
Artalk.init({
el: '#Comments', // 绑定元素的 Selector
server: 'https://artalk.usj.cc', // 后端地址
site: '优世界', // 你的站点名
// 使用全局变量或 DOM 读取 pageKey，这里需要注意 Pjax 切换时如何获取新页面的 pid
// 由于 Pjax 只是替换 HTML，我们需要从新页面的 DOM 中提取 pid
// 建议在 single.html 中埋一个隐藏元素存储 pid，或者直接依赖 window.location (但用户想要 /post/id)
// 修正：Pjax 切换后，HTML 已经更新，如果我们在 artalk.html 中输出了正确的配置脚本，
// 那么这段 JS 代码其实是在旧页面加载的 static js 中。
// Artalk.init 在 mypjax.js 中被调用时，参数是写死的或者从当前环境获取。
// 必须动态获取当前页面的 pid。
// 方案：在 layouts/_default/single.html 中添加一个 hidden input 存储 pid
// 然后在这里读取。
// 使用全局变量或 DOM 读取 pageKey
// 必须动态获取当前页面的 pid (RelPermalink)
pageKey: document.getElementById('data-pid')?.innerText || location.pathname,
flatMode: true,
emoticons: '/emotion/OwO.json'