From 0a88970c906916adb852cf916433699e8b48a083 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 4 Jun 2026 12:06:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=85=83=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=A0=8F=20FOUC=20=E2=80=94=20CSS=20=E7=A7=BB?=
 =?UTF-8?q?=E5=88=B0=E6=A8=A1=E6=9D=BF=E9=A1=B6=E9=83=A8=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BB=B6=E8=BF=9F=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/overrides/partials/content.html | 121 ++++++++++++++-------------
 1 file changed, 61 insertions(+), 60 deletions(-)

diff --git a/docs/overrides/partials/content.html b/docs/overrides/partials/content.html
index 751a9e8..479cd53 100644
--- a/docs/overrides/partials/content.html
+++ b/docs/overrides/partials/content.html
@@ -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>