基于用户选择环境的选择性 ejs 模板

Question

我正在 ejs 中构建一个 hexo 博客主题，它将为我的技术文档项目设置样式。我想允许用户选择一种语言（JavaScript 或 TypeScript）。然后我想输入代码 sn-ps 之类的：

{% js %}
```JavaScript
var geolocation = require("nativescript-geolocation");
```
{% endjs %}

{% ts %}
```TypeScript
import geolocation = require("nativescript-geolocation");
```
{% endts %}

然后是两个按钮/一个滑块，以便用户可以选择 typescript 或 javascript（默认为 js）。我对 UI 实现感到满意，但不确定如何设置属性来确定使用上述哪个 sn-ps？

根据用户选择的语言，会显示正确的 sn-p。我该如何实现呢？

Answer 1

想象一下，你的 Hexo 标签的输出是这样的。

<div>
  <div class="codeblock js">
    var geolocation = require("nativescript-geolocation");
  </div>
  <div class="codeblock ts">
    import geolocation = require("nativescript-geolocation");
  </div>
</div>

现在，您必须编写 javascript 到：

• 默认显示代码块（默认语言）
• 单击按钮时以所需语言显示代码块
• 保存所选语言以在页面刷新或更改时显示正确的语言

这是一个在 JSFiddle 中使用 jQuery 库的示例，因为在 SO 上的 sn-p 中不允许会话存储

在本例中，我使用了.hide() 和.show() 方法，但您也可以使用 CSS 类来执行此操作。在所需的语言代码块上添加一个类 (.addClass())，并使用一些 css 在其他代码块上删除类 (.removeClass())：

.codeblock {
  display:none;
}
.codeblock.active {
  display:block;
}