Выборочный шаблон ejs на основе выбранной пользователем среды

Question

Я создаю тему блога hexo в ejs, которая будет стилизовать мой технический проект документации. Я хочу разрешить пользователю выбирать язык (JavaScript или TypeScript). Затем я хотел бы напечатать фрагменты кода что-то вроде:

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

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

Затем две кнопки / ползунок, чтобы пользователь мог выбрать машинописный текст или javascript (который по умолчанию будет js). Мне комфортно с реализацией пользовательского интерфейса, но я не уверен, как установить свойство, чтобы определить, какой из приведенных выше фрагментов используется?

и в зависимости от того, какой язык выбрал пользователь, будет отображаться правильный фрагмент. Как я мог реализовать это?

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 для этого. Добавить класс (.addClass()) на желаемые блоки кода языка и удалить класс (.removeClass()) в других блоках кода с некоторыми CSS:

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