如何在 jekyll 中添加脚本标签？

Question

Jekyll 是一个简单的、支持博客的、用于个人项目的静态站点生成器，我如何在这样的 ruby​​ 项目中添加脚本标签。

我的 index.html 看起来像这样：

---
layout: default
---

<div class="home">

  <h1 class="page-heading">Posts</h1>

  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>

        <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
      </li>
    {% endfor %}
  </ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>

文件夹结构也包含这样的文件和文件夹：about.md _config.yml css feed.xml _includes index.html _layouts _posts _sass _site

我正在尝试探索 jekyll 平台的静态网页。

Answer 1

第 1 步：制作脚本文件。

照常创建脚本 (.js) 文件。

您可能希望保存在适当的文件夹中，例如：

../assets/js/some-script.js

如果您没有 /assets/ 文件夹，您可能需要创建它。

不要在文件夹名称前面使用下划线 (_)，然后 Jekyll 会将该文件夹和内容作为静态资产复制到 `_site' 的构建中。

第 2 步：在您的 html 中调用/引用脚本。

然后随心所欲地调用它，例如：

...<script src="{{ base.url | prepend: site.url }}/assets/some-script.js"></script>....

如果您希望脚本在每个页面上都可用，请将调用放入您的 default.html 布局文件中。然后，使用该 default.html 布局的每个页面都将调用该脚本。可以在_layouts/default.html 找到该布局文件。

如果您只想在当前页面上使用它，只需以相同的方式在您的 some-page.md 降价中调用它。

如果您只想在它处于活动状态时调用它并且不想在开发时调用它 - 例如，谷歌分析脚本 - 然后将调用包装在 if 语句中，如下所示：

{% if site.environment == "production" %}<script src="//localhost:35729/livereload.js"></script>{% endif %}

希望这会有所帮助。