org-mode の記事に、htmlを埋め込んでみる。 これは、htmlをそのまま記述すればよい。

 <h1>これはhtmlで記述した文字</h1>

こういう記述は

これはhtmlで記述した文字

このようになる。

別ファイルのjavascriptやcssの参照

javascriptやcssを別ファイルにして利用する場合はどうするか。 これも画像ファイルと同じで、ファイルを static ディレクトリの下に置くか、content ディレクトリに置くかで、相対パスの記述が変わる。

static ディレクトリに置く場合

ファイル名を / で始めると、staticディレクトリ以下のファイルを参照できる。 例えば、cssを static/scripts/hoge.css に置いた場合は、このように記述する。

 <link rel="stylesheet" type="text/css" href="/scripts/hoge.css" />

ディレクトリ構成はこのようになっている。

├── static
│   └── scripts
│       ├── hoge.css

content ディレクトリに置く場合

ファイル名が / で始まらない場合は、この記事からの相対パスとなる。

記事のファイルが content/posts/hoge.org の場合、urlは /posts/hoge/index.html として扱われる。 このため、

 <link rel="stylesheet" type="text/css" href="hoge.css" />

とした場合、hoge.css は content/posts/hoge/hoge.css を参照することになる。

ファイルの配置はこのようになる。

content/
└── posts
    ├── hoge.org
    ├── hoge
    │   └── hoge.css

これの実用例として、このようなものを作ってみた。 Julian date calendar