Docs: 增加 fixIt-cli 使用文档和 Demo

hugo-fixit · Jan 9, 2025 · 7de543b · 7de543b
1 parent 1b18bbb
commit 7de543b
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 8 deletions.
diff --git a/config/_default/module.toml b/config/_default/module.toml
@@ -9,6 +9,8 @@
   path = "github.com/hugo-fixit/cmpt-translate"
 [[imports]]
   path = "github.com/hugo-fixit/component-projects"
+[[imports]]
+  path = "github.com/hugo-fixit/shortcode-asciinema"
 [[imports]]
   path = "github.com/hugo-fixit/shortcode-caniuse"
 [[imports]]

diff --git a/content/en/documentation/getting-started/quick-start/index.md b/content/en/documentation/getting-started/quick-start/index.md
@@ -48,6 +48,10 @@ You must also be comfortable working from the command line.
 
 ## Create a Site
 
+> [!TIP]
+> The following steps will guide you through creating a Hugo site step by step.\
+> If you are already familiar with Hugo, you can skip these steps and use the [FixIt CLI][fixit-cli] to quickly create a site.
+
 ### Commands
 
 Verify that you have installed Hugo v{{< param docs.minHugoVersion >}} or later.
@@ -231,6 +235,7 @@ if you encounter any problems or have any questions, please go to our [community
 [deploying-hugo-with-vercel]: https://vercel.com/guides/deploying-hugo-with-vercel
 [hugo-on-netlify]: https://docs.netlify.com/integrations/frameworks/hugo/
 [hosting-and-deployment]: https://gohugo.io/hosting-and-deployment/
+[fixit-cli]: {{< relref path="/documentation/installation#cli" >}}
 [installation]: {{< relref path="/documentation/installation" >}}
 [getting-started]: {{< relref path="/documentation/getting-started" >}}
 [configuration]: {{< relref path="/documentation/getting-started/configuration" >}}

diff --git a/content/en/documentation/installation/index.md b/content/en/documentation/installation/index.md
@@ -143,17 +143,18 @@ hugo mod get github.com/hugo-fixit/[email protected]
 
 ## CLI
 
+{{< asciinema-embed 697494 >}}
+
 FixIt provides an [official CLI][fixit-cli] for quickly scaffolding ambitious Hugo FixIt site skeleton. It provides two ways to quickly scaffold Hugo FixIt site based on Git Submodule or Hugo Module, and provides the ability to check the latest version of the FixIt theme. See the [FixIt CLI docs][fixit-cli] for more details.
 
 ```bash
-npm install -g fixit-cli
-fixit create my-blog
+npx fixit-cli create my-blog
 ```
 
 <!-- markdownlint-disable search-replace -->
 
 {{< admonition danger "Tip" >}}
-The CLI assumes prior knowledge of Hugo and FixIt. If you are new to Hugo or FixIt, we strongly suggest going through [the theme documentation](../..) without any scaffold tools before using the CLI.
+The CLI assumes prior knowledge of Hugo and FixIt. If you are new to Hugo or FixIt, we strongly suggest going through [the theme documentation](../) without any scaffold tools before using the CLI.
 {{< /admonition >}}
 
 ## Comparison

diff --git a/content/zh-cn/documentation/getting-started/quick-start/index.md b/content/zh-cn/documentation/getting-started/quick-start/index.md
@@ -48,6 +48,10 @@ toc:
 
 ## 创建网站
 
+> [!TIP]
+> 接下来的步骤将一步步指导你创建一个 Hugo 网站。\
+> 如果你已经熟悉 Hugo，可以跳过这些步骤，使用 [FixIt CLI][fixit-cli] 来快速创建一个网站。
+
 ### 命令
 
 验证你是否安装了 Hugo v{{< param docs.minHugoVersion >}} 或更高版本。
@@ -237,6 +241,7 @@ hugo
 [deploying-hugo-with-vercel]: https://vercel.com/guides/deploying-hugo-with-vercel
 [hugo-on-netlify]: https://docs.netlify.com/integrations/frameworks/hugo/
 [hosting-and-deployment]: https://gohugo.io/hosting-and-deployment/
+[fixit-cli]: {{< relref path="/documentation/installation#cli" >}}
 [installation]: {{< relref path="/documentation/installation" >}}
 [getting-started]: {{< relref path="/documentation/getting-started" >}}
 [configuration]: {{< relref path="/documentation/getting-started/configuration" >}}

diff --git a/content/zh-cn/documentation/installation/index.md b/content/zh-cn/documentation/installation/index.md
@@ -143,17 +143,17 @@ hugo mod get github.com/hugo-fixit/[email protected]
 
 ## CLI
 
+{{< asciinema-embed 697494 >}}
+
 FixIt 提供了一个[官方 CLI][fixit-cli]，用于快速搭建 Hugo FixIt 站点骨架。它提供了基于 Git 子模块和 Hugo 模块两种方式来快速搭建 Hugo FixIt 站点，并提供了查看 FixIt 主题最新版本的功能。有关更多详细信息，请参阅 [FixIt CLI 文档][fixit-cli]。
 
 ```bash
-npm install -g fixit-cli
-fixit create my-blog
+npx fixit-cli create my-blog
 ```
-
 <!-- markdownlint-disable search-replace -->
 
 {{< admonition danger "提醒" >}}
-CLI 假定你事先了解 Hugo 和 FixIt。如果你是 Hugo 或 FixIt 的新手，我们强烈建议你在使用 CLI 之前先阅读 [主题文档](../..)，不要使用任何脚手架工具。
+CLI 假定你事先了解 Hugo 和 FixIt。如果你是 Hugo 或 FixIt 的新手，我们强烈建议你在使用 CLI 之前先阅读 [主题文档](../)，不要使用任何脚手架工具。
 {{< /admonition >}}
 
 ## 比较

diff --git a/data/projects.en.yml b/data/projects.en.yml
@@ -24,6 +24,7 @@
     - hugo-fixit/cmpt-flyfish
     - hugo-fixit/cmpt-translate
     - hugo-fixit/hugo-json-feed
+    - hugo-fixit/shortcode-asciinema
     - hugo-fixit/shortcode-caniuse
     - hugo-fixit/shortcode-docs-bookmark
     - hugo-fixit/shortcode-mmt-netease

diff --git a/data/projects.zh-cn.yml b/data/projects.zh-cn.yml
@@ -24,6 +24,7 @@
     - hugo-fixit/cmpt-flyfish
     - hugo-fixit/cmpt-translate
     - hugo-fixit/hugo-json-feed
+    - hugo-fixit/shortcode-asciinema
     - hugo-fixit/shortcode-caniuse
     - hugo-fixit/shortcode-docs-bookmark
     - hugo-fixit/shortcode-mmt-netease

diff --git a/go.mod b/go.mod
@@ -6,6 +6,7 @@ require (
 	github.com/hugo-fixit/FixIt v0.3.17-0.20241230033233-1e59a684a699 // indirect
 	github.com/hugo-fixit/cmpt-translate v1.5.2 // indirect
 	github.com/hugo-fixit/component-projects v1.5.3 // indirect
+	github.com/hugo-fixit/shortcode-asciinema v1.0.0 // indirect
 	github.com/hugo-fixit/shortcode-caniuse v1.2.2 // indirect
 	github.com/hugo-fixit/shortcode-rewards v1.0.5 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -4,6 +4,8 @@ github.com/hugo-fixit/cmpt-translate v1.5.2 h1:A9bldeJk+aaAkDvP6LmOpXnbkW2b53SbI
 github.com/hugo-fixit/cmpt-translate v1.5.2/go.mod h1:JZ0STubquTlRgyyGhGPlt2s0KJ1gCa99+P8ltTwQRM4=
 github.com/hugo-fixit/component-projects v1.5.3 h1:phKG//aW4sF9CSUn6kJry2ovBGSlJzxF5H7+ZSlemQw=
 github.com/hugo-fixit/component-projects v1.5.3/go.mod h1:nXW0R37REwpfwUD1I4RtB5QW71vw66nRyB9uEpYxr+c=
+github.com/hugo-fixit/shortcode-asciinema v1.0.0 h1:s+NcUeCzvM8sPAvU5KPirTULyRFN0vMK90burBd5jaU=
+github.com/hugo-fixit/shortcode-asciinema v1.0.0/go.mod h1:xSMC2YHX8KCM8EPPmn7PA6Cwg6X9UGsV8gA7+1WBPTw=
 github.com/hugo-fixit/shortcode-caniuse v1.2.2 h1:cuJVdJ1A0IgJnMQjifCDeRSRxIY0plTgs+wthCbrIls=
 github.com/hugo-fixit/shortcode-caniuse v1.2.2/go.mod h1:RoPLFt+7uLui5rjvkC/qFGeo4nly5AzzwIID9SoDKNc=
 github.com/hugo-fixit/shortcode-rewards v1.0.5 h1:Fudm/FoKt/K5rhTvOpHyvniAQFOAoQ1V/Z33TpReGkA=

diff --git a/hugo.work b/hugo.work
@@ -3,6 +3,7 @@ go 1.20
 use .
 use ../FixIt
 use ../component-projects
+use ../shortcode-asciinema
 use ../shortcode-caniuse
 use ../shortcode-rewards
 use ../cmpt-translate
diff --git a/layouts/partials/custom/profile.html b/layouts/partials/custom/profile.html
@@ -21,7 +21,7 @@
     </ul>
     <div class="docs-preview"></div>
   </div>
-  <pre class="banner-start-commands"><span>npm install -g fixit-cli</span><span>fixit create my-blog</span></pre>
+  <pre class="banner-start-commands"><span>npx fixit-cli new my-blog</span></pre>
   <a href="{{ $quickStartPage.RelPermalink }}" title="{{ $quickStartPage.Description }}" class="quick-start-btn">{{ $quickStartPage.LinkTitle }} <i class="fa-solid fa-arrow-right fa-sm fa-fw"></i></a>
 </div>
 {{- /* EOF */ -}}