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

Selective ejs template based on user selected environment

本文关键字：环境 选择性 ejs 模板 选择 于用户 用户      更新时间：2023-09-26

我正在ejs中构建一个hexo博客主题，它将为我的技术文档项目提供样式。我想允许用户选择一种语言（JavaScript或TypeScript）。然后我想键入一些代码片段，比如：

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

然后是两个按钮/a滑块，这样用户就可以选择typescript或javascript（默认为js）。我对UI实现很满意，但不确定如何设置属性来确定使用了上面的哪个片段？

根据用户选择的语言，将显示正确的摘录。我该如何实现？

想象一下，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上的代码段中不允许会话存储

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

.codeblock {
  display:none;
}
.codeblock.active {
  display:block;
}
相关文章：