テーマの作成(テンプレートの編集)

独自のデザインのウェブサイトを出力する場合は、自分でテーマを作る必要があります。
(sinonome では、テンプレートや必要ファイルを含めた一式を「テーマ」と呼びます)

テーマは \themes に格納されます。
\profiles\プロファイルディレクトリ\settings.txt でテーマのディレクトリ名を指定することで、自分の作ったテーマによるウェブサイトを出力できます。

主な構成は、ファイル3つと \resources ディレクトリです。

\themes
    \sample-blog
        \resources      画像・CSS・スクリプトなど
        indexes.html    インデックステンプレート
        archives.html   アーカイブテンプレート
        modules.html    モジュール

\resources ディレクトリには、テーマで使用する画像やCSS、スクリプトなどのファイルを入れてください。
sino.exe の実行時に、サイト出力ディレクトリのルートにコピーされます。

インデックステンプレート

インデックステンプレートは、ある1つのファイルを出力します。
例えば、以下のようなものです。

  • index.html(トップページ)
  • sitemap.xml(検索エンジン用)
  • robots.txt(同上)

以下のフォーマットで記述します。

TITLE: トップページ
OUTPUTPATH: index.html
----
<html>
    <head>
        <meta charset="utf-8">
        <title>トップページ</title>
    </head>
    <body>
        <h1>{blogname}</h1>

        <h2>お知らせ</h2>
        <ul>
        {entries file="information"}
            <li><a href="{entrylink}">{entrytitle}</a></li>
        {/entries}
        </ul>

        <h2>カテゴリ別記事一覧</h2>
        <ul>
        {archives archive_type="entryarchive"}
            <li><a href="{archivelink}">{archivetitle}</a></li>
        {/archives}
        </ul>

        <h2>タグ別記事一覧</h2>
        <ul>
        {archives archive_type="tagarchive"}
            <li><a href="{archivelink}">{archivetitle}</a></li>
        {/archives}
        </ul>

    </body>
</html>

<h3><ul>といったHTMLタグに混ざって、{ ~ }で囲まれた見慣れないタグがあります。
これらは sinonome のテンプレートタグです。

sinonome ではテンプレートタグを使用することによって、ブログ記事やウェブページ、その他の情報を出力ファイルに埋め込みます。
(書き方やタグの種類は後述します。)

記述ルールは、記事ファイルやウェブページファイルとは異なります。
----で区切った上にメタ情報、----で区切った下にコードを入力します。
複数書く場合は--------で区切ります。

インデックステンプレートのメタ情報

TITLE
このテンプレートの名前。

OUTPUTPATH
出力するファイル名。拡張子を含めたファイル名を入力します。

OUTPUTPATH は、記事やウェブページと異なり、拡張子まで入力します。
様々な拡張子のファイルを書き出せます。例えば、

  • サイトマップ sitemap.xml
  • 検索エンジン制御 robots.txt
  • アクセス制御 .htaccess
  • テンプレートタグの内容を埋め込んだスタイルシートやスクリプト

など。

アーカイブテンプレート

アーカイブテンプレートは、記事やウェブページを埋め込んだファイルを出力します。
ファイルは、指定する方法に従って出力されます。
具体的には、

  1. 個別の記事ページ
  2. ウェブページ
  3. 記事の一覧ページ(新しい記事順の一覧、一定の記事数ごとにページ分け)
  4. タグ別の記事の一覧ページ(タグAのついた記事一覧、タグBのついた記事一覧…)

などを出力するものです。

記事ファイルの分割について

sinonome では、記事ファイルやウェブページファイルは2つ以上作成することができます。

例えばサンプルでは \profiles\default\entryディレクトリにはentry.mdファイルが1つしか入っていませんが、このディレクトリにファイルをいくらでも追加できます。

追加するファイルのファイル名には、特に決まりはありません。
たとえば、2020年の記事は2020.mdに、2021年の記事は2021.mdに、……といったふうに、ファイルに分けて書くことができます。

\sources
    \entries
        2020.md
        2021.md
        2022.md
        ...

なお、ファイル名の先頭に-をつけると、そのファイルは無視されます。

アーカイブテンプレートのメタ情報

メタ情報の入力ルールは、インデックステンプレートと同じです。
----でメタ情報とコードを区切って入力、--------で区切って複数入力)

TITLE
テンプレートのタイトルを入力します。

TYPE
どのようなアーカイブを出力するかを指定します。

説明
entry ブログ記事のページを出力します。(上記の1.にあたります)
webpage ウェブページを出力します。(上記の2.にあたります)
entryarchive ブログ記事の一覧を出力します。(上記の3.にあたります)
tagarchive タグ別のブログ記事一覧を出力します。(上記の4.にあたります)

OUTPUTPATH
出力ファイル名、または出力ディレクトリパスを入力します。

  • TYPEwebpageまたはentryの場合は、出力ファイル名を入力します。
  • TYPEentryarchiveまたはtagarchiveの場合は、出力ディレクトリパスを入力します。
    (出力ディレクトリパスは、 \ で終わるように記述します)

なお、アーカイブテンプレートのOUTPUTPATHに限り、以下の特殊なタグを使って、出力ファイル名・出力パスを指定可能です。
これによって、アーカイブを出力するディレクトリをある程度柔軟に設定することが可能になります。

タグ名 概要
<groupbasename> ブログ記事ファイル・ウェブページファイルのメタ情報(後述します)に入力される OUTPUTPATH です。
<entrybasename> 各記事のメタ情報に入力された OUTPUTPATH です。
<entrydateyear> 各記事のメタ情報に入力された DATE の西暦部分です。
<entrydatemonth> 各記事のメタ情報に入力された DATE の月部分です。
<entrytag> 各記事につけられたタグのうち、最初のタグのタグIDです。
<webpagebasename> 各ウェブページのメタ情報に入力された OUTPUTPATH です。
<ext> 拡張子です。
現在は.htmlに置き換わるだけですが、今後任意に設定可能にする予定です。(例えば.php.shtmlなど)
記事ファイル・ウェブページファイルのメタ情報

記事及びウェブページのメタ情報の記述法はユーザーマニュアルで述べた通りですが、それらを記述する「記事ファイル」や「ウェブページファイル」にも、メタ情報を入力することができます。

記事ファイル・ウェブページファイルのメタ情報は、ファイルの一番最初に<!-- -->(HTMLのコメントアウト)で囲んで入力します。 (それより下に、記事データ・ウェブページデータが入ります)

<!--
TITLE: sinonome (2) 開発マニュアル
OUTPUTPATH: sinonome\02-develop
DEFINE: 置換前,置換後
-->

(以下、記事データ・ウェブページデータの繰り返し)

TITLE ※ウェブページファイルのみ
ファイルのタイトルです。テンプレートタグから呼び出されます。

OUTPUTPATH ※ウェブページファイルのみ
出力パスに使用される文字列です。半角英数字記号で入力します。

また厳密にはメタ情報とは言えませんが、以下の機能を利用できます。

DEFINE
ファイルのメタ情報より下の内容全体について、文字列の置換を行います。「置換前,置換後」で入力します。
複数ある場合は「置換前1,置換後1,置換前2,置換後2,…」と書くこともできます。
また1行で書けない場合は、2行以上書いても(2つ以上DEFINE:がある状態)かまいません。

活用例1)記事のメタ情報をMarkdownのプレビュー上でも見られるようにする

DEFINE: --><!--,<!-//hyphen//,-->-->,-//hyphen//>,//hyphen//,-

活用例2)絶対パスで記述したファイルパスを相対パス用のタグ{root}に置き換える

DEFINE: C:/foobar/sinonome/profile/default/,{root}
置換前: ![画像](C:/foobar/sinonome/files/image01.jpg)
置換前: ![画像]({root}files/image01.jpg)

REPLACE
sinonomeが本文(や続き)のMarkdownを変換した直後に、文字列の置換を行います。「置換前,置換後」で入力します。
記法はDEFINEと同じです。

活用例)使っているエディターで絵文字🙂が表示できないので、直感的に書いて、実体参照に変換する

REPLACE: (笑顔),&#x1f642;

DEFINE と REPLACE は、仕様上、置換前・置換後のテキストにカンマ「,」を含むことはできません。

モジュール

モジュールは、テンプレートコードをパーツ化したものです。
繰り返し使われるコードは、パーツにして呼び出すようにすれば、メンテナンスがしやすくなります。

モジュールを呼び出すには、{include}タグを使用します。以下のように。

{include module="モジュールのタイトル"}

モジュールのメタ情報

TITLE
モジュールのタイトルを入力します。includeタグのmodule属性の値になります。