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

Question

我在ejs中构建了一个hexo博客主题，它将设计我的技术文档项目。我想让用户选择一种语言（JavaScript或TypeScript）。那么我想键入代码片段是这样的：

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

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

然后两个Button /滑块，使用户可以选择打字稿或JavaScript（这将默认为爵士）。我对UI实现感到满意，但我不确定如何设置属性来确定使用上述哪个片段？

并取决于用户选择哪种语言，会显示正确的片段。我怎么能实现这个？

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

在这个例子中，我用.hide()和.show()方法，但你也可以使用CSS类来做到这一点。所需语言的代码块添加一个类（.addClass()），并取消对其他代码块类（.removeClass()）与一些CSS：

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