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

Question

我正在用 ejs 构建一个 hexo 博客主题，它将为我的技术文档项目设计样式。我想允许用户 select 一种语言（JavaScript 或 TypeScript）。然后我想输入类似的代码片段：

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

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

然后是两个按钮/一个滑块，因此用户可以选择打字稿或 javascript（默认为 js）。我对 UI 的实现很满意，但我不确定如何设置属性来确定使用上述哪个片段？

并且根据用户select编辑的语言，将显示正确的片段。我该如何实施？

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 写入：

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

这是一个 jQuery 库在 JSFiddle 中的示例，因为 SO

上的片段中不允许会话存储

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

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

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

Selective ejs template based on user selected environment

javascript

ejs

node.js

hexo