kurihada/notebook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复元数据栏 FOUC — CSS 移到模板顶部避免样式延迟加载

Browse Source
This commit is contained in:
kurihada
2026-06-04 12:06:34 +08:00
parent c4058528fc
commit 0a88970c90
1 changed files with 61 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/overrides/partials/content.html
+61 -60
View File
@@ -2,67 +2,8 @@
Override Material theme content partial
Adds page metadata bar: creation date, update date, word count, reading time
-#}
{% include "partials/tags.html" %}
{% include "partials/actions.html" %}
{% if "<h1" not in page.content %}
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{#- Metadata bar #}
{% if page.meta and (page.meta.git_revision_date_localized or page.meta.git_creation_date_localized) %}
<div class="md-page-metadata">
<span class="md-page-metadata__item">
<span class="twemoji">{% include ".icons/material/calendar-plus.svg" %}</span>
创建：{{ page.meta.git_creation_date_localized }}
</span>
<span class="md-page-metadata__item">
<span class="twemoji">{% include ".icons/material/calendar-edit.svg" %}</span>
更新：{{ page.meta.git_revision_date_localized }}
</span>
<span class="md-page-metadata__item" id="word-count">
<span class="twemoji">{% include ".icons/material/text-short.svg" %}</span>
字数：<span id="word-count-value">...</span>
</span>
<span class="md-page-metadata__item" id="reading-time">
<span class="twemoji">{% include ".icons/material/clock-outline.svg" %}</span>
阅读：<span id="reading-time-value">...</span>
</span>
</div>
{% endif %}
{{ page.content }}
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}
{#- Word count & reading time script (SPA-aware) #}
<script>
function updateMeta() {
var article = document.querySelector('.md-content__inner') || document.querySelector('.md-content');
if (!article) return;
var text = article.textContent || '';
// Chinese characters
var chineseChars = (text.match(/[一-鿿㐀-䶿]/g) || []).length;
// English/other words
var englishWords = text.replace(/[一-鿿㐀-䶿]/g, ' ')
.split(/\s+/)
.filter(function(w) { return w.length > 0; }).length;
var totalWords = chineseChars + englishWords;
var minutes = Math.max(1, Math.round(totalWords / 400));
var wordEl = document.getElementById('word-count-value');
var timeEl = document.getElementById('reading-time-value');
if (wordEl) wordEl.textContent = totalWords.toLocaleString();
if (timeEl) timeEl.textContent = minutes + ' 分钟';
}
// SPA-compatible: run on load and on navigation
if (typeof document$ !== 'undefined') {
document$.subscribe(function() { updateMeta(); });
} else {
document.addEventListener('DOMContentLoaded', updateMeta);
}
</script>
{#- CSS for metadata bar #}
{#- CSS must be first to prevent FOUC #}
<style>
.md-page-metadata {
display: flex;
@@ -88,4 +29,64 @@ if (typeof document$ !== 'undefined') {
width: 100%;
height: 100%;
}
#word-count-value, #reading-time-value {
font-variant-numeric: tabular-nums;
}
</style>
{% include "partials/tags.html" %}
{% include "partials/actions.html" %}
{% if "<h1" not in page.content %}
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{#- Metadata bar #}
{% if page.meta and (page.meta.git_revision_date_localized or page.meta.git_creation_date_localized) %}
<div class="md-page-metadata">
<span class="md-page-metadata__item">
<span class="twemoji">{% include ".icons/material/calendar-plus.svg" %}</span>
创建：{{ page.meta.git_creation_date_localized }}
</span>
<span class="md-page-metadata__item">
<span class="twemoji">{% include ".icons/material/calendar-edit.svg" %}</span>
更新：{{ page.meta.git_revision_date_localized }}
</span>
<span class="md-page-metadata__item" id="word-count">
<span class="twemoji">{% include ".icons/material/text-short.svg" %}</span>
字数：<span id="word-count-value">—</span>
</span>
<span class="md-page-metadata__item" id="reading-time">
<span class="twemoji">{% include ".icons/material/clock-outline.svg" %}</span>
阅读：<span id="reading-time-value">—</span>
</span>
</div>
{% endif %}
{{ page.content }}
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}
{#- Word count & reading time script (SPA-aware) #}
<script>
function updateMeta() {
var article = document.querySelector('.md-content__inner') || document.querySelector('.md-content');
if (!article) return;
var text = article.textContent || '';
var chineseChars = (text.match(/[一-鿿㐀-䶿]/g) || []).length;
var englishWords = text.replace(/[一-鿿㐀-䶿]/g, ' ')
.split(/\s+/)
.filter(function(w) { return w.length > 0; }).length;
var totalWords = chineseChars + englishWords;
var minutes = Math.max(1, Math.round(totalWords / 400));
var wordEl = document.getElementById('word-count-value');
var timeEl = document.getElementById('reading-time-value');
if (wordEl) wordEl.textContent = totalWords.toLocaleString();
if (timeEl) timeEl.textContent = minutes + ' 分钟';
}
if (typeof document$ !== 'undefined') {
document$.subscribe(function() { updateMeta(); });
} else {
document.addEventListener('DOMContentLoaded', updateMeta);
}
</script>