2

I am using Octopress to write posts, which uses markdown file to generate html files, using :

rake new_post['my_post']
rake generate

But what if I need to add some JavaScript demo inside my post, which I need to write some code inside the post, which may possibly be a html page I am writing as.

Can I achieve this with Octopress and remain overall consistency of style?

JaskeyLam
  • 15,405
  • 21
  • 114
  • 149

1 Answers1

4

You can put your Javascript block into its own HTML file, in your source/_includes/ directory. Then you can embed that into your post using Liquid include tags:

---
layout: post
title: "JS Demo"
date: 2015-01-01 01:01:01
categories: 
---

{% include myjs.html %}

and the contents of myjs.html would be:

<div id="myelement"></div>

<script>
$('div#myelement').text("hello world");
</script>

and myjs.html would be at source/_includes/myjs.html. Then your final page source code would (for example) render as:

<div><h1>JS Demo</h1></div>
<div id="myelement">hello world</div>

If you want to structure the Javascript code you're including a bit more, you can make a directory for Javascript files in (e.g.) source/_includes/demo/, then put your Javascript into source/_includes/demo.html. Then your markdown would have the following Liquid include tags:

{% include demo/demo.html %}
charlesreid1
  • 4,360
  • 4
  • 30
  • 52
  • How can I post a myjs.html? I am writing .markdown and use `rake generate ` to generate .html file. – JaskeyLam Jun 08 '15 at 03:21
  • You literally plop the include code into your post's markdown. As long as myjs.html is in your `source/_includes` directory, and has an html extension, it'll get included as verbatim html code. – charlesreid1 Jun 08 '15 at 03:54
  • For example, if I am writing a markdown with a title " ## JS DEMO ##", and I need to show a "hello world from myjs.html" after that title, how should I write the myjs.html . I mean without knowing the dom elment of the title "JS DEMO", how can I create a dom element and insert it into the right place? – JaskeyLam Jun 08 '15 at 04:08
  • You can add the `{% include _includes/myjs.html %}` tags right after your title. Then, in `myjs.html`, you would have your Javascript code in `` tags. If you need to have a DOM element to modify, you can add `
    ` to `myjs.html`, right before you put your Javascript `` tags.     – charlesreid1 Jun 08 '15 at 04:10
  • Unless you're trying to modify the DOM of the post title itself. If that's the case, you can modify your Octopress theme, and add a custom id attribute to whatever tag you want to modify. Then, when it prints the title, it would look like `

    JS DEMO

    ` and then you could grab the `div#mytitle` element from your Javascript code.     – charlesreid1 Jun 08 '15 at 04:12
  • Yes, you got it. If you're not sure how to write a hello world program in javascript, that's a whole different question and I'd suggest opening a separate thread. – charlesreid1 Jun 08 '15 at 04:18
  • Say I am only need to print hello world after the title, how shoud I organize the markdown file and myhs,html? I know how to operate on dom, say if I am using jquery, I know the id of the title is title1, i will do like : $('#title').append($("
    hello world
    ')). But now the problem is I do not know the id(or class to have the selector), to append my new dom element to. Would you please update your answer to show a case like this?
     – JaskeyLam Jun 08 '15 at 04:22
  • if you're printing hello world *after* the title, and not *modifying* the title, why are you getting the title tag? just add your own div element and add hello world to it. I've updated my answer to show you what I mean. – charlesreid1 Jun 08 '15 at 04:29
  • Works! But the path does not work for me. I put a demo1.html inside /_includes/demo , and the path `{% include demo/demo1.html %}` works for me, would you please check your answer and updated it? I will accept it after that. – JaskeyLam Jun 08 '15 at 06:26