New blog：Guide to Adding Plugins to Apache Answer (#239)

Co-authored-by: Zhu Xuanlyu <[email protected]>

blog/2024-08-22-guide-to-add-answer-plugins/index.md

@@ -0,0 +1,65 @@
+---
+title: "Guide to Adding Plugins to Apache Answer"
+authors: [ZhuXuanlyu, ChenJiaji, Anne]
+category: Tutorials
+featured: true
+image: [email protected]
+description: "Learn how to easily add Apache Answer plugins and extend its functionality"
+
+---
+
+Plugins are like a set of building blocks that you can freely combine to create the functionality you want. Adding plugins is an excellent way to extend Apache Answer's features. This article will provide a detailed guide on the installation steps, helping you easily add plugins and master the process of installing and using them.
+
+## Download Plugins
+
+1. Click [here](https://github.com/apache/incubator-answer-plugins/tree/main) to download the desired plugin from the official Apache Answer plugin repository.
+2. Place the Plugin: Move the downloaded plugin files into the `./ui/src/plugins` directory of your project.
+3. Plugin Type Reference: https://answer.apache.org/docs/development/plugins
+
+_Important: The folder should be named "plugins," not "plugin."_
+![files](files.png)
+
+## Install Standard UI Plugin
+
+1. In the terminal, run `cd ./ui` to navigate to the ui directory.
+2. Install dependencies: Run `pnpm pre-install`.
+3. Start the project: Run `pnpm start` to launch the development server.
+4. Backend Plugin Setup: In a new terminal window, continue with the backend plugin installation steps.
+
+## Install Backend Plugin
+
+1. Compile Frontend Code:
+  - Linux/MacOS: Run `make ui`.
+  - Windows: Run `pnpm install` and `pnpm build`.
+
+2. Import Plugin: In the `cmd/answer/main.go` file, import the plugin (replace my-plugin with your plugin name):
+```
+import (
+    answercmd "github.com/apache/incubator-answer/cmd"
+    // Import the plugins
+    _ "github.com/apache/incubator-answer-plugins/my-plugin"
+)
+```
+
+The image below shows examples with the editor-chart, editor-formula, and embed-basic plugins.
+![main-go](main-go.png)
+
+3. Update go.mod: Navigate back to the project root directory by running `cd ..`. Use `go mod edit` to add the plugin to the go.mod file:
+```
+go mod edit -replace=github.com/apache/incubator-answer-plugins/my-plugin=./ui/src/plugins/my-plugin
+```
+Note: Windows users need to use double quotes, as shown below:
+```
+go mod edit -replace="github.com/apache/incubator-answer-plugins/my-plugin"="./ui/src/plugins/my-plugin"
+```
+
+Example with the editor-chart, editor-formula, and embed-basic plugins.
+![go-edit](go-edit.png)
+
+4. Download Dependencies: Run `go mod tidy` to download and update dependencies.
+5. Start the Project: Run `go run cmd/answer/main.go run -C ./answer-data`.
+![go-tidy](go-tidy.png)
+
+Open the backend interface URL in your browser. Under the **Admin - Installed Plugins** section, you'll see the added plugins. Click the `⋮` in the Action column to activate or remove the plugin.
+
+Congratulations, you've successfully added a plugin! Click [here](https://answer.apache.org/plugins/) to explore more community-built plugins. Additionally, we offer a detailed tutorial on [How to Package and Deploy Answer Plugins](https://answer.apache.org/blog/2024/07/02/how-to-package-and-deploy-answer-plugins/) and a [Plugin Development Guide](https://answer.apache.org/docs/development/plugins/) to make your Apache Answer even more powerful.

i18n/zh-CN/docusaurus-plugin-content-blog/2024-08-22-guide-to-add-answer-plugins/index.md

@@ -0,0 +1,65 @@
+---
+title: "添加 Apache Answer 插件指南"
+authors: [ZhuXuanlyu, ChenJiaji, Anne]
+category: Tutorials
+featured: true
+image: [email protected]
+description: "教你轻松添加 Apache Answer 插件，扩展 Answer 功能"
+
+---
+
+插件就像是一盒积木，你可以自由组合，把插件组合成你想要的功能。添加插件是扩展 Answer 功能的绝佳途径，本文将详细介绍插件的安装步骤，让你轻松添加插件，轻松掌握插件的安装和使用方法。
+
+## 下载插件
+
+1. 点击[此处](https://github.com/apache/incubator-answer-plugins/tree/main)从官方 Apache Answer 插件仓库下载所需插件。
+2. 放置插件：将下载的插件文件，放置到项目目录下的 `./ui/src/plugins` 中
+3. 插件类型参考： https://answer.apache.org/docs/development/plugins
+
+_注意：文件夹应该是 plugins，而不是 plugin。_
+![files](files.png)
+
+## 安装标准 UI 插件（Standard UI Plugin）
+
+1. 在终端执行 `cd ./ui` 到进入到ui目录 。
+2. 安装依赖项：执行 `pnpm pre-install`。
+3. 启动项目：执行 `pnpm start` 启动开发服务器。
+4. 后端插件准备：在一个新的终端窗口，继续执行后端插件安装步骤。
+
+## 安装后端插件（Backend Plugin）
+
+1. 编译前端代码。
+  - Linux/MacOS：执行 `make ui`。
+  - Windows：执行 `pnpm install` 和 `pnpm build`。
+
+2. 导入插件：在 `cmd/answer/main.go` 文件中，导入插件（将my-plugin替换成插件名）
+```
+import (
+    answercmd "github.com/apache/incubator-answer/cmd"
+    // Import the plugins
+    _ "github.com/apache/incubator-answer-plugins/my-plugin"
+)
+```
+
+下图以 editor-chart, editor-formula, embed-basic 插件为例。
+![main-go](main-go.png)
+
+3. 更新 go.mod：通过执行 `cd ..` 命令退回到 answer 根目录。使用 go mod edit 将插件添加到 go.mod 文件。
+```
+go mod edit -replace=github.com/apache/incubator-answer-plugins/my-plugin=./ui/src/plugins/my-plugin
+```
+注意：Windows 用户需要使用双引号，可参考下面的代码：
+```
+go mod edit -replace="github.com/apache/incubator-answer-plugins/my-plugin"="./ui/src/plugins/my-plugin"
+```
+
+以 editor-chart, editor-formula, embed-basic 插件为例。
+![go-edit](go-edit.png)
+
+4. 下载依赖：执行 `go mod tidy` 下载并更新依赖。
+5. 启动项目：`go run cmd/answer/main.go run -C ./answer-data`。
+![go-tidy](go-tidy.png)
+
+在浏览器打开后端借口网址，可在 Admin - Installed Plugins 里看到添加的插件，点击 Action 列的 `⋮` 即可激活和移除该插件。
+
+你已经完成了插件添加，点击[此处](https://answer.apache.org/plugins/)可以了解更多社区构建的插件。此外，我们还提供了 [Apache Answer 使用插件的详细教程](https://answer.apache.org/zh-CN/blog/2024/07/02/how-to-package-and-deploy-answer-plugins/)，以及[插件开发指南](https://answer.apache.org/zh-CN/docs/development/plugins/)，让你的 Apache Answer 变得更加强大。