Dev::Coder 在電梯裡遇見雙胞胎
首頁 | 關於我 | 筆記 // 當你開始尋找,你就已經在前往的路上...

AsciiDoc 內附一個用 AsciiDoc 產生網站的範例,位在 $ASCIIDOC_HOME/examples/website

build-website.sh 可以用來產生網站(*.html),它的內容不長:

$ASCIIDOC_HOME/examples/website/build-website.sh
#!/bin/sh

VERS="8.1.0"
DATE="2006-10-22"

# Leave the desired layout uncommented.
#LAYOUT=layout1      # Tables based layout.
LAYOUT=layout2     # CSS based layout.

ASCIIDOC_HTML="python ../../asciidoc.py --backend=xhtml11 --conf-file=${LAYOUT}.conf --attribute icons --attribute iconsdir=./images/icons --attribute=badges --attribute=revision=$VERS  --attribute=date=$DATE" 1

$ASCIIDOC_HTML -a index-only index.txt
$ASCIIDOC_HTML -a toc -a numbered userguide.txt
$ASCIIDOC_HTML -d manpage manpage.txt
$ASCIIDOC_HTML downloads.txt
$ASCIIDOC_HTML latex-backend.txt
$ASCIIDOC_HTML README.txt
$ASCIIDOC_HTML INSTALL.txt
$ASCIIDOC_HTML CHANGELOG.txt
$ASCIIDOC_HTML README-website.txt
$ASCIIDOC_HTML support.txt
$ASCIIDOC_HTML source-highlight-filter.txt
$ASCIIDOC_HTML music-filter.txt
$ASCIIDOC_HTML a2x.1.txt
$ASCIIDOC_HTML asciimath.txt
1layout2.conf 覆寫 $ASCIIDOC_HOME/xhtml11.conf 的設定。

可以說 layout2.conf 就是 HTML 樣板;[header][footer] 重新定義頭尾的部份,中間的部份則由 AsciiDoc 的產出來填滿。

$ASCIIDOC_HOME/examples/website/layout2.conf
#
# AsciiDoc website.
# Three division CSS based layout (layout2).
#
# Simulated frames using CSS (fixed banner and menu, scrolling content).
# NOTE: This layout does not work with IE6.
#
# +-----------------------------------------------------+
# |          #layout-banner                             |
# +--------------+--------------------------------------+
# |              |                                      |
# |              |                                      |
# | #layout-menu |          #layout-content             |
# |              |                                      |
# |              |                                      |
# |              |                                      |
# +--------------+--------------------------------------+
#
# Each of the three divisions is enclosed in a same-named *-box division
# which position and size the layout.
#
# - The #layout-content division is a container for AsciiDoc page documents.
# - Documents rendered in the #layout-content use the standard AsciiDoc
#   xhtml11 backend stylesheets.

[specialwords]
monospacedwords=(?u)\\?\basciidoc\(1\) (?u)\\?\ba2x\(1\)

[header]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={encoding}" />
<meta name="generator" content="AsciiDoc {asciidoc-version}" />
<meta name="description" content="{description}" />
<meta name="keywords" content="{keywords}" />
<title>{title}</title>
{title%}<title>{doctitle=}</title>
<link rel="stylesheet" href="{stylesdir=.}/{theme=asciidoc}.css" type="text/css" />
{doctype-manpage}<link rel="stylesheet" href="{stylesdir=.}/{theme=asciidoc}-manpage.css" type="text/css" />
<link rel="stylesheet" href="{stylesdir=.}/layout2.css" type="text/css" />
<script type="text/javascript" src="{scriptsdir=.}/asciidoc.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
asciidoc.install({toc?{toclevels}});
/*]]>*/
</script>
</head>
<body{max-width? style="max-width:{max-width}"}>
<div id="layout-menu-box">
<div id="layout-menu">
  <div>&#187;<a href="index.html">Home</a></div>
  <div>&#187;<a href="userguide.html">User&nbsp;Guide</a></div>
  <div>&#187;<a href="INSTALL.html">Installation</a></div>
  <div>&#187;<a href="faq.html">FAQ</a></div>
  <div>&#187;<a href="manpage.html">asciidoc(1)</a></div>
  <div>&#187;<a href="a2x.1.html">a2x(1)</a></div>
  <div>&#187;<a href="asciidocapi.html">API</a></div>
  <div>&#187;<a href="plugins.html">Plugins</a></div>
  <div>&#187;<a href="http://powerman.name/doc/asciidoc">Cheatsheet</a></div>
  <div>&#187;<a href="testasciidoc.html">Tests</a></div>
  <div>&#187;<a href="CHANGELOG.html">ChangeLog</a></div>
  <div>&#187;<a href="support.html">Support</a></div>
  <div id="page-source">&#187;<a href="{eval:os.path.basename(r'{infile}')}">Page&nbsp;Source</a></div>
</div>
</div>
<div id="layout-content-box">
<div id="layout-banner">
  <div id="layout-title">AsciiDoc</div>
  <div id="layout-description">Text based document generation</div>
</div>
<div id="layout-content">
# Article, book header.
<div id="header">
<h1>{doctitle}</h1>
<span id="author">{author}</span><br />
<span id="email"><code>&lt;<a href="mailto:{email}">{email}</a>&gt;</code></span><br />
{authored}<span id="revision">version {revnumber}{revdate?,}</span>
{authored}{revdate}
</div>
# Man page header.
<div id="content">

[footer]
</div>
{disable-javascript%<div id="footnotes"><hr /></div>}
<div id="footer">
<div id="footer-text">
Version {revnumber}<br />
Last updated {localdate} {localtime}
</div>
</div>
</div>
</div>
</body>
</html>

只要 CSS 稍加調整, 應該可以像 CSS Zen Garden 變化出很不一樣的東西…

參考資料

工具
  • AsciiDoc Website - AsciiDoc 內建 /examples/website 的範例,可以直接用現成的 AsciiDoc 文件產生網站

  • AsciiDoc Website Builder (AWB) - 還算滿活躍的,2012-04-04 才剛釋出 0.3.3 版。可以做靜態網站、圖片展示、Blog 等。

  • AsciiDocGen - 產生的網站質感還不錯

  • ADGen

覺得這份文件有幫助?別忘了按個讚並分享給更多的人、留下你/您的意見...

comments powered by Disqus