在 Jekyll 博客中单击按钮更改页面样式（使用 js 或 liquid 模板）

Question

我正在更新 Jekyll 博客的默认模板，想更改按钮单击时使用的样式。我在没有按钮的情况下使用 Liquid 模板一切正常，就像我添加一样 {%- include style_b.html -%}那么风格就变了

但是我想添加一个按钮，当单击时，它会从样式 'a' 到样式 'b' 来回切换。我已经像这样添加了按钮： <button type="button" name="change_style" onclick=ChangeStyle();>change page style</button> 以便链接的按钮调用 .js 函数：

function ChangeStyle() {
  $("#result").load("../_includes/style_b.html");
  console.log("loaded")
}

这实际上并没有改变样式，即使是我也不知道如何撤消它。有没有办法在 Jekyll 中执行此操作？找不到任何解决方案，更不用说遵循最佳实践的解决方案了。

Answer 1

Jekyll 构建站点后，您无权访问 _site 目录中的 _includes。您需要将 style_a.html 和 style_b.html 设为独立页面而不是包含页面，或者在 CSS 中进行这些更改以便您可以使用 Javascript.[=12 定位它们=]

在 Jekyll 博客中单击按钮更改页面样式（使用 js 或 liquid 模板）

Changing page style on button click in Jekyll blog (with js or liquid templating)

html

javascript

button

liquid

jekyll