header and footer(待續)
This commit is contained in:
Binary file not shown.
4
main.py
4
main.py
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
50
websites/my-website/headerandfooter.html
Normal file
50
websites/my-website/headerandfooter.html
Normal 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>
|
||||
50
websites/my-website/headerandfooter2.html
Normal file
50
websites/my-website/headerandfooter2.html
Normal 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>
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</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>
|
||||
</footer>
|
||||
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user