From 302250b9811e6b5fd62e20d72192785d53accbd3 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Wed, 20 Apr 2022 23:09:20 +0800
Subject: [PATCH] :sparkles: Feat: modify draft menu item rendering logic (#99)

---
 .../posts/theme-documentation-basics/index.en.md       | 10 ++++++++--
 .../posts/theme-documentation-basics/index.zh-cn.md    | 10 ++++++++--
 layouts/partials/header.html                           |  4 +++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
index e70f0034..44fac7cd 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -1052,7 +1052,7 @@ The following is a complete menu item configuration:
     [menu.main.params]
       # add css class to a specific menu item
       class = 'text-center'
-      # whether set as a draft menu item that will not be rendered in the production environment
+      # whether set as a draft menu item whose function is similar to a draft post/page
       draft = false
 ```
 
@@ -1071,7 +1071,13 @@ The parent item of a menu item should be the `identifier` of another menu item,
 You can also add user-defined content to menu items via the `params` field. The FixIt theme currently provides two parameters:
 
 * **class** *{String}* add css class to a specific menu item
-* **draft** *{Boolean}* whether set as a draft menu item that will not be rendered in the production environment
+* **draft** *{Boolean}* whether set as a draft menu item whose function is similar to a draft post/page
+
+{{< admonition >}}
+The draft menu items and posts/pages can be rendered by starting the `Hugo server` command or adding the `-D`/`--buildDrafts` parameter to `hugo` command.
+
+This helps to distinguish the different contents of preview environment and production environment during deployment.
+{{< /admonition >}}
 
 #### 3.4.3 Add content to Menu {#content-to-menu}
 
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
index 08169421..3a8b8f04 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -1063,7 +1063,7 @@ Hugo 有一个简单而强大的 [菜单系统](https://gohugo.io/content-manage
     [menu.main.params]
       # 添加 CSS 类到特定的菜单项
       class = 'text-center'
-      # 是否为草稿菜单，草稿菜单不会在生产环境渲染
+      # 是否为草稿菜单，类似草稿页面
       draft = false
 ```
 
@@ -1082,7 +1082,13 @@ Hugo 有一个简单而强大的 [菜单系统](https://gohugo.io/content-manage
 您还可以通过 `params` 字段将自定义的内容添加到菜单项。 FixIt 主题目前提供了两个参数的配置：
 
 * **class** *{String}* 添加 CSS 类到特定的菜单项
-* **draft** *{Boolean}* 是否为草稿菜单，草稿菜单不会在生产环境渲染
+* **draft** *{Boolean}* 是否为草稿菜单，类似草稿页面
+
+{{< admonition >}}
+`hugo server` 命令启动或者为 `hugo` 添加 `-D`/`--buildDrafts` 参数，都能渲染草稿菜单和页面。
+
+这样做有利于在部署时很好地区分**预览环境**和**生产环境**不同的内容。
+{{< /admonition >}}
 
 #### 3.4.3 添加内容到菜单 {#content-to-menu}
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f5a7a771..8debfe5a 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,5 @@
+{{ $BuildDrafts :=.Site.BuildDrafts }}
+
 {{- /* Desktop header */ -}}
 <header class="desktop" id="header-desktop">
   <div class="header-wrapper">
@@ -41,7 +43,7 @@
           {{- with .Page -}}
             {{- $url = .RelPermalink -}}
           {{- end -}}
-          {{- if (ne hugo.Environment "production") | or (ne .Params.Draft true) -}}
+          {{- if (ne .Params.Draft true) | or $BuildDrafts -}}
             <li
               class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}"
               {{ if .HasChildren }}has-children{{ end }}