2.3 KiB
2.3 KiB
阅读
intro
只展示正文。抬头、文字选项需要时贴在正文前后。本局没有的区从骨架删除。
layout
id: reading
主区: 正文
可加窄带: 抬头、文字选项
摆放:
抬头: 正文之前的一行短内容
正文: 阅读柱,占主要宽度
文字选项: 正文之后,始终直接可见,不放进标签或折叠。不显示「文字选项」这个区名
未启用的区不留空位。
note
不替换:单栏阅读柱。抬头在正文前,独占一行。选项在正文后,直接可见。
可替换:抬头文字、正文文字、配色和字体。本局没有抬头时删掉抬头。
sample
html:
<div id="app">
<p id="heading"></p>
<article id="body"></article>
<ol id="options"></ol>
</div>
css:
:root { color: #1c1915; background: #f7f3ea; }
#app { max-width: 38rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; font: 17px/1.75 "Palatino Linotype", "Songti SC", serif; }
#heading { margin: 0 0 0.85rem; font-size: 0.95rem; letter-spacing: 0.04em; }
#body { font-size: 1.05rem; }
#options { margin: 1.25rem 0 0; padding-left: 1.2rem; }
js:
present.onData(function (data) {
var blocks = (data && data.blocks) || {};
putHeading("heading", blocks.heading);
putText("body", blocks.body);
putList("options", blocks.options);
});
function putHeading(id, value) {
var el = document.getElementById(id);
if (!el) return;
el.replaceChildren();
if (value == null || value === "") { el.remove(); return; }
if (typeof value === "string") { el.textContent = value; return; }
Object.keys(value).forEach(function (key) {
var item = document.createElement("span");
item.textContent = key + " " + String(value[key]);
item.style.marginRight = "1rem";
el.appendChild(item);
});
}
function putText(id, value) {
var el = document.getElementById(id);
if (!el) return;
if (value == null || value === "") { el.remove(); return; }
el.textContent = String(value);
}
function putList(id, value) {
var el = document.getElementById(id);
if (!el) return;
el.replaceChildren();
if (!Array.isArray(value) || !value.length) { el.remove(); return; }
value.forEach(function (line) {
var li = document.createElement("li");
li.textContent = String(line);
el.appendChild(li);
});
}