Fix guide template variable replacement and enhance documentation
- Fix template variable replacement in guide pages by removing {{}} brackets
- Escape code blocks in guide markdown to prevent template processing
- Completely rewrite guide documentation with comprehensive CMS features
- Add bilingual guide support (English/Dutch) with detailed examples
- Enhance CodePressCMS core with improved guide page handling
- Update template system with better layout and footer components
- Improve language files with additional translations
- Update configuration with enhanced theme and language settings
Resolves issue where guide pages were showing replaced template variables
instead of displaying them as documentation examples.
This commit is contained in:
@@ -34,6 +34,8 @@
|
||||
--header-font: {{header_font_color}};
|
||||
--nav-bg: {{navigation_color}};
|
||||
--nav-font: {{navigation_font_color}};
|
||||
--sidebar-bg: {{sidebar_background}};
|
||||
--sidebar-border: {{sidebar_border}};
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
@@ -151,14 +153,112 @@
|
||||
background-color: rgba(255,255,255,0.2) !important;
|
||||
border-bottom: 2px solid var(--nav-font) !important;
|
||||
}
|
||||
|
||||
/* Sidebar styling */
|
||||
.sidebar-column {
|
||||
background-color: var(--sidebar-bg) !important;
|
||||
border-right: 1px solid var(--sidebar-border) !important;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 1.5rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 2rem;
|
||||
padding-bottom: 80px !important;
|
||||
}
|
||||
|
||||
/* Ensure full height layout */
|
||||
.main-content {
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar-column {
|
||||
border-right: none !important;
|
||||
border-top: 1px solid var(--sidebar-border) !important;
|
||||
min-height: auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
min-height: auto;
|
||||
padding-bottom: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet and mobile: sidebar below content */
|
||||
@media (max-width: 991.98px) {
|
||||
.sidebar-column {
|
||||
order: 2 !important;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
order: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer icon hover effects */
|
||||
.footer-icon {
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.footer-icon:hover {
|
||||
color: #0d6efd;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.footer-icon:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Specific icon hover colors */
|
||||
.footer-icon.guide:hover {
|
||||
color: #198754;
|
||||
}
|
||||
|
||||
.footer-icon.cms:hover {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.footer-icon.git:hover {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.footer-icon.website:hover {
|
||||
color: #fd7e14;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{>header}}
|
||||
<header id="site-header">
|
||||
{{>header}}
|
||||
</header>
|
||||
|
||||
{{>navigation}}
|
||||
<nav id="site-navigation">
|
||||
{{>navigation}}
|
||||
</nav>
|
||||
|
||||
<div class="breadcrumb-section bg-light border-bottom">
|
||||
<div id="site-breadcrumb" class="breadcrumb-section bg-light border-bottom">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 py-2">
|
||||
@@ -168,17 +268,87 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid main-content" style="padding-bottom: 80px;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<main class="col-12">
|
||||
{{>content_template}}
|
||||
</main>
|
||||
<main id="site-main" class="main-content" style="padding: 0;">
|
||||
{{#sidebar_content}}
|
||||
{{#equal layout "sidebar-content"}}
|
||||
<div class="row g-0">
|
||||
<aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2 order-md-1">
|
||||
<div class="sidebar h-100">
|
||||
{{{sidebar_content}}}
|
||||
</div>
|
||||
</aside>
|
||||
<section id="site-content" class="col-lg-9 col-md-8 content-column order-1 order-md-2">
|
||||
<div class="content-wrapper p-4">
|
||||
{{>content_template}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{/equal}}
|
||||
|
||||
{{#equal layout "content"}}
|
||||
<div class="container">
|
||||
<section id="site-content" class="col-12">
|
||||
<div class="content-wrapper p-4">
|
||||
{{>content_template}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{/equal}}
|
||||
|
||||
{{#equal layout "sidebar"}}
|
||||
<div class="container-fluid">
|
||||
<aside id="site-sidebar" class="col-12 sidebar-column">
|
||||
<div class="sidebar">
|
||||
{{{sidebar_content}}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{{/equal}}
|
||||
|
||||
{{#equal layout "content-sidebar"}}
|
||||
<div class="row g-0">
|
||||
<section id="site-content" class="col-lg-9 col-md-8 content-column order-1">
|
||||
<div class="content-wrapper p-4">
|
||||
{{>content_template}}
|
||||
</div>
|
||||
</section>
|
||||
<aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2">
|
||||
<div class="sidebar h-100">
|
||||
{{{sidebar_content}}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{{/equal}}
|
||||
|
||||
{{#equal layout "content-sidebar-reverse"}}
|
||||
<div class="row g-0 flex-row-reverse">
|
||||
<section id="site-content" class="col-lg-9 col-md-8 content-column">
|
||||
<div class="content-wrapper p-4">
|
||||
{{>content_template}}
|
||||
</div>
|
||||
</section>
|
||||
<aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column">
|
||||
<div class="sidebar h-100">
|
||||
{{{sidebar_content}}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{{/equal}}
|
||||
{{/sidebar_content}}
|
||||
{{^sidebar_content}}
|
||||
<div class="container">
|
||||
<section id="site-content" class="col-12">
|
||||
<div class="content-wrapper p-4">
|
||||
{{>content_template}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{{/sidebar_content}}
|
||||
</main>
|
||||
|
||||
{{>footer}}
|
||||
<footer id="site-footer">
|
||||
{{>footer}}
|
||||
</footer>
|
||||
|
||||
<script src="/assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="/assets/js/app.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user