基於用戶選擇環境的選擇性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; 
}