MYAO's WEBSITE

2017-05-04

Syntax and Rule of template files for Tripitaka

HTMLファイルを作るためのテンプレートのファイルの書き方を説明します。

テンプレートファイル

記事の内容については、前のページで説明したファイルを使います。デザインやHTMLのマークアップの側はHTMLによく似たファイルを使います。

<!doctype html>  
<html lang="ja">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width = device-width, initial-scale = 1, user-scalable = yes">  
<link rel="stylesheet" type="text/css" href="style.css">  
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="feed.xml">  
<title><tri:project prop="site-name"> - <tri:page prop="title"></title>  
</head>  
<body>  
<header id="main-header">  
<h1><a href="index.htm"><tri:project prop="site-name"></a></h1>  
</header>  
<main>  
<header id="article-header">  
<div id="date"><tri:page prop="date"></div>  
<h2 id="title"><tri:page prop="title"></h2>  
</header>  
<div id="article-main">  
<tri:page prop="text">  
</div>  
<footer id="article-footer">  
UP: <a href="<tri:page prop="up">.htm"><tri:page prop="title" name="<tri:page prop="up">"></a>  
PREV: <a href="<tri:page prop="prev">.htm"><tri:page prop="title" name="<tri:page prop="prev">"></a>  
NEXT: <a href="<tri:page prop="next">.htm"><tri:page prop="title" name="<tri:page prop="next">"></a>  
</footer>  
</main>  
<footer id="main-footer">  
<div id="icons"><a href="feed.xml"><img src="img/feed.png" alt="feed.xml" class="icon-img"></a>  
<a href="https://twitter.com/<tri:project prop="twit">"><img src="img/twit.png" alt="https://twitter.com/<tri:project prop="twit">" class="icon-img"></a>  
<a href="https://github.com/<tri:project prop="github">"><img src="img/github.png" alt="https://twitter.com/<tri:project prop="github">" class="icon-img"></a>  
</div>  
<div id="copyright">© <tri:project prop="pubyear"> <tri:project prop="author"></div>  
</footer>  
</body>  
</html> 

上の例は、このページを作っているテンプレートのファイルです。ほぼHTMLファイルですが、ところどころに次のようなタグがあることが解ると思います。

<tri:page prop="title">  
<tri:project prop="site-name">  
<tri:page prop="title" name="<tri:page prop="up">"> 

これらのタグはプレースホルダになっていて、Tripitakaのtripitaka:make-html関数は、これらを対応する設定ファイルや.datファイルに書かれた値と置き換えます。

記事に関する情報

<tri:page prop="title">  
<tri:page prop="title" name="index"> 

tri:pageで始まるこれらのタグは、ページに関する情報を表す。prop属性で指定したキーワードに対応する値と置き換えられる。name属性を指定しない場合には、HTML化する記事の、name属性を指定するとdatディレクトリ内の該当記事のデータで置き換えられる。このタグは、

<tri:page prop="title" name="<tri:page prop="up">"> 

のように、入れ子にすることも出来る。上の例では、まず今HTML化しようとしている記事の:upの値を参照し、それを元にその値の指し示すファイルの:titleの値を参照して置き換える。

プロジェクトに関する情報

ウェブサイトの名前や、コンテキストルートのURLと言った情報を記事の情報それぞれに与えるのは変な話で、それらをまとめておくファイルがprojectであった。

<tri:project prop="site-name"> 

tri:projectから始まるタグはprojectファイルを読みに行く。記事の情報と同じ様にprop属性にキーワードを指定する。こちらにはname属性は無い。上の例には、これまでのページに出てこなかった

<tri:project prop="twit"> 

のようにtwit等のキーワードが存在する。現在(2017-05-04)は、このようにテンプレートに依存するキーワードの存在を許した状態であるがテンプレート作成の為のガイドライン作成を今後進めていく中で、この点は変更される可能性は高い。