Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add script tag in jekyll?

Jekyll is a simple, blog-aware, static site generator for personal, project, how do i add a script tag in such ruby project.

My index.html looks like this :

---
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>

the folder structure also consists of files and folders like this : about.md _config.yml css feed.xml _includes index.html _layouts _posts _sass _site

i am trying to explore the jekyll platform for static web pages.

like image 604
Ryan Pereira Avatar asked Nov 04 '17 07:11

Ryan Pereira


People also ask

How do you add script tags to your body?

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.

How do you add a script to markdown?

You have two options: You could include raw HTML <script> tags in your Markdown, or you could use MkDocs' extra_javascript setting to point to your own JavaScript file.

Can you put script tags in Div?

You can add <script></script> inside a DIV tag. Just check on w3c, it is valid HTML.

Can you put script tags anywhere?

You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags. The <script> tag alerts the browser program to start interpreting all the text between these tags as a script.


1 Answers

Step 1: Make the Script file.

Create the script (.js) file as normal.

You might want to save in an appropriate folder, for example:

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

You may need to make the /assets/ folder if you do not have it.

Don't use underscore (_) at the front of the folder name and Jekyll will then simply copy that folder and contents into the build at `_site' as a static asset.

Step 2: Call / reference the script in your html.

Then just call it as you want it, like:

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

If you want the script available on every page, put the call in your default.html layout file. Every page that uses that default.html layout will then call the script. That layout file can be found at _layouts/default.html.

If you just want it on your current page, just call it in your some-page.md markdown in the same way.

If you only want to call it when it is live and DON'T want to call it while you are developing - like, for example, a google analytics script - then wrap the call in an if statement like this:

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

Hope this helps.

like image 130
TBB Avatar answered Sep 21 '22 02:09

TBB