nudoragon/vvveb-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header and footer（待續）

Browse Source
This commit is contained in:
nudoragon
2026-05-26 12:33:48 +08:00
parent ee5a54ea2c
commit 6cb46fe772
8 changed files with 278 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
__pycache__/main.cpython-313.pyc
View File

Binary file not shown.

4
main.py
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)), "show_in_nav": bool(item.get("show_in_nav", True)),
"is_homepage": bool(item.get("is_homepage", False)), "is_homepage": bool(item.get("is_homepage", False)),
"requires_password": bool(item.get("requires_password", 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": elif item_type == "folder":
name = item.get("name") 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, "show_in_nav": True,
"is_homepage": rel == "index.html", "is_homepage": rel == "index.html",
"requires_password": False, "requires_password": False,
"has_header": True,
"has_footer": False,
}) })
return normalized return normalized

23
static/Vvvebjs/new-page-blank-template.html
View File

@@ -20,14 +20,31 @@
</style> </style>
</head> </head>
<body> <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 --> <!-- Page Content -->
<div class="container"> <main class="container py-5">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<h1 class="mt-5">Bootstrap 5 start page</h1> <h2>Bootstrap 5 start page</h2>
<p class="lead">Start by dragging components to page or double click to edit text</p> <p class="lead">Start by dragging components to page or double click to edit text</p>
</div> </div>
</div> </div>
</div> </main>
<footer class="page-footer bg-light py-3">
<div class="container text-center">
<small>Editable footer content</small>
</div>
</footer>
</body> </body>
</html> </html>

28
templates/project_dashboard.html
View File

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

50
websites/my-website/headerandfooter.html Normal file
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>

50
websites/my-website/headerandfooter2.html Normal file
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>

114
websites/my-website/project.json
View File

@@ -8,42 +8,82 @@
{ {
"name": "fold.html", "name": "fold.html",
"title": "Fold", "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", "name": "about-final.html",
"title": "About Final", "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", "name": "index.html",
"title": "Index", "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", "name": "my-page.html",
"title": "My Page", "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", "name": "my-page3.html",
"title": "My Page3", "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", "name": "my-page4.html",
"title": "My Page4", "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", "name": "subfolder",
"title": "Subfolder", "title": "Subfolder",
"type": "folder", "type": "folder",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false,
"children": [ "children": [
{ {
"name": "subfolder/subpage-title.html", "name": "subfolder/subpage-title.html",
"title": "Subpage Title", "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", "name": "temp",
"title": "Temp", "title": "Temp",
"type": "folder", "type": "folder",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false,
"children": [ "children": [
{ {
"name": "temp/my-page5.html", "name": "temp/my-page5.html",
"title": "My Page5", "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", "name": "temp/new.html",
"title": "New", "title": "New",
"type": "file" "type": "file",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false
}, },
{ {
"name": "subsubfolder", "name": "subsubfolder",
"title": "Subsubfolder", "title": "Subsubfolder",
"type": "folder", "type": "folder",
"show_in_nav": true,
"is_homepage": false,
"requires_password": false,
"has_header": true,
"has_footer": false,
"children": [ "children": [
{ {
"name": "temp/subsubfolder/myname.html", "name": "temp/subsubfolder/myname.html",
"title": "Myname", "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", "name": "test.html",
"title": "Test", "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"
} }

32
websites/my-website/test.html
View File

@@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" =""><head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
@@ -18,16 +17,33 @@
height:100%; height:100%;
} }
</style> </style>
</head> <style id="vvvebjs-styles"></style></head>
<body> <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 --> <!-- Page Content -->
<div class="container"> <main class="container py-5">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<h1 class="mt-5">Bootstrap 5 start page</h1> <h2>Bootstrap 5 start page</h2>
<p class="lead">Start by dragging components to page or double click to edit text</p> <p class="lead">Start by dragging components to page or double click to edit text</p>
</div> </div>
</div> </div>
</div> </main>
</body>
</html> <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>