npm 包 wiki-plugin-shell 使用教程

简介

wiki-plugin-shell是一款基于Node.js平台的npm包，为在Wiki网站上嵌入一个交互式的终端提供了便捷的解决方案。该NPM包允许用户在Wiki中运行shell命令，并将结果呈现在Wiki页面上。本文将向读者介绍如何使用wiki-plugin-shell包，以及如何将其集成到您的Wiki页面中。

安装

首先，我们需要使用npm包管理器来安装wiki-plugin-shell包。打开终端，并输入以下命令，即可将其安装在您的工程目录下：

npm install wiki-plugin-shell

如何使用

在您的Wiki页面上引入该插件，大致以下两个步骤：

1. 在Wiki页面上插入如下html

   <script src="<path-to>/wiki-plugin-shell.js"></script>

   这里面的路径是指指向wiki-plugin-shell.js的绝对路径。

2. 插入Command Element (具体如下)

Command Element

Command Element是用来运行Shell命令的 html 元素，您可以通过使用以下标记来为您的Wiki页面创建Command Element。

<wiki-plugin-shell-command data-exec="echo Awesome!"></wiki-plugin-shell-commad>

参数data-exec是必要的，它指定了要在Shell中运行的命令。

高级用法

此外，wiki-plugin-shell还提供了一些高级用法，例如您可以为您的代码添加自定义CSS和JS以使其更易于使用。以下是这些高级用法的一些示例：

1. 自定义命令

   可以为每个Command Element指定独立的命令，如下所示：

   <wiki-plugin-shell-command data-exec="ls -hal /usr" id="List-Usr"></wiki-plugin-shell-command>

2. 自定义外观

   您可以使用CSS添加自定义外观，例如：

   .shell > .is-output > pre {
       ...
   }
   
   .shell > .is-output > pre > code {
       ...
   }

3. 添加自定义JS

   如果您需要在Command Element中添加某些逻辑或传参，可以通过添加自定义的JavaScript或jQuery代码来实现。在wiki-plugin-shell中，您可以使用以下函数：

   $(document).ready(function() {
       //代码逻辑
   });

总结

到这里，使用wiki-plugin-shell包的教程就告一段落。我们通过本文向您介绍了如何安装和使用wiki-plugin-shell，以及如何通过添加自定义样式和功能来改进它。希望这篇文章对您在使用wiki-plugin-shell方面提供了有用的信息，将来的开发中，它也能给你带来帮助。如果您在使用wiki-plugin-shell中遇到任何问题，我们欢迎您随时联系我们的支持团队咨询，我们很快会给您答案。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0de