hexo-theme-gnix 13.0.0 → 14.0.0

package/layout/archive.jsx

@@ -1,5 +1,4 @@
 const { Component, Fragment, isValidDate, parseISO, dateFormatters } = require("../include/util/common");
-const { filterByLanguage } = require("../include/util/i18n");
 const ArticleMedia = require("./common/article_media");
 
 function collectPosts(collection) {
@@ -12,6 +11,14 @@ function collectPosts(collection) {
   return posts;
 }
 
+function estimateReadMinutes(content) {
+  if (typeof content !== "string" || !content) return 0;
+  const stripped = content.replace(/<\/?[a-z][^>]*>/gi, "").trim();
+  if (!stripped) return 0;
+  const tokens = stripped.match(/[ÿ-￿]|[a-zA-Z]+/g);
+  return tokens ? Math.max(1, Math.ceil(tokens.length / 200)) : 0;
+}
+
 function getSeason(month) {
   if (month >= 2 && month <= 4) return "Spring";
   if (month >= 5 && month <= 7) return "Summer";
@@ -44,6 +51,47 @@ function groupPostsBySeason(posts) {
   }, []);
 }
 
+function groupSeasonGroupsByYear(seasonGroups) {
+  const years = [];
+  for (const group of seasonGroups) {
+    const last = years[years.length - 1];
+    if (last && last.year === group.year) {
+      last.groups.push(group);
+      last.total += group.posts.length;
+    } else {
+      years.push({ year: group.year, total: group.posts.length, groups: [group] });
+    }
+  }
+  return years;
+}
+
+function toRoman(num) {
+  const map = [
+    [1000, "M"],
+    [900, "CM"],
+    [500, "D"],
+    [400, "CD"],
+    [100, "C"],
+    [90, "XC"],
+    [50, "L"],
+    [40, "XL"],
+    [10, "X"],
+    [9, "IX"],
+    [5, "V"],
+    [4, "IV"],
+    [1, "I"],
+  ];
+  let n = num;
+  let out = "";
+  for (const [value, sym] of map) {
+    while (n >= value) {
+      out += sym;
+      n -= value;
+    }
+  }
+  return out;
+}
+
 function collectArchiveYears(posts) {
   return Array.from(new Set(posts.map((post) => post.date.year()))).sort((a, b) => b - a);
 }
@@ -58,104 +106,133 @@ function getPostDateParts(postDate, dateXml, date) {
   };
 }
 
+function renderSeasonGroup({ posts, year, season, month, sectionTitle, url_for, date_xml, date }) {
+  const title = sectionTitle || getArchiveRangeLabel(year, month, season);
+  const kicker = year ? String(year) : "Archive";
+  const marker = season ? season.toLowerCase() : "all";
+  const sectionId = `archive-${kicker}-${marker}-${month || "all"}`;
+
+  return (
+    <section class={["archive-group", marker].filter(Boolean).join(" ")} aria-labelledby={sectionId}>
+      <header class="archive-group__header">
+        <h2 id={sectionId} class="archive-group__title">
+          {title}
+        </h2>
+        <span class="archive-group__count">{String(posts.length).padStart(2, "0")}</span>
+      </header>
+      <div class="timeline">
+        {posts.map((post) => {
+          const postDate = getPostDateParts(post.date, date_xml, date);
+          const readMinutes = estimateReadMinutes(post._content);
+          return (
+            <ArticleMedia
+              key={post.path}
+              url={url_for(post.link || post.path)}
+              title={post.title}
+              date={postDate.label}
+              dateXml={postDate.xml}
+              excerpt={post.excerpt || null}
+              readTime={readMinutes ? `${readMinutes} min` : null}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
 module.exports = class extends Component {
   render() {
-    const { page, helper, site, config } = this.props;
+    const { page, helper } = this.props;
     const { url_for, date_xml, date } = helper;
-    const langKey = helper.language_key(page);
-
-    function renderArticleList(posts, year, month = null, sectionTitle = null, season = null) {
-      const title = sectionTitle || getArchiveRangeLabel(year, month, season);
-      const kicker = year ? String(year) : "Archive";
-      const marker = season ? season.toLowerCase() : "all";
-      const countLabel = posts.length === 1 ? "1 entry" : `${posts.length} entries`;
-      const sectionId = `archive-${kicker}-${marker}-${month || "all"}`;
-
-      return (
-        <section class={["archive-group", marker].filter(Boolean).join(" ")} aria-labelledby={sectionId}>
-          <header class="archive-group__header">
-            <div>
-              <h2 id={sectionId} class="archive-group__title">
-                {title}
-              </h2>
-            </div>
-            <span class="archive-group__count">{countLabel}</span>
-          </header>
-          <div class="timeline">
-            {posts.map((post) => {
-              const postDate = getPostDateParts(post.date, date_xml, date);
-              return <ArticleMedia key={post.path} url={url_for(post.link || post.path)} title={post.title} date={postDate.label} dateXml={postDate.xml} />;
-            })}
-          </div>
-        </section>
-      );
-    }
 
     const visiblePosts = collectPosts(page.posts);
     const totalVisiblePosts = visiblePosts.length;
-    const latestPost = visiblePosts[0];
 
-    const allPostsSource = site?.posts ? filterByLanguage(site.posts.sort("date", -1), langKey, config) : page.posts;
-    const allPosts = collectPosts(allPostsSource);
-    const years = collectArchiveYears(allPosts);
+    const years = collectArchiveYears(visiblePosts);
+
+    const currentYear = page.year ? Number(page.year) : null;
+    const currentMonth = page.month ? Number(page.month) : null;
+    const isTagPage = Boolean(page.tag);
+    const entriesLabel = `${totalVisiblePosts} ${totalVisiblePosts === 1 ? "entry" : "entries"}`;
+
     let articleList;
     if (!page.year) {
-      articleList = groupPostsBySeason(visiblePosts).map((group) => {
-        const title = getArchiveRangeLabel(group.year, null, group.season);
-        return <Fragment key={`${group.year}-${group.season}`}>{renderArticleList(group.posts, group.year, null, title, group.season)}</Fragment>;
-      });
+      const seasonGroups = groupPostsBySeason(visiblePosts);
+      const yearBlocks = groupSeasonGroupsByYear(seasonGroups);
+      articleList = yearBlocks.map((block) => (
+        <Fragment key={block.year}>
+          <div class="archive-era" id={`archive-year-${block.year}`}>
+            <span class="archive-era__roman">{toRoman(block.year)}</span>
+            <span class="archive-era__year" aria-hidden="true">
+              {" "}
+              {block.year}{" "}
+            </span>
+          </div>
+          {block.groups.map((group) => (
+            <Fragment key={`${group.year}-${group.season}`}>
+              {renderSeasonGroup({
+                posts: group.posts,
+                year: group.year,
+                season: group.season,
+                sectionTitle: group.season,
+                url_for,
+                date_xml,
+                date,
+              })}
+            </Fragment>
+          ))}
+        </Fragment>
+      ));
     } else {
       const season = page.month ? getSeason(page.month - 1) : null;
-      articleList = renderArticleList(visiblePosts, page.year, page.month, null, season);
+      articleList = renderSeasonGroup({
+        posts: visiblePosts,
+        year: page.year,
+        season,
+        month: page.month,
+        url_for,
+        date_xml,
+        date,
+      });
     }
 
-    const archiveDir = config?.archive_dir || "archives";
-    const archiveBasePath = helper.localized_url_for(`/${archiveDir}/`, langKey);
-    const currentYear = page.year ? Number(page.year) : null;
-    const currentMonth = page.month ? Number(page.month) : null;
-    const activeScope = getArchiveRangeLabel(currentYear, currentMonth);
-    const yearCountLabel = years.length === 1 ? "1 year" : `${years.length} years`;
-    const scopeSummaryLabel = currentYear ? `from ${activeScope}` : `across ${yearCountLabel}`;
-    const latestLabel = latestPost ? date(latestPost.date) : "No posts yet";
+    const heroTitle = isTagPage ? page.tag : currentYear ? getArchiveRangeLabel(currentYear, currentMonth) : "Index";
+    const heroKind = isTagPage ? "Tag" : currentYear ? "Archive" : "Volume";
 
     return (
       <Fragment>
         <link rel="stylesheet" href={url_for("/css/archive.css")} data-page-head />
         <main class="archive-page">
           <header class="archive-hero">
-            <div class="archive-hero__copy">
-              <p class="archive-eyebrow">Archive Index</p>
-              <h1>{activeScope}</h1>
-              <p class="archive-hero__summary">
-                {totalVisiblePosts ? `Browsing ${totalVisiblePosts} ${totalVisiblePosts === 1 ? "post" : "posts"} ${scopeSummaryLabel}.` : "No posts are available in this archive yet."}
-              </p>
-            </div>
-            <dl class="archive-stats" aria-label="Archive summary">
-              <div>
-                <dt>Posts</dt>
-                <dd>{totalVisiblePosts}</dd>
-              </div>
-              <div>
-                <dt>Years</dt>
-                <dd>{years.length}</dd>
-              </div>
-              <div>
-                <dt>Latest</dt>
-                <dd>{latestLabel}</dd>
-              </div>
-            </dl>
+            <p class="archive-hero__eyebrow">
+              <span>{heroKind}</span>
+              <span class="archive-hero__sep" aria-hidden="true">
+                ·
+              </span>
+              <span class="archive-hero__count">{entriesLabel}</span>
+            </p>
+            <h1 class="archive-hero__title">{heroTitle}</h1>
+            {years.length > 0 && (
+              <span class="archive-hero__roman" aria-hidden="true">
+                {years.length === 1 ? toRoman(years[0]) : `${toRoman(years[years.length - 1])}–${toRoman(years[0])}`}
+              </span>
+            )}
           </header>
 
-          <nav class="archive-years" aria-label="Archive years">
-            <a href={archiveBasePath} class={!currentYear ? "is-active" : null} aria-current={!currentYear ? "page" : null}>
-              All
-            </a>
-            {years.map((year) => (
-              <a key={year} href={helper.localized_url_for(`/${archiveDir}/${year}/`, langKey)} class={currentYear === year ? "is-active" : null} aria-current={currentYear === year ? "page" : null}>
-                {year}
-              </a>
-            ))}
-          </nav>
+          {!page.year && years.length > 1 && (
+            <aside class="archive-rail" aria-label="Jump to year">
+              <ol class="archive-rail__list">
+                {years.map((year) => (
+                  <li key={year} class="archive-rail__item">
+                    <a href={`#archive-year-${year}`} class="archive-rail__link">
+                      <span class="archive-rail__year">{year}</span>
+                    </a>
+                  </li>
+                ))}
+              </ol>
+            </aside>
+          )}
 
           <div class="archive-stack">{articleList}</div>
         </main>

package/layout/common/article.jsx

@@ -17,15 +17,14 @@ function getWordCount(content) {
 
 module.exports = class extends Component {
   render() {
-    // index: true if in article list, false if in article page
-    const { config, helper, page, index } = this.props;
+    const { config, helper, page } = this.props;
 
     const { url_for } = helper;
 
     const cover = page.cover ? url_for(page.cover) : null;
     const wordCount = getWordCount(page._content);
     const readTime = Math.ceil(wordCount / 200); // 假设每分钟阅读200字
-    const hasComment = !index && config.comment && typeof config.comment.type === "string";
+    const hasComment = config.comment && typeof config.comment.type === "string";
     const translatedCommentsLabel = helper.__("article.comments");
     const commentsLabel = translatedCommentsLabel === "article.comments" ? "Comments" : translatedCommentsLabel;
 
@@ -34,7 +33,7 @@ module.exports = class extends Component {
         {/* Main content */}
         <div class="card">
           {/* Cover image */}
-          {cover ? <ArticleCover page={page} cover={cover} index={index} helper={helper} /> : null}
+          {cover ? <ArticleCover page={page} cover={cover} helper={helper} /> : null}
           <article class={`card-content article${"direction" in page ? ` ${page.direction}` : ""}`}>
             {/* Metadata - Medium style */}
             {page.layout !== "page" ? (
@@ -45,102 +44,41 @@ module.exports = class extends Component {
                       {dateFormatters.shortDay.format(page.date)}
                     </time>
                   )}
-                  {page.date && (wordCount > 0 || !index) && <span class="meta-separator">·</span>}
+                  {page.date && <span class="meta-separator">·</span>}
                   {wordCount > 0 && <span class="article-reading-time">{readTime} min</span>}
-                  {!index && (
-                    <Fragment>
-                      <span class="meta-separator">·</span>
-                      <span
-                        class="article-visit-count"
-                        data-flag-title={page.title}
-                        dangerouslySetInnerHTML={{
-                          __html: '<span id="busuanzi_page_pv"></span> PV',
-                        }}
-                      ></span>
-                    </Fragment>
-                  )}
+                  <span class="meta-separator">·</span>
+                  <span
+                    class="article-visit-count"
+                    data-flag-title={page.title}
+                    dangerouslySetInnerHTML={{
+                      __html: '<span id="busuanzi_page_pv"></span> PV',
+                    }}
+                  ></span>
                 </div>
               </div>
             ) : null}
 
             {/* Title */}
-            {page.title !== "" && index ? (
-              <h2 class="article-title">
-                <a href={url_for(page.link || page.path)}>{page.title}</a>
-              </h2>
-            ) : null}
-            {page.title !== "" && !index ? <h1 class="article-title">{page.title}</h1> : null}
+            {page.title !== "" ? <h1 class="article-title">{page.title}</h1> : null}
 
-            {!index && page.excerpt && <div class="article-excerpt" dangerouslySetInnerHTML={{ __html: page.excerpt }}></div>}
+            {page.excerpt && <div class="article-excerpt" dangerouslySetInnerHTML={{ __html: page.excerpt }}></div>}
 
-            {(index || !page.excerpt) && (
-              <div
-                class={index && page.excerpt ? "article-excerpt" : "content"}
-                dangerouslySetInnerHTML={{
-                  __html: index && page.excerpt ? page.excerpt : page.content,
-                }}
-              ></div>
-            )}
-
-            {!index && (
-              <div class="article-footer article-meta-bar">
-                <div class="article-tags">
-                  {page.tags?.length
-                    ? page.tags.map((tag, i) => (
-                        <Fragment>
-                          {i > 0 && <span class="meta-separator">·</span>}
-                          <a class="article-tag" rel="tag" href={helper.localized_tag_url(tag, helper.language_key(page))}>
-                            {tag.name}
-                          </a>
-                        </Fragment>
-                      ))
-                    : null}
-                </div>
-                <div class="article-title-actions">
-                  {hasComment && (
-                    <button type="button" class="article-action-btn" popovertarget="article-comment-popover" aria-label={commentsLabel} title={commentsLabel}>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        role="img"
-                        aria-label={commentsLabel}
-                      >
-                        <title>{commentsLabel}</title>
-                        <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
-                        <path d="M8 12h.01" />
-                        <path d="M12 12h.01" />
-                        <path d="M16 12h.01" />
-                      </svg>
-                    </button>
-                  )}
-                  <button type="button" class="article-action-btn" popovertarget="article-font-settings" aria-label={helper.__("article.font_settings")} title={helper.__("article.font_settings")}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      role="img"
-                      aria-label={helper.__("article.font_settings")}
-                    >
-                      <title>{helper.__("article.font_settings")}</title>
-                      <path d="M12 4v16" />
-                      <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" />
-                      <path d="M9 20h6" />
-                    </svg>
-                  </button>
-                  <button type="button" class="article-action-btn" popovertarget="article-info-popover" aria-label={helper.__("article.article_info")} title={helper.__("article.article_info")}>
+            <div class="article-meta-bar">
+              <div class="article-tags">
+                {page.tags?.length
+                  ? page.tags.map((tag, i) => (
+                      <Fragment>
+                        {i > 0 && <span class="meta-separator">·</span>}
+                        <a class="article-tag" rel="tag" href={helper.localized_tag_url(tag, helper.language_key(page))}>
+                          {tag.name}
+                        </a>
+                      </Fragment>
+                    ))
+                  : null}
+              </div>
+              <div class="article-title-actions">
+                {hasComment && (
+                  <button type="button" class="article-action-btn" popovertarget="article-comment-popover" aria-label={commentsLabel} title={commentsLabel}>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="24"
@@ -152,40 +90,64 @@ module.exports = class extends Component {
                       stroke-linecap="round"
                       stroke-linejoin="round"
                       role="img"
-                      aria-label={helper.__("article.article_info")}
+                      aria-label={commentsLabel}
                     >
-                      <title>{helper.__("article.article_info")}</title>
-                      <circle cx="12" cy="12" r="10" />
-                      <path d="M12 16v-4" />
-                      <path d="M12 8h.01" />
+                      <title>{commentsLabel}</title>
+                      <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+                      <path d="M8 12h.01" />
+                      <path d="M12 12h.01" />
+                      <path d="M16 12h.01" />
                     </svg>
                   </button>
-                </div>
-              </div>
-            )}
-            {index && page.tags?.length && (
-              <div class="article-footer">
-                <div class="article-tags">
-                  {page.tags.map((tag, i) => (
-                    <Fragment>
-                      {i > 0 && <span class="meta-separator">·</span>}
-                      <a class="article-tag" rel="tag" href={helper.localized_tag_url(tag, helper.language_key(page))}>
-                        {tag.name}
-                      </a>
-                    </Fragment>
-                  ))}
-                </div>
-                <a class="article-read-more" href={url_for(page.link || page.path)}>
-                  Read More →
-                </a>
+                )}
+                <button type="button" class="article-action-btn" popovertarget="article-font-settings" aria-label={helper.__("article.font_settings")} title={helper.__("article.font_settings")}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label={helper.__("article.font_settings")}
+                  >
+                    <title>{helper.__("article.font_settings")}</title>
+                    <path d="M12 4v16" />
+                    <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" />
+                    <path d="M9 20h6" />
+                  </svg>
+                </button>
+                <button type="button" class="article-action-btn" popovertarget="article-info-popover" aria-label={helper.__("article.article_info")} title={helper.__("article.article_info")}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label={helper.__("article.article_info")}
+                  >
+                    <title>{helper.__("article.article_info")}</title>
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 16v-4" />
+                    <path d="M12 8h.01" />
+                  </svg>
+                </button>
               </div>
-            )}
+            </div>
+
+            <div class="content" dangerouslySetInnerHTML={{ __html: page.content }}></div>
 
-            {!index && page.excerpt && <div class="content" dangerouslySetInnerHTML={{ __html: page.content }}></div>}
           </article>
 
-          {!index && (
-            <div id="article-font-settings" popover="auto" class="article-popover article-font-popover">
+          <div id="article-font-settings" popover="auto" class="article-popover article-font-popover">
               <div class="article-popover-header">
                 <h3>Display Settings</h3>
                 <button type="button" class="article-popover-close" popovertarget="article-font-settings" popovertargetaction="hide" aria-label="Close">
@@ -366,7 +328,6 @@ module.exports = class extends Component {
                 </aside>
               </div>
             </div>
-          )}
 
           {hasComment && (
             <div id="article-comment-popover" popover="auto" class="article-popover article-comment-popover">
@@ -398,7 +359,7 @@ module.exports = class extends Component {
             </div>
           )}
 
-          {!index && <ArticleInfo page={page} config={config} helper={helper} />}
+          <ArticleInfo page={page} config={config} helper={helper} />
         </div>
       </Fragment>
     );

package/layout/common/article_cover.jsx

@@ -2,7 +2,7 @@ const { Component } = require("inferno");
 
 module.exports = class extends Component {
   render() {
-    const { page, cover, helper, index } = this.props;
+    const { page, cover, helper } = this.props;
     const { url_for } = helper;
 
     const imageSrcset = `${cover}?w=800 800w, ${cover}?w=1500 1500w, ${cover}?w=2000 2000w, ${cover} 6144w`;
@@ -19,8 +19,8 @@ module.exports = class extends Component {
           sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, 960px"
           referrerpolicy="no-referrer"
           decoding="async"
-          loading={index ? "lazy" : "eager"}
-          fetchpriority={index ? undefined : "high"}
+          loading="eager"
+          fetchpriority="high"
         />
       </a>
     );

package/layout/common/article_media.jsx

@@ -12,11 +12,15 @@ function formatDate(date, dateXml) {
 
 module.exports = class extends Component {
   render() {
-    const { url, title, date, dateXml } = this.props;
+    const { url, title, date, dateXml, excerpt, readTime } = this.props;
     const formattedDate = formatDate(date, dateXml);
+    const hasPreview = excerpt || readTime;
 
     return (
-      <article class="archive-item">
+      <article
+        class={hasPreview ? "archive-item has-preview" : "archive-item"}
+        data-read-time={readTime || null}
+      >
         <div>
           <p class="article-meta">
             <time dateTime={dateXml || null}>{formattedDate}</time>
@@ -25,6 +29,9 @@ module.exports = class extends Component {
             {title}
           </a>
         </div>
+        {excerpt && (
+          <template class="archive-item__excerpt" dangerouslySetInnerHTML={{ __html: excerpt }}></template>
+        )}
       </article>
     );
   }

package/layout/common/footer.jsx

@@ -8,7 +8,10 @@ class Footer extends Component {
       <footer class="footer">
         <div class="footer-brand">
           <p class="footer-credit">
-            2022&ndash;PRESENT&ensp;<span class="footer-author">© GnixAij Oag</span> CC BY-NC-SA 4.0
+            2022&ndash;PRESENT&ensp;<span class="footer-author">© GnixAij Oag</span>&ensp;
+            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="license noopener noreferrer">
+              CC BY-NC-SA 4.0
+            </a>
           </p>
           {showVisitorCounter ? (
             <p class="footer-meta">