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

【问题标题】：Changing page style on button click in Jekyll blog (with js or liquid templating)在 Jekyll 博客中单击按钮更改页面样式（使用 js 或液体模板）
【发布时间】：2021-05-15 23:12:42
【问题描述】：

我正在更新 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 中工作？找不到任何解决方案，更不用说符合最佳做法的解决方案了。

【问题讨论】：

标签： javascript html button jekyll liquid

【解决方案1】：

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

【讨论】：