{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 淡お忘 的问题《Reach Jekyll Variables With JavaScript and Pass it》','https://www.manongdao.com/q-805041.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Highly possible that I have error logic but I'm just learning both JavaScript and Jekyll.
My goal is to manipulate an HTML element through JavaScript and place some Jekyll variable inside the inner HTML of that element. Everything is loading from a local development directory with jekyll serve. I tried the following:
HTML:
<html>
<body>
<h2>Something</h2>
</body>
</html>
JavaScript:
document.addEventListener("DOMContentLoaded", function () {
manipulate = document.getElementsByTagName("h2");
manipulate[0].innerHTML = "{{ page.title }}";
});
Structure:
├── _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
I reached the tags.js from the tags.md
For example, if my page's title would be "foo", then I assumed the following HTML output in the <h2> tag (this was my goal):
<h2>foo</h2>
But instead it gave me the following:
<h2>{{ page.title }}</h2>
I think it happened cause jekyll renders the values of the variables inside the jinja format and gives us the output, and after that I just placed the string "{{ page.title }}" to the <h2> tag.
I'm sure I'm missing something, but if you used something like that in one of your project, I'd appreciate any help.
following @KevinWorkman's answer, we added:
to the .JS file, then created a layout file, blank.html, with just this inside:
Jekyll only touches files that have frontmatter. If a file doesn't contain frontmatter, then it is simply copied to the site directory structure. Your
tags.jsfile probably doesn't contain any front matter, which is why the liquid tags aren't being replaced.To get Jekyll to replace liquid tags inside your JavaScript file, just add a frontmatter section to the top of it. That frontmatter can be empty!
That will fix the problem of Jekyll not replacing the tags, but you're going to have another problem: when Jekyll is replacing the tag in the JavaScript, it doesn't know ahead of time what page will be calling that JavaScript. So it doesn't know what
page.titlewill be! (Actually, it will use the title of your JavaScript file, which probably depends on your default settings.)One way around this is to get rid of the liquid from your JavaScript, and just take a parameter instead. Then from your html file, pass that parameter into the JavaScript. That parameter can be the liquid tag.