feat(gitea): 新增 HTML 匯出與範本風格設定
What:新增 html-export 與 html-style 兩支技能、tools/html-render.sh 與 tools/html-style.sh 兩支工具,以及六種版型乘五種風格的 HTML 範本。 Why:wiki 頁與議題要拿給 Gitea 以外的人看時,只能複製 markdown;不同類型的文件也該有各自的版面,不是每份都長一樣。 How:版型(report、slide、dashboard、spec、timeline、onepager)決定內容怎麼排,風格(minimal、corporate、dark、print、vivid)決定看起來長怎樣,兩者自由搭配。哪一種頁面套哪一組由設定決定:專案的 .jsc/html-styles 優先,其次 $JSC_HOME/html-styles.conf,對不到退 DEFAULT,再對不到才用內建的 report/minimal。產出是單一 HTML 檔,CSS 與腳本全部內嵌。 Who:需要把 wiki 頁或議題寄給客戶、主管或跨團隊同事的人。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
<!-- 規格書:表格與程式碼區塊放大,表頭固定,適合 API 文件與交付規格 -->
|
||||
<!doctype html>
|
||||
<html lang="zh-Hant" data-layout="{{LAYOUT}}" data-style="{{STYLE_NAME}}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{TITLE}}</title>
|
||||
<style>{{BASE}}</style>
|
||||
<style>{{STYLE}}</style>
|
||||
<style>
|
||||
.shell { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
|
||||
.body-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; }
|
||||
.toc { position: sticky; top: 1.5rem; align-self: start; padding: 1.25rem 0; font-size: .88rem; }
|
||||
.toc h2 { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
|
||||
.toc ul { list-style: none; margin: 0; padding: 0; }
|
||||
.toc a { color: var(--fg); text-decoration: none; display: block; padding: .15rem .4rem; }
|
||||
.toc a:hover { color: var(--accent); }
|
||||
.toc .toc-h3 a { padding-left: 1.1rem; color: var(--muted); }
|
||||
.jsc-section { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
|
||||
.jsc-section:last-child { border-bottom: 0; }
|
||||
.content .table-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
|
||||
.content .table-wrap table { border: 0; }
|
||||
.content .table-wrap th { position: sticky; top: 0; z-index: 1; }
|
||||
.content code { font-size: .92em; }
|
||||
.content pre { font-size: .95rem; line-height: 1.6; }
|
||||
/* 欄位表第一欄是欄位名,等寬字比較好對 */
|
||||
.content td:first-child code { white-space: nowrap; }
|
||||
@media (max-width: 860px) { .body-grid { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
|
||||
@media print { .toc { display: none; } .body-grid { display: block; } .content .table-wrap { max-height: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<header class="page-head">
|
||||
<h1>{{TITLE}}</h1>
|
||||
<p class="subtitle">{{SUBTITLE}}</p>
|
||||
<p class="meta">{{SOURCE}}<span class="generated">產生時間:{{GENERATED}}</span></p>
|
||||
</header>
|
||||
<div class="body-grid">
|
||||
<nav class="toc" id="toc"><h2>章節</h2></nav>
|
||||
<main class="content" id="content">{{CONTENT}}</main>
|
||||
</div>
|
||||
<footer class="page-foot">
|
||||
<span class="badge">{{LAYOUT}}/{{STYLE_NAME}}</span>
|
||||
<span>本頁由 jsc-gitea:html-export 產生</span>
|
||||
</footer>
|
||||
</div>
|
||||
<script>{{BASE_JS}}</script>
|
||||
<script>
|
||||
(function () {
|
||||
var content = document.getElementById('content');
|
||||
jsc.wrapTables(content);
|
||||
jsc.buildToc(content, document.getElementById('toc'));
|
||||
jsc.splitBySection(content);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user