使用 JavaScript 访问 Jekyll 变量并通过 DOM 操作传递它

2024-04-28

我很可能有错误逻辑,但我刚刚学习 JavaScript 和 Jekyll。

我的目标是通过 JavaScript 操作 HTML 元素,并将一些 Jekyll 变量放置在该元素的内部 HTML 中。一切都从本地开发目录加载jekyll serve。我尝试了以下方法:

HTML:

<html>
<body>
<h2>Something</h2>
</body>
</html>

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    manipulate = document.getElementsByTagName("h2");
    manipulate[0].innerHTML = "{{ page.title }}";
});

结构:

├── _config.yml
├── contact-us.md
├── css
│   └── main.scss
├── feed.xml
├── _includes
│   ├── footer.html
│   ├── header.html
│   ├── head.html
│   ├── readtime.html
│   └── sidebar.html
├── index.html
├── js
│   ├── anchor.js
│   └── tags.js
├── _layouts
│   ├── default.html
│   ├── page.html
│   ├── post.html
│   ├── single.html
│   └── tags.html
├── _posts
├── readme.md
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
├── _site
│   └── [...]
└── tags.md

我到达了tags.js来自tags.md

例如,如果我的页面标题是“foo”,那么我假设以下 HTML 输出在<h2> tag (这是我的目标):

<h2>foo</h2>

But instead它给了我以下内容:

<h2>{{ page.title }}</h2>

我认为这是因为 jekyll 渲染 jinja 格式中的变量值并给我们输出,然后我只是放置了字符串"{{ page.title }}" to the <h2> tag.

我确信我遗漏了一些东西,但是如果您在您的项目之一中使用了类似的东西,我将不胜感激。


Jekyll 只接触有 frontmatter 的文件。如果文件不包含 frontmatter,则会将其按原样复制到站点的目录结构中。你的tags.js文件可能不包含任何前面的内容,这就是液体标签没有被替换的原因。

要让 Jekyll 替换 JavaScript 文件中的 Liquid 标签,您可以在其顶部添加一个 frontmatter 部分。前面的内容可以为空!

---
---
//rest of your JavaScript

这将解决 Jekyll 不替换标签的问题,但你会遇到另一个问题:当 Jekyll 替换 JavaScript 中的标签时,它事先不知道哪个页面将调用该 JavaScript。所以它不知道什么page.title将! (实际上,它将使用 JavaScript 文件的标题,这可能取决于您的默认设置。)

解决这个问题的一种方法是摆脱 JavaScript 中的液体,并采用参数代替。然后从 html 文件中将该参数传递到 JavaScript。该参数可以是液体标签。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JavaScript 访问 Jekyll 变量并通过 DOM 操作传递它 的相关文章

  • 如何使用 lodash、underscore 或 bluebird 同步迭代数组 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我有一个数组 其中每个索引处包含文件名 我想下载这些文件一次一个 同步 我知道关于 Async 模块 但我想知道是否有任何功能Lodash
  • RxJS - 我需要取消订阅吗

    如果我有这样的事情 class MyComponent constructor this interval Observbale interval 1000 const c new MyComponent const subscriptio
  • Javascript图像编辑插件

    在哪里可以找到 Javascript 或 jQuery 图像编辑器插件 用户可以单击图像进行编辑 并且该插件允许他们进行裁剪 调整大小 旋转 翻转等 Pixastic http pixastic com lib 不再活跃 和CamanJS
  • Javascript 函数指针,以参数作为函数中的参数

    不确定标题的措辞是否正确 或者是否有更好的表达方式 但我认为还可以 无论如何 到目前为止我了解以下内容 a b a b c foo 其中 foo 是在其他地方定义的函数 不接受任何参数 只会导致函数 a b 使用上述参数运行 然后可以在函数
  • 在 JavaScript 中计算不包括周末和节假日的天数

    我正在尝试编写一个代码 其中将计算总天数 不包括周末和自定义假期 我通过 stackoverflow 和 adobe 论坛进行搜索以找到解决方案 并提供了以下代码 如果公共假期恰逢工作日 周六至周三 则不计算在内 我的问题是 如果公共假期落
  • 无法使用 Jade 模板包含相对路径文件

    当我尝试将文件包含在同一文件夹中时 收到以下错误 the filename option is required to use include with relative paths 有两个文件 索引 jade 项目列表 jade cont
  • ECMAScript 6 类中的 getter 和 setter 有何用途?

    我对 ECMAScript 6 类中 getter 和 setter 的意义感到困惑 什么目的 下面是我参考的一个例子 class Employee constructor name this name name doWork return
  • Sequelize 关联 - 请改用 Promise 风格

    我正在尝试将 3 张桌子连接在一起Products Suppliers and Categories然后排SupplierID 13 我读过了如何在sequelize中实现多对多关联 https stackoverflow com a 25
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用 jQuery live() 初始化插件?

    使用 jQuery 在特定类的所有当前和未来元素上自动初始化插件的最佳方法是什么 例如 假设我想要全部
  • 为什么人们将自己的自定义/用户函数添加到 jQuery 对象中? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我见过人们将自己的自定义 用户功能添加到jQuery目的 例如 myUserFunc function regular JS code 你为什么
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • linkedin js 如何是有效的 javascript

    LinkedIn Javascript 集成是通过以下方式完成的 我不明白 这怎么是一个有效的javascript 为什么 api key 没有被引用 脚本标签的主体带有src永远不会被执行 但是 加载的脚本可以像访问任何其他元素的内容一样
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • 使标签充当输入按钮

    我怎样才能做一个 a href http test com tag test Test a 就像表单按钮一样 通过充当表单按钮 我的意思是 当单击链接执行操作时method get 或 post 以便能够通过 get 或 post 捕获它
  • 单击 html 中的按钮后如何从 javascript 函数写入文件

    我正在尝试编写真正基本的代码 在 html 文件上按下按钮后 通过 JavaScript 函数在本地写入 txt 文件 这不可能吗 我可以仅使用 javascript 文件写入文件 但在尝试同时使用两者时则不能
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • 如何在控制台中隐藏日志消息的来源?

    当将消息输出到控制台时 还会显示源代码 在 Chrome 开发者工具中 它位于右侧 console log Foo Source Foo test js 1 Output 但是 在某些网站上 会显示消息without正在显示的源 例如Fac
  • 调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕?

    我读了关于使用范围的一些 AngularJS 陷阱的文章 http thenittygritty co angularjs pitfalls using scopes 并且它指出您不应在表达式中使用函数 并且我知道每次框架认为需要时都可能会
  • 了解客户端文件的对象 URL 以及如何释放内存

    我在用createObjectURL获取本地图像文件的引用 URL 当我完成文件 图像后 我打电话revokeObjectURL释放该内存 一切对我来说都很好 但我只是想确保我释放了我能释放的所有内存 我检查后出现了我的担忧chrome b

随机推荐

  • 堆内存和Slab分配

    我很困惑heap and free list 我有几个问题 我对C中malloc的工作原理有自己的理解 如果我错了 请纠正我 堆内存是否被组织为数据的链表 空闲列表 块 堆内存和空闲列表有区别吗 我对存储分配的理解 有待改进 当我们调用ma
  • 如何获取资源文件中所有资源的名称

    在 Visual Basic 项目中 我添加了一个包含一堆图像的资源文件 resx 现在我想查询图像的名称 如果我在 Visual Studio IDE 的设计器视图中打开 resx 文件并选择一个图像 属性网格会显示一个名称属性 默认为
  • 如何使用共享数据库在 Heroku 上进行 GIS 查询?

    我有一张带有纬度和经度的地理编码位置表 我希望我的数据库查询返回它们的过滤列表 按距固定点的距离排序 我探索过以下几个选项 Postgresql 的 Earthdistance 贡献 http www postgresql org docs
  • 无法通过 phantomjs 网络服务器传送图像文件

    我正在尝试让 phantomjs 网络服务器为我工作 我想提供 2 个文件 html 文件和 png 图像文件 html 文件服务良好并在浏览器中正确呈现 但 png 文件不是 这是服务器的代码 var fs require fs func
  • 使用 CORS 进行 React 中的 Fetch 时出现问题

    我对 CORS 完全陌生 并且遇到以下问题 我正在使用 create react app 端口 3000 调用 spring boot 端口 8080 中创建的一些 REST 服务 我将 JWT 身份验证添加到我的 REST API 中 因
  • 如何根据本地目录中的requirements.txt 文件使用pip 安装软件包?

    问题是这样的 我有一个要求 txt文件看起来像 BeautifulSoup 3 2 0 Django 1 3 Fabric 1 2 0 Jinja2 2 5 5 PyYAML 3 09 Pygments 1 4 SQLAlchemy 0 7
  • mongodb 聚合随机化(shuffle)结果

    我正在浏览一堆 mongo 文档 但找不到洗牌或随机化结果内容的可能性 有没有 特别是对于聚合框架本身来说 实际上并没有任何本地方法 因为还没有可用的运算符来执行诸如生成随机数之类的操作 因此 无论您可能投射一个字段进行排序的任何匹配 都不
  • 打开和关闭 RDP 窗口

    我有很多服务器 我想检查是否可以使用 RDP 连接到它们 我有 2000 台服务器 所以我想实现自动化 我对 PowerShell 不太熟悉 以下是我所掌握的 列表 txt ip1 ip2 ip3 ipn 这是我的代码 我在每个 ip 上循
  • 解决 emacs 错误的想法:“应用:生成子进程:exec 格式错误”

    我正在尝试将 rdebug 与 emacs 和 cygwin 一起使用 但遇到了麻烦 每当我执行 M x rdebug 并为其提供适当的脚本来运行时 它都会因错误而停止 apply Spawning child process exec f
  • 是否可以在 Cython 中声明和定义位字段?

    在 C C 中你可以声明一个位域 https en cppreference com w cpp language bit field作为结构体 通过指定用于结构体中给定字段的位数 例如 typedef struct char threeB
  • 如何在 ActionBar Sherlock 中使用滑动菜单?

    我正在尝试在使用操作栏 Sherlock 的现有项目中使用滑动菜单 但我无法做到这一点 如果您能给我一个简单的演示或教程来向我展示如何做到这一点 那就太好了 我们必须使用片段来实现滑动菜单吗 Update 当用户单击滑动菜单列表中的某个项目
  • 检查 ARReferenceImage 是否在相机视图中不再可见

    我想检查一下是否AR参考图像 https developer apple com documentation arkit arreferenceimage在相机视图中不再可见 目前我可以检查图像的节点是否在相机的视图中 但是当AR参考图像
  • 将 NSSet 转换为 Swift 数组

    在 CoreData 中我定义了一个无序的一对多关系 这种关系在 Swift 中定义如下 NSManaged var types NSMutableSet 然而 为了最好地使用 Swift 我想使用一个普通的 Swift 数组 比如Type
  • Grails 中数据库迁移的良好工作流程是什么?

    我想使用数据库迁移 http grails org plugin database migration用于数据库迁移的 grails 插件 当我第一次启动 Grails 应用程序时 所有数据库表都会自动创建 我的 DataSource gr
  • Visual Studio 2015 折叠所有快捷方式

    I have gone thru http visualstudioshortcuts com 2015 http visualstudioshortcuts com 2015 this link and Keyboard shortcut
  • gcc何时编译未使用的模板代码?

    我有以下 诚然是人为的 代码 可以在 gcc 6 中编译得很好 但不能在 gcc 7 中编译 请注意 在定义中使用了未声明的构造函数bar 如果函数在代码中的其他地方被引用 取消注释 这应该打印一个错误foo bar 导致 gcc 6 打印
  • Cakephp 图像 - 无法确定 mimetype

    蛋糕PHP 2 3 我正在上传图像 但出现错误 Can not determine the mimetype Error An Internal Error Has Occurred 在我的模型上 这是我的 validation 的一部分
  • 使用 Silverlight 在运行时在 tabcontrol 中添加 TabItem

    嗨朋友们 我是 silverlight 应用程序的新手 我创建了带有 4 个 tabitem 的 tabcontrol tabitem 的名称类似于 tab1 tab2 tab3 tab4 我需要在运行项目中添加一个选项 通过以下代码添加成
  • 字符串文字的行为令人困惑

    下面的代码中字符串文字的行为非常令人困惑 我可以理解第 1 行 第 2 行和第 3 行是true 但为什么是第 4 行false 当我打印两者的哈希码时 它们是相同的 class Hello public static void main
  • 使用 JavaScript 访问 Jekyll 变量并通过 DOM 操作传递它

    我很可能有错误逻辑 但我刚刚学习 JavaScript 和 Jekyll 我的目标是通过 JavaScript 操作 HTML 元素 并将一些 Jekyll 变量放置在该元素的内部 HTML 中 一切都从本地开发目录加载jekyll ser