@xingwangzhe/stalux 1.55.5 → 1.55.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/package.json +1 -1
  2. package/src/components/stalux/archives/archivesList.astro +60 -60
  3. package/src/components/stalux/archives/toArchive.astro +3 -2
  4. package/src/components/stalux/categories/categoriesCard.astro +34 -34
  5. package/src/components/stalux/categories/categoriesList.astro +3 -1
  6. package/src/components/stalux/common/Typewriter.astro +3 -2
  7. package/src/components/stalux/common/Weather.astro +3 -2
  8. package/src/components/stalux/common/date.astro +16 -12
  9. package/src/components/stalux/common/search.astro +3 -2
  10. package/src/components/stalux/footer/FooterBadges.astro +34 -24
  11. package/src/components/stalux/footer/FooterBeian.astro +3 -2
  12. package/src/components/stalux/footer/FooterStats.astro +3 -2
  13. package/src/components/stalux/footer/FooterThemeInfo.astro +3 -2
  14. package/src/components/stalux/layout/PageHeading.astro +5 -4
  15. package/src/components/stalux/layout/navs.astro +4 -3
  16. package/src/components/stalux/links/linkCard.astro +8 -6
  17. package/src/components/stalux/links/socialMedia.astro +2 -2
  18. package/src/components/stalux/posts/PostTaxonomy.astro +14 -11
  19. package/src/components/stalux/posts/WalineComment.astro +2 -2
  20. package/src/components/stalux/posts/postAuthor.astro +6 -6
  21. package/src/components/stalux/posts/postCC.astro +9 -7
  22. package/src/components/stalux/posts/postCard.astro +70 -72
  23. package/src/components/stalux/posts/postContent.astro +7 -6
  24. package/src/components/stalux/posts/postLeft.astro +7 -6
  25. package/src/components/stalux/posts/postList.astro +3 -2
  26. package/src/components/stalux/posts/postNavigation.astro +112 -106
  27. package/src/components/stalux/posts/postRight.astro +10 -8
  28. package/src/components/stalux/posts/postToc.astro +1 -1
  29. package/src/components/stalux/posts/randomPost.astro +3 -2
  30. package/src/components/stalux/tags/tagsCloud.astro +29 -21
  31. package/src/components/stalux/words/wordCard.astro +6 -4
  32. package/src/internal/style-names.generated.ts +177 -175
  33. package/src/pages/404.astro +4 -2
  34. package/src/pages/about.astro +3 -3
  35. package/src/pages/categories/[category].astro +2 -2
  36. package/src/pages/index.astro +9 -4
  37. package/src/pages/posts/[post].astro +0 -1
  38. package/src/pages/tags/[tag].astro +2 -2
  39. package/src/scripts/date-time.ts +15 -7
  40. package/src/scripts/random-posts.ts +26 -11
  41. package/src/styles/content.css +7 -0
  42. package/src/styles/generated-archives.css +1 -1
  43. package/src/styles/generated-article.css +1 -1
  44. package/src/styles/generated-cards.css +1 -1
  45. package/src/styles/generated-categories.css +1 -1
  46. package/src/styles/generated-home.css +1 -1
  47. package/src/styles/generated-links.css +1 -1
  48. package/src/styles/generated-prose.css +1 -1
  49. package/src/styles/generated-tags.css +1 -1
  50. package/src/styles/generated-words.css +1 -1
  51. package/src/styles/generated.css +1 -1
  52. package/src/styles/module-motion.css +1 -1
package/src/components/stalux/posts/postAuthor.astro CHANGED
@@ -13,10 +13,10 @@ const isPostPage = Astro.url.pathname.includes("/posts/");
13
13
  ---
14
14
 
15
15
  <aside class="stalux-byline-sidebar-container" style={isPostPage ? "margin-top: -3em;" : ""}>
16
- <div class="stalux-byline-author-section">
17
- <div class="stalux-byline-author-card">
18
- <Author iscolum />
19
- <p class="stalux-byline-author-bio">{authorConfig.bio}</p>
20
- </div>
21
- </div>
16
+ <!-- Modern Web Guidance (html): 作者卡是独立内容分组 => <section>；
17
+ 原来的 section > card 双层 <div> 合并为一层，减少无意义嵌套。 -->
18
+ <section class="stalux-byline-author-section stalux-byline-author-card">
19
+ <Author iscolum />
20
+ <p class="stalux-byline-author-bio">{authorConfig.bio}</p>
21
+ </section>
22
22
  </aside>
package/src/components/stalux/posts/postCC.astro CHANGED
@@ -26,8 +26,10 @@ const licenseLink = buildCCLink(cc);
26
26
  const licenseName = buildCCName(cc, t);
27
27
  ---
28
28
 
29
- <div class="stalux-license-box" data-stalux-module="license">
30
- <div class="stalux-license-content">
29
+ <!-- Modern Web Guidance (html): 版权声明是正文的补充信息 => <aside>；
30
+ 水印图标纯装饰 => 行内 <span> + aria-hidden，不用 <div>。 -->
31
+ <aside class="stalux-license-box" data-stalux-module="license">
32
+ <section class="stalux-license-content">
31
33
  <p class="stalux-license-title">{title}</p>
32
34
  <p class="stalux-license-author">{t("post.author")}{author}</p>
33
35
  {url && (
@@ -44,9 +46,9 @@ const licenseName = buildCCName(cc, t);
44
46
  {licenseName}
45
47
  </a>{t("post.licenseSuffix")}
46
48
  </p>
47
- </div>
49
+ </section>
48
50
 
49
- <div class="stalux-license-watermark">
50
- <div class="stalux-license-icon" set:html={ccIcon} />
51
- </div>
52
- </div>
51
+ <span class="stalux-license-watermark" aria-hidden="true">
52
+ <span class="stalux-license-icon" set:html={ccIcon} />
53
+ </span>
54
+ </aside>
package/src/components/stalux/posts/postCard.astro CHANGED
@@ -20,88 +20,86 @@ const timezone = siteConfig.timezone;
20
20
  const description = post.data.desc || "";
21
21
  ---
22
22
 
23
+ <!-- Modern Web Guidance (html): 卡片本身即 <article>；日期/描述是 <p>，标签与分类是 <ul>/<li>，
24
+ 尾部元数据用 <footer>。合并了旧的 shell>card 双层 div。 -->
23
25
  <article
24
26
  data-stalux-control="post-card"
25
- class="stalux-post-card-shell block h-full text-inherit no-underline"
27
+ class="stalux-post-card-shell stalux-post-card h-full text-inherit no-underline stalux-u-flex stalux-u-flex-col stalux-u-w-full stalux-u-min-w-0"
26
28
  >
27
- <div class="stalux-post-card stalux-u-flex stalux-u-flex-col stalux-u-w-full stalux-u-min-w-0">
28
- {post.data.cover && (
29
- <a
30
- href={`/posts/${post.data.abbrlink}/`}
31
- class="a-none"
32
- data-astro-prefetch="viewport"
33
- aria-label={post.data.title}
29
+ {post.data.cover && (
30
+ <a
31
+ href={`/posts/${post.data.abbrlink}/`}
32
+ class="a-none"
33
+ data-astro-prefetch="viewport"
34
+ aria-label={post.data.title}
35
+ >
36
+ <span class="stalux-card-post-cover stalux-u-w-full stalux-u-min-w-0">
37
+ <img
38
+ src={post.data.cover}
39
+ alt={post.data.title}
40
+ loading={priority ? "eager" : "lazy"}
41
+ decoding="async"
42
+ fetchpriority={priority ? "high" : "auto"}
43
+ width="640"
44
+ height="360"
45
+ data-stalux-cover
46
+ />
47
+ </span>
48
+ </a>
49
+ )}
50
+ <h2 class="stalux-card-post-title">
51
+ <a href={`/posts/${post.data.abbrlink}/`} class="a-none" data-astro-prefetch="viewport">
52
+ {post.data.title}
53
+ </a>
54
+ </h2>
55
+ <p class="stalux-card-time stalux-u-items-center stalux-u-flex-wrap">
56
+ {post.data.date && (
57
+ <time
58
+ class="stalux-card-post-date"
59
+ datetime={timezone ? toMachineDateTime(post.data.date, timezone) : post.data.date}
34
60
  >
35
- <div class="stalux-card-post-cover stalux-u-w-full stalux-u-min-w-0">
36
- <img
37
- src={post.data.cover}
38
- alt={post.data.title}
39
- loading={priority ? "eager" : "lazy"}
40
- decoding="async"
41
- fetchpriority={priority ? "high" : "auto"}
42
- width="640"
43
- height="360"
44
- data-stalux-cover
45
- />
46
- </div>
47
- </a>
61
+ {post.data.date}
62
+ </time>
48
63
  )}
49
- <h2 class="stalux-card-post-title">
50
- <a href={`/posts/${post.data.abbrlink}/`} class="a-none" data-astro-prefetch="viewport">
51
- {post.data.title}
52
- </a>
53
- </h2>
54
- <div class="stalux-card-time stalux-u-items-center stalux-u-flex-wrap">
55
- {post.data.date && (
56
- <time
57
- class="stalux-card-post-date"
58
- datetime={
59
- timezone ? toMachineDateTime(post.data.date, timezone) : post.data.date
60
- }
61
- >
62
- {post.data.date}
63
- </time>
64
- )}
65
- {post.data.updated && (
66
- <time
67
- class="stalux-card-post-updated"
68
- datetime={
69
- timezone
70
- ? toMachineDateTime(post.data.updated, timezone)
71
- : post.data.updated
72
- }
73
- >
74
- {post.data.updated}
75
- </time>
76
- )}
77
- </div>
78
- <div class="stalux-card-post-description stalux-u-min-w-0">{description}</div>
79
- <div class="stalux-card-post-meta stalux-u-flex stalux-u-flex-col">
80
- <div
81
- class="stalux-card-post-tags stalux-u-flex stalux-u-items-center stalux-u-flex-wrap"
64
+ {post.data.updated && (
65
+ <time
66
+ class="stalux-card-post-updated"
67
+ datetime={
68
+ timezone ? toMachineDateTime(post.data.updated, timezone) : post.data.updated
69
+ }
82
70
  >
83
- {post.data.tags?.map((tag) => (
71
+ {post.data.updated}
72
+ </time>
73
+ )}
74
+ </p>
75
+ <p class="stalux-card-post-description stalux-u-min-w-0">{description}</p>
76
+ <footer class="stalux-card-post-meta stalux-u-flex stalux-u-flex-col">
77
+ <ul class="stalux-card-post-tags stalux-u-flex stalux-u-items-center stalux-u-flex-wrap">
78
+ {post.data.tags?.map((tag) => (
79
+ <li>
84
80
  <a class="a-none" href={`/tags/${tag}`} data-astro-prefetch>
85
81
  <span class="stalux-card-post-tag">{tag}</span>
86
82
  </a>
87
- ))}
88
- </div>
89
- <div
90
- class="stalux-card-post-categories stalux-u-flex stalux-u-items-center stalux-u-flex-wrap"
91
- >
92
- {post.data.categories?.map((category) => (
83
+ </li>
84
+ ))}
85
+ </ul>
86
+ <ul
87
+ class="stalux-card-post-categories stalux-u-flex stalux-u-items-center stalux-u-flex-wrap"
88
+ >
89
+ {post.data.categories?.map((category) => (
90
+ <li>
93
91
  <a class="a-none" href={`/categories/${category}`} data-astro-prefetch>
94
92
  <span class="stalux-card-post-category">{category}</span>
95
93
  </a>
96
- ))}
97
- </div>
98
- </div>
99
- <a
100
- href={`/posts/${post.data.abbrlink}/`}
101
- class="stalux-card-read-more a-none"
102
- data-astro-prefetch
103
- >
104
- Read More
105
- </a>
106
- </div>
94
+ </li>
95
+ ))}
96
+ </ul>
97
+ </footer>
98
+ <a
99
+ href={`/posts/${post.data.abbrlink}/`}
100
+ class="stalux-card-read-more a-none"
101
+ data-astro-prefetch
102
+ >
103
+ Read More
104
+ </a>
107
105
  </article>
package/src/components/stalux/posts/postContent.astro CHANGED
@@ -55,7 +55,8 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/u, "")}.md` :
55
55
  >
56
56
  {props.title}
57
57
  </h1>
58
- <div class="stalux-post-metadata">
58
+ <!-- Modern Web Guidance (html): 元信息、阅读统计、原文链接行都是文字行 => <p>。 -->
59
+ <p class="stalux-post-metadata">
59
60
  {props.date && (
60
61
  <time
61
62
  class="stalux-post-meta-item"
@@ -75,8 +76,8 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/u, "")}.md` :
75
76
  {props.updated}
76
77
  </time>
77
78
  )}
78
- </div>
79
- <div class="stalux-post-page-stats">
79
+ </p>
80
+ <p class="stalux-post-page-stats">
80
81
  {(props.readingMinutes ?? 0) > 0 && (
81
82
  <span class="stalux-post-reading-time">
82
83
  {t("post.readingTime")}
@@ -97,9 +98,9 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/u, "")}.md` :
97
98
  {t("post.viewCount")}
98
99
  <span id="vercount_value_page_pv">Loading...</span>
99
100
  </span>
100
- </div>
101
+ </p>
101
102
  {exportMd && (
102
- <div class="stalux-post-source-link-row">
103
+ <p class="stalux-post-source-link-row">
103
104
  <a
104
105
  class="stalux-post-source-link"
105
106
  href={mdSourceUrl}
@@ -108,7 +109,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/u, "")}.md` :
108
109
  >
109
110
  {t("post.viewSource")}
110
111
  </a>
111
- </div>
112
+ </p>
112
113
  )}
113
114
  </header>
114
115
 
package/src/components/stalux/posts/postLeft.astro CHANGED
@@ -6,13 +6,14 @@ import RandomPost from "@components/stalux/posts/randomPost.astro";
6
6
  ---
7
7
 
8
8
  <aside class="stalux-sidebar" data-swup-persist="post-sidebar-left">
9
- <div class="stalux-sidebar-container" data-stalux-module="sidebar">
9
+ <!-- Modern Web Guidance (html): 侧栏分块用 <section>，不再用通用 <div>。 -->
10
+ <section class="stalux-sidebar-container" data-stalux-module="sidebar">
10
11
  <PostAuthor />
11
- </div>
12
- <div class="stalux-sidebar-container">
12
+ </section>
13
+ <section class="stalux-sidebar-container">
13
14
  <SocialMedia />
14
- </div>
15
- <div class="stalux-sidebar-container">
15
+ </section>
16
+ <section class="stalux-sidebar-container">
16
17
  <RandomPost />
17
- </div>
18
+ </section>
18
19
  </aside>
package/src/components/stalux/posts/postList.astro CHANGED
@@ -11,7 +11,8 @@ const props = Astro.props as Props;
11
11
  const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
12
12
  ---
13
13
 
14
- <div
14
+ <!-- Modern Web Guidance (html): 文章列表是内容分组 => <section> + <ul>/<li>。 -->
15
+ <section
15
16
  data-stalux="postlist"
16
17
  class="stalux-post-list-container"
17
18
  data-stalux-motion-content
@@ -24,4 +25,4 @@ const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.d
24
25
  </li>
25
26
  ))}
26
27
  </ul>
27
- </div>
28
+ </section>
package/src/components/stalux/posts/postNavigation.astro CHANGED
@@ -24,114 +24,120 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
24
24
  class="stalux-pagination"
25
25
  aria-label={t("post.navigation")}
26
26
  >
27
- <div class="stalux-pagination-inner">
28
- {props.prev ? (
29
- <a
30
- href={props.prev.url}
31
- data-stalux-motion="previous"
32
- class="stalux-pagination-link stalux-pagination-prev-post"
33
- rel="prev"
34
- data-astro-prefetch
35
- >
36
- <span class="stalux-pagination-arrow">
37
- <svg
38
- aria-hidden="true"
39
- xmlns="http://www.w3.org/2000/svg"
40
- viewBox="0 0 24 24"
41
- width="24"
42
- height="24"
43
- fill="none"
44
- stroke="currentColor"
45
- stroke-width="2"
46
- stroke-linecap="round"
47
- stroke-linejoin="round"
48
- >
49
- <path d="M19 12H5M12 19l-7-7 7-7" />
50
- </svg>
27
+ <!-- Modern Web Guidance (html): 上一篇/下一篇是一组导航条目 => <ul>/<li>；
28
+ 方向标签与标题是成对文字 => <p> 承载，不再用无语义 <div> 包裹。 -->
29
+ <ul class="stalux-pagination-inner">
30
+ <li class="stalux-pagination-item">
31
+ {props.prev ? (
32
+ <a
33
+ href={props.prev.url}
34
+ data-stalux-motion="previous"
35
+ class="stalux-pagination-link stalux-pagination-prev-post"
36
+ rel="prev"
37
+ data-astro-prefetch
38
+ >
39
+ <span class="stalux-pagination-arrow">
40
+ <svg
41
+ aria-hidden="true"
42
+ xmlns="http://www.w3.org/2000/svg"
43
+ viewBox="0 0 24 24"
44
+ width="24"
45
+ height="24"
46
+ fill="none"
47
+ stroke="currentColor"
48
+ stroke-width="2"
49
+ stroke-linecap="round"
50
+ stroke-linejoin="round"
51
+ >
52
+ <path d="M19 12H5M12 19l-7-7 7-7" />
53
+ </svg>
54
+ </span>
55
+ <p class="stalux-pagination-content">
56
+ <span class="stalux-pagination-label">{t("post.prevPost")}</span>
57
+ <span class="stalux-pagination-title">{props.prev.title}</span>
58
+ </p>
59
+ </a>
60
+ ) : (
61
+ <span class="stalux-pagination-link stalux-pagination-prev-post stalux-pagination-disabled">
62
+ <span class="stalux-pagination-arrow">
63
+ <svg
64
+ aria-hidden="true"
65
+ xmlns="http://www.w3.org/2000/svg"
66
+ viewBox="0 0 24 24"
67
+ width="24"
68
+ height="24"
69
+ fill="none"
70
+ stroke="currentColor"
71
+ stroke-width="2"
72
+ stroke-linecap="round"
73
+ stroke-linejoin="round"
74
+ >
75
+ <path d="M19 12H5M12 19l-7-7 7-7" />
76
+ </svg>
77
+ </span>
78
+ <p class="stalux-pagination-content">
79
+ <span class="stalux-pagination-label">{t("post.prevPost")}</span>
80
+ <span class="stalux-pagination-title">{t("post.noPrev")}</span>
81
+ </p>
51
82
  </span>
52
- <div class="stalux-pagination-content">
53
- <span class="stalux-pagination-label">{t("post.prevPost")}</span>
54
- <span class="stalux-pagination-title">{props.prev.title}</span>
55
- </div>
56
- </a>
57
- ) : (
58
- <span class="stalux-pagination-link stalux-pagination-prev-post stalux-pagination-disabled">
59
- <span class="stalux-pagination-arrow">
60
- <svg
61
- aria-hidden="true"
62
- xmlns="http://www.w3.org/2000/svg"
63
- viewBox="0 0 24 24"
64
- width="24"
65
- height="24"
66
- fill="none"
67
- stroke="currentColor"
68
- stroke-width="2"
69
- stroke-linecap="round"
70
- stroke-linejoin="round"
71
- >
72
- <path d="M19 12H5M12 19l-7-7 7-7" />
73
- </svg>
74
- </span>
75
- <div class="stalux-pagination-content">
76
- <span class="stalux-pagination-label">{t("post.prevPost")}</span>
77
- <span class="stalux-pagination-title">{t("post.noPrev")}</span>
78
- </div>
79
- </span>
80
- )}
83
+ )}
84
+ </li>
81
85
 
82
- {props.next ? (
83
- <a
84
- href={props.next.url}
85
- data-stalux-motion="next"
86
- class="stalux-pagination-link stalux-pagination-next-post"
87
- rel="next"
88
- data-astro-prefetch
89
- >
90
- <div class="stalux-pagination-content">
91
- <span class="stalux-pagination-label">{t("post.nextPost")}</span>
92
- <span class="stalux-pagination-title">{props.next.title}</span>
93
- </div>
94
- <span class="stalux-pagination-arrow">
95
- <svg
96
- aria-hidden="true"
97
- xmlns="http://www.w3.org/2000/svg"
98
- viewBox="0 0 24 24"
99
- width="24"
100
- height="24"
101
- fill="none"
102
- stroke="currentColor"
103
- stroke-width="2"
104
- stroke-linecap="round"
105
- stroke-linejoin="round"
106
- >
107
- <path d="M5 12h14M12 5l7 7-7 7" />
108
- </svg>
109
- </span>
110
- </a>
111
- ) : (
112
- <span class="stalux-pagination-link stalux-pagination-next-post stalux-pagination-disabled">
113
- <div class="stalux-pagination-content">
114
- <span class="stalux-pagination-label">{t("post.nextPost")}</span>
115
- <span class="stalux-pagination-title">{t("post.noNext")}</span>
116
- </div>
117
- <span class="stalux-pagination-arrow">
118
- <svg
119
- aria-hidden="true"
120
- xmlns="http://www.w3.org/2000/svg"
121
- viewBox="0 0 24 24"
122
- width="24"
123
- height="24"
124
- fill="none"
125
- stroke="currentColor"
126
- stroke-width="2"
127
- stroke-linecap="round"
128
- stroke-linejoin="round"
129
- >
130
- <path d="M5 12h14M12 5l7 7-7 7" />
131
- </svg>
86
+ <li class="stalux-pagination-item">
87
+ {props.next ? (
88
+ <a
89
+ href={props.next.url}
90
+ data-stalux-motion="next"
91
+ class="stalux-pagination-link stalux-pagination-next-post"
92
+ rel="next"
93
+ data-astro-prefetch
94
+ >
95
+ <p class="stalux-pagination-content">
96
+ <span class="stalux-pagination-label">{t("post.nextPost")}</span>
97
+ <span class="stalux-pagination-title">{props.next.title}</span>
98
+ </p>
99
+ <span class="stalux-pagination-arrow">
100
+ <svg
101
+ aria-hidden="true"
102
+ xmlns="http://www.w3.org/2000/svg"
103
+ viewBox="0 0 24 24"
104
+ width="24"
105
+ height="24"
106
+ fill="none"
107
+ stroke="currentColor"
108
+ stroke-width="2"
109
+ stroke-linecap="round"
110
+ stroke-linejoin="round"
111
+ >
112
+ <path d="M5 12h14M12 5l7 7-7 7" />
113
+ </svg>
114
+ </span>
115
+ </a>
116
+ ) : (
117
+ <span class="stalux-pagination-link stalux-pagination-next-post stalux-pagination-disabled">
118
+ <p class="stalux-pagination-content">
119
+ <span class="stalux-pagination-label">{t("post.nextPost")}</span>
120
+ <span class="stalux-pagination-title">{t("post.noNext")}</span>
121
+ </p>
122
+ <span class="stalux-pagination-arrow">
123
+ <svg
124
+ aria-hidden="true"
125
+ xmlns="http://www.w3.org/2000/svg"
126
+ viewBox="0 0 24 24"
127
+ width="24"
128
+ height="24"
129
+ fill="none"
130
+ stroke="currentColor"
131
+ stroke-width="2"
132
+ stroke-linecap="round"
133
+ stroke-linejoin="round"
134
+ >
135
+ <path d="M5 12h14M12 5l7 7-7 7" />
136
+ </svg>
137
+ </span>
132
138
  </span>
133
- </span>
134
- )}
135
- </div>
139
+ )}
140
+ </li>
141
+ </ul>
136
142
  </nav>
137
143
  )}
package/src/components/stalux/posts/postRight.astro CHANGED
@@ -22,21 +22,23 @@ const { headings = [], tags = [], categories = [] } = Astro.props;
22
22
  reflow, and it cost a full layout of the new article to do it.
23
23
  -->
24
24
  <aside class="stalux-sidebar-right" data-stalux-scroll-pane data-swup-persist="post-sidebar-right">
25
- <div
25
+ <!-- Modern Web Guidance (html): 侧栏每一块是独立的内容分组 => <section>，
26
+ 而不是通用 <div>；无 aria-label 时不产生额外的 landmark 噪音。 -->
27
+ <section
26
28
  class="stalux-sidebar-container"
27
29
  data-stalux-module="sidebar"
28
30
  data-swup-persist="post-sidebar-clock"
29
31
  >
30
32
  <PostDate />
31
33
  <Weather />
32
- </div>
33
- <div class="stalux-sidebar-container" data-stalux-shell-slot="toc">
34
+ </section>
35
+ <section class="stalux-sidebar-container" data-stalux-shell-slot="toc">
34
36
  <PostToc headings={headings} />
35
- </div>
36
- <div class="stalux-sidebar-container" data-stalux-shell-slot="tags">
37
+ </section>
38
+ <section class="stalux-sidebar-container" data-stalux-shell-slot="tags">
37
39
  <PostTaxonomy kind="tag" items={tags} />
38
- </div>
39
- <div class="stalux-sidebar-container" data-stalux-shell-slot="categories">
40
+ </section>
41
+ <section class="stalux-sidebar-container" data-stalux-shell-slot="categories">
40
42
  <PostTaxonomy kind="category" items={categories} />
41
- </div>
43
+ </section>
42
44
  </aside>
package/src/components/stalux/posts/postToc.astro CHANGED
@@ -46,7 +46,7 @@ const tocItems = headings
46
46
  ))}
47
47
  </ul>
48
48
  ) : (
49
- <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
49
+ <p class="stalux-toc-empty">{t("taxonomy.noToc")}</p>
50
50
  )}
51
51
  </nav>
52
52
 
package/src/components/stalux/posts/randomPost.astro CHANGED
@@ -26,7 +26,8 @@ const { count = 5, title = t("randomPost.title") } = Astro.props;
26
26
  data-load-failed={t("randomPost.loadFailed")}
27
27
  data-load-error={t("randomPost.loadError")}
28
28
  >
29
- <div class="stalux-random-header">
29
+ <!-- Modern Web Guidance (html): 标题 + 刷新按钮是这一块的 header。 -->
30
+ <header class="stalux-random-header">
30
31
  <h3 class="stalux-random-title">{title}</h3>
31
32
  <button
32
33
  type="button"
@@ -52,7 +53,7 @@ const { count = 5, title = t("randomPost.title") } = Astro.props;
52
53
  ></path>
53
54
  </svg>
54
55
  </button>
55
- </div>
56
+ </header>
56
57
  <ul class="stalux-random-list" id="random-posts-list">
57
58
  <li class="stalux-random-loading">{t("randomPost.loading")}</li>
58
59
  </ul>