header and footer(待續)

This commit is contained in:
2026-05-26 12:33:48 +08:00
parent ee5a54ea2c
commit 6cb46fe772
8 changed files with 278 additions and 23 deletions

Binary file not shown.

View File

@@ -167,6 +167,8 @@ def _normalize_page_tree(slug: str, tree: dict[str, Any]) -> dict[str, Any]:
"show_in_nav": bool(item.get("show_in_nav", True)),
"is_homepage": bool(item.get("is_homepage", False)),
"requires_password": bool(item.get("requires_password", False)),
"has_header": item.get("has_header") is not False,
"has_footer": bool(item.get("has_footer", False)),
})
elif item_type == "folder":
name = item.get("name")
@@ -194,6 +196,8 @@ def _normalize_page_tree(slug: str, tree: dict[str, Any]) -> dict[str, Any]:
"show_in_nav": True,
"is_homepage": rel == "index.html",
"requires_password": False,
"has_header": True,
"has_footer": False,
})
return normalized

View File

@@ -20,14 +20,31 @@
</style>
</head>
<body>
<!-- Page Content -->
<header class="page-header bg-light py-3">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Bootstrap 5 start page</h1>
<h1 class="mt-3">Page Header</h1>
<p class="mb-0">This header is editable in the editor.</p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<main class="container py-5">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Bootstrap 5 start page</h2>
<p class="lead">Start by dragging components to page or double click to edit text</p>
</div>
</div>
</main>
<footer class="page-footer bg-light py-3">
<div class="container text-center">
<small>Editable footer content</small>
</div>
</footer>
</body>
</html>

View File

@@ -368,6 +368,8 @@
li.dataset.showInNav = item.show_in_nav !== false ? 'true' : 'false';
li.dataset.isHomepage = item.is_homepage ? 'true' : 'false';
li.dataset.requiresPassword = item.requires_password ? 'true' : 'false';
li.dataset.hasHeader = item.has_header !== false ? 'true' : 'false';
li.dataset.hasFooter = item.has_footer === true ? 'true' : 'false';
const titleWrap = document.createElement('span');
titleWrap.className = 'tree-title';
@@ -382,26 +384,40 @@
meta.innerHTML = `
<button class='btn btn-ghost btn-sm btn-nav' title='顯示於導覽列'>☰</button>
<button class='btn btn-ghost btn-sm btn-homepage' title='設為首頁'>⭐</button>
<button class='btn btn-ghost btn-sm btn-header' title='頁首'>🧾</button>
<button class='btn btn-ghost btn-sm btn-footer' title='頁尾'>☷</button>
<button class='btn btn-ghost btn-sm btn-password' title='需要密碼'>🔒</button>
`;
const btnNav = meta.querySelector('.btn-nav');
const btnHome = meta.querySelector('.btn-homepage');
const btnHeader = meta.querySelector('.btn-header');
const btnFooter = meta.querySelector('.btn-footer');
const btnPassword = meta.querySelector('.btn-password');
const updateMetaState = () => {
const showNav = li.dataset.showInNav === 'true';
const isHomepage = li.dataset.isHomepage === 'true';
const requiresPassword = li.dataset.requiresPassword === 'true';
const hasHeader = li.dataset.hasHeader === 'true';
const hasFooter = li.dataset.hasFooter === 'true';
btnNav.classList.toggle('active', showNav);
btnNav.title = showNav ? '顯示於導覽列' : '從導覽列隱藏';
btnHome.classList.toggle('active', isHomepage);
btnHome.title = isHomepage ? '首頁' : '設為首頁';
btnHeader.classList.toggle('active', hasHeader);
btnHeader.title = hasHeader ? '包含頁首' : '不包含頁首';
btnFooter.classList.toggle('active', hasFooter);
btnFooter.title = hasFooter ? '包含頁尾' : '不包含頁尾';
btnPassword.classList.toggle('active', requiresPassword);
btnPassword.title = requiresPassword ? '需要密碼' : '不需要密碼';
if (li.dataset.type !== 'file') {
btnHome.disabled = true;
btnHeader.disabled = true;
btnFooter.disabled = true;
btnHome.title = '僅限單一頁面';
btnHeader.title = '僅限單一頁面';
btnFooter.title = '僅限單一頁面';
}
};
@@ -415,6 +431,16 @@
li.dataset.requiresPassword = li.dataset.requiresPassword === 'true' ? 'false' : 'true';
updateMetaState();
});
btnHeader.addEventListener('click', () => {
if (li.dataset.type !== 'file') return;
li.dataset.hasHeader = li.dataset.hasHeader === 'true' ? 'false' : 'true';
updateMetaState();
});
btnFooter.addEventListener('click', () => {
if (li.dataset.type !== 'file') return;
li.dataset.hasFooter = li.dataset.hasFooter === 'true' ? 'false' : 'true';
updateMetaState();
});
btnHome.addEventListener('click', () => {
if (li.dataset.type !== 'file') return;
container.querySelectorAll('.tree-item').forEach(other => {
@@ -500,6 +526,8 @@
show_in_nav: li.dataset.showInNav === 'true',
is_homepage: li.dataset.isHomepage === 'true',
requires_password: li.dataset.requiresPassword === 'true',
has_header: li.dataset.hasHeader === 'true',
has_footer: li.dataset.hasFooter === 'true',
};
const childUl = li.querySelector(':scope > ul');
if (childUl) obj.children = walk(childUl);

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>My page</title>
<!-- Bootstrap core CSS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
html, body
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<header class="page-header bg-light py-3">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-3">Page Header</h1>
<p class="mb-0">This header is editable in the editor.</p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<main class="container py-5">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Bootstrap 5 start page</h2>
<p class="lead">Start by dragging components to page or double click to edit text</p>
</div>
</div>
</main>
<footer class="page-footer bg-light py-3">
<div class="container text-center">
<small>Editable footer content</small>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>My page</title>
<!-- Bootstrap core CSS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
html, body
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<header class="page-header bg-light py-3">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-3">Page Header</h1>
<p class="mb-0">This header is editable in the editor.</p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<main class="container py-5">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Bootstrap 5 start page</h2>
<p class="lead">Start by dragging components to page or double click to edit text</p>
</div>
</div>
</main>
<footer class="page-footer bg-light py-3">
<div class="container text-center">
<small>Editable footer content</small>
</div>
</footer>
</body>
</html>

View File

@@ -8,42 +8,82 @@
{
"name": "fold.html",
"title": "Fold",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "about-final.html",
"title": "About Final",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "index.html",
"title": "Index",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "my-page.html",
"title": "My Page",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "my-page3.html",
"title": "My Page3",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "my-page4.html",
"title": "My Page4",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "subfolder",
"title": "Subfolder",
"type": "folder",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false,
"children": [
{
"name": "subfolder/subpage-title.html",
"title": "Subpage Title",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
}
]
},
@@ -51,26 +91,51 @@
"name": "temp",
"title": "Temp",
"type": "folder",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false,
"children": [
{
"name": "temp/my-page5.html",
"title": "My Page5",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "temp/new.html",
"title": "New",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "subsubfolder",
"title": "Subsubfolder",
"type": "folder",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false,
"children": [
{
"name": "temp/subsubfolder/myname.html",
"title": "Myname",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
}
]
}
@@ -79,9 +144,34 @@
{
"name": "test.html",
"title": "Test",
"type": "file"
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "headerandfooter.html",
"title": "Headerandfooter",
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
},
{
"name": "headerandfooter2.html",
"title": "Headerandfooter2",
"type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
}
]
},
"updated_at": "2026-05-26T04:12:23"
"updated_at": "2026-05-26T04:30:22"
}

View File

@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<html lang="en" =""><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
@@ -18,16 +17,33 @@
height:100%;
}
</style>
</head>
<style id="vvvebjs-styles"></style></head>
<body>
<!-- Page Content -->
<header class="page-header bg-light py-3">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Bootstrap 5 start page</h1>
<h1 class="mt-3">Page Header</h1>
<p class="mb-0">This header is editable in the editor.</p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<main class="container py-5">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Bootstrap 5 start page</h2>
<p class="lead">Start by dragging components to page or double click to edit text</p>
</div>
</div>
</main>
<footer class="page-footer bg-light py-3">
<div class="container text-center" aria-readonly="false"><p><small>Editable footer content</small></p>
</div>
</body>
</html>
</footer>
</body></html>