feat(theme): improve post draft status (#662)

Author: pengzhanbo

docs/demos.md

@@ -5,7 +5,7 @@ permalink: /demos/
 readingTime: false
 prev: false
 next: false
-draft: true
+article: false
 externalLinkIcon: false
 contributors: false
 changelog: false

docs/friends.md

@@ -3,7 +3,7 @@ pageLayout: friends
 title: 友情链接
 description: 这里是友情链接的描述文字，此页面仅作为示例展示
 permalink: /friends/
-draft: true
+article: true
 list:
   -
     name: pengzhanbo

docs/notes/theme/config/frontmatter/post.md

@@ -30,21 +30,19 @@ tags:
 
 如果为 `number` ，则数字越大，文章置顶的位置越靠前。
 
-### article <Badge type="warning" text="弃用" />
+### article
 
 - 类型： `boolean`
 - 默认值： `true`
 
-是否在文章列表中，显示当前文章。
-
-由于该字段 表达的语义不明，已弃用，改为使用 `draft`
+是否在文章列表中显示当前文章。
 
 ### draft
 
 - 类型： `boolean`
 - 默认值： `false`
 
-标记文章是否为草稿。被标记为草稿的文章，不会出现在 博客文章列表页中。
+标记文章是否为草稿。被标记为草稿的文章，仅在 **开发环境时显示在文章列表中**，生产环境不会显示。
 
 ### tags
 

docs/questions.md

@@ -2,7 +2,7 @@
 title: 常见问题
 createTime: 2024/09/27 08:47:36
 permalink: /faq/
-draft: true
+article: false
 ---
 
 本文主要包含了使用主题的过程中可能会遇到的常见问题与解决方法。

docs/sponsor.md

@@ -2,7 +2,7 @@
 title: 喝杯奶茶
 createTime: 2024/04/18 18:03:50
 permalink: /sponsor/
-draft: true
+article: false
 aside: false
 readingTime: false
 contributors: false

theme/src/client/components/Blog/VPPostItem.vue

@@ -97,7 +97,7 @@ const coverStyles = computed(() => {
 <template>
   <div
     class="vp-blog-post-item" data-allow-mismatch
-    :class="{ 'has-cover': post.cover, [coverLayout]: cover }"
+    :class="{ 'has-cover': post.cover, [coverLayout]: cover, 'draft': post.draft }"
   >
     <div
       v-if="post.cover" class="post-cover" data-allow-mismatch
@@ -108,6 +108,7 @@ const coverStyles = computed(() => {
     <div class="blog-post-item-content">
       <h3>
         <span v-if="sticky" class="sticky">TOP</span>
+        <span v-if="post.draft" class="draft">DRAFT</span>
         <span v-if="post.encrypt" class="icon-lock vpi-lock" />
         <VPLink :href="post.path" :text="post.title" />
       </h3>
@@ -151,6 +152,10 @@ const coverStyles = computed(() => {
   transition: background-color var(--vp-t-color);
 }
 
+.vp-blog-post-item.draft {
+  background-color: var(--vp-c-warning-soft);
+}
+
 .vp-blog-post-item.has-cover:where(.left, .right) {
   display: flex;
   gap: 20px;
@@ -231,7 +236,8 @@ const coverStyles = computed(() => {
   flex: 1 2;
 }
 
-.blog-post-item-content .sticky {
+.blog-post-item-content .sticky,
+.blog-post-item-content .draft {
   display: inline-block;
   padding: 3px 6px;
   margin-right: 0.5rem;
@@ -245,6 +251,11 @@ const coverStyles = computed(() => {
   transition-property: color, background-color;
 }
 
+.blog-post-item-content .draft {
+  color: var(--vp-c-warning-1);
+  background-color: var(--vp-c-warning-soft);
+}
+
 .blog-post-item-content .icon-lock {
   width: 1em;
   height: 1em;

theme/src/client/components/VPDocMeta.vue

@@ -54,6 +54,7 @@ const hasMeta = computed(() =>
 
 <template>
   <h1 class="vp-doc-title page-title" :class="{ padding: !hasMeta }">
+    <VPBadge v-if="page.frontmatter.draft" type="warning" text="DRAFT" />
     {{ page.title }}
     <VPBadge v-if="badge" :type="badge.type || 'tip'" :text="badge.text" />
   </h1>

theme/src/node/pages/extendsPage.ts

@@ -30,10 +30,10 @@ function cleanPageData(page: Page<ThemePageData>) {
     delete page.frontmatter.home
   }
 
-  if (page.frontmatter.article === false) {
-    page.frontmatter.draft = true
-  }
-  delete page.frontmatter.article
+  // if (page.frontmatter.article === false) {
+  //   page.frontmatter.draft = true
+  // }
+  // delete page.frontmatter.article
 
   if (page.headers) {
     page.data.headers = []

theme/src/node/prepare/prepareBlogData.ts

@@ -21,6 +21,7 @@ function getTimestamp(time: Date): number {
 }
 
 export async function preparedBlogData(app: App): Promise<void> {
+  const isBuild = app.env.isBuild
   const options = getThemeConfig()
   const encrypt = options.encrypt
   if (options.blog === false) {
@@ -52,7 +53,8 @@ export async function preparedBlogData(app: App): Promise<void> {
   const pages = app.pages.filter(page =>
     page.filePathRelative
     && filter(page.filePathRelative)
-    && page.frontmatter.draft !== true,
+    && page.frontmatter.article !== false
+    && (page.frontmatter.draft === true ? !isBuild : true),
   ).sort((prev, next) =>
     getTimestamp((prev.frontmatter.createTime as Date) || prev.date)
     < getTimestamp(next.frontmatter.createTime as Date || next.date)
@@ -83,6 +85,10 @@ export async function preparedBlogData(app: App): Promise<void> {
       data.encrypt = true
     }
 
+    if (page.frontmatter.draft && !isBuild) {
+      data.draft = true
+    }
+
     const fmExcerpt = page.frontmatter.excerpt
     if (fmExcerpt !== false) {
       if (typeof fmExcerpt === 'string') {

theme/src/shared/features/blog.ts

@@ -95,6 +95,11 @@ export interface ThemeBlogPostItem {
    * 文章封面图样式
    */
   coverStyle?: BlogPostCoverStyle
+
+  /**
+   * 文章是否为草稿
+   */
+  draft?: boolean
 }
 
 /**