362 lines
10 KiB
HTML
362 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="{{lang | default(value='en')}}">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>{{title}} - {{site_name | default(value="My Website")}}</title>
|
||
|
|
<meta name="description" content="{{description | default(value=content | excerpt(length=160))}}">
|
||
|
|
{% if author %}
|
||
|
|
<meta name="author" content="{{author}}">
|
||
|
|
{% endif %}
|
||
|
|
{% if keywords %}
|
||
|
|
<meta name="keywords" content="{{keywords | join(sep=', ')}}">
|
||
|
|
{% endif %}
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: #333;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 2rem 0;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.header h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.header .subtitle {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
opacity: 0.9;
|
||
|
|
font-weight: 300;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 20px;
|
||
|
|
}
|
||
|
|
.main-content {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 300px;
|
||
|
|
gap: 40px;
|
||
|
|
margin: 40px auto;
|
||
|
|
max-width: 1200px;
|
||
|
|
padding: 0 20px;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
background: white;
|
||
|
|
padding: 40px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||
|
|
min-height: 400px;
|
||
|
|
}
|
||
|
|
.content h2 {
|
||
|
|
color: #2c3e50;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-size: 1.8rem;
|
||
|
|
border-bottom: 2px solid #3498db;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
.content h3 {
|
||
|
|
color: #34495e;
|
||
|
|
margin: 30px 0 15px 0;
|
||
|
|
font-size: 1.4rem;
|
||
|
|
}
|
||
|
|
.content p {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
.content ul, .content ol {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding-left: 30px;
|
||
|
|
}
|
||
|
|
.content li {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
.content blockquote {
|
||
|
|
border-left: 4px solid #3498db;
|
||
|
|
padding-left: 20px;
|
||
|
|
margin: 20px 0;
|
||
|
|
font-style: italic;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
.content code {
|
||
|
|
background: #f8f9fa;
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: 3px;
|
||
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
.content pre {
|
||
|
|
background: #f8f9fa;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
overflow-x: auto;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.content pre code {
|
||
|
|
background: none;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.sidebar {
|
||
|
|
background: white;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||
|
|
height: fit-content;
|
||
|
|
position: sticky;
|
||
|
|
top: 20px;
|
||
|
|
}
|
||
|
|
.sidebar h3 {
|
||
|
|
color: #2c3e50;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-size: 1.3rem;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
.sidebar ul {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
.sidebar li {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.sidebar a {
|
||
|
|
color: #3498db;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.sidebar a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.meta-info {
|
||
|
|
background: #f8f9fa;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.meta-info strong {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.breadcrumbs {
|
||
|
|
background: #f8f9fa;
|
||
|
|
padding: 15px 0;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
.breadcrumbs a {
|
||
|
|
color: #3498db;
|
||
|
|
text-decoration: none;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.breadcrumbs a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.breadcrumbs span {
|
||
|
|
color: #666;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
background: #2c3e50;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
padding: 40px 0;
|
||
|
|
margin-top: 60px;
|
||
|
|
}
|
||
|
|
.footer p {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.footer a {
|
||
|
|
color: #3498db;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.footer a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.cta-section {
|
||
|
|
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 40px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 40px 0;
|
||
|
|
}
|
||
|
|
.cta-section h3 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.cta-section p {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
.cta-button {
|
||
|
|
display: inline-block;
|
||
|
|
background: white;
|
||
|
|
color: #3498db;
|
||
|
|
padding: 15px 30px;
|
||
|
|
border-radius: 5px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
.cta-button:hover {
|
||
|
|
background: #f8f9fa;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.main-content {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: 20px;
|
||
|
|
margin: 20px auto;
|
||
|
|
padding: 0 15px;
|
||
|
|
}
|
||
|
|
.content, .sidebar {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.header h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
.header .subtitle {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
{% if breadcrumbs %}
|
||
|
|
<div class="breadcrumbs">
|
||
|
|
<div class="container">
|
||
|
|
{% for crumb in breadcrumbs %}
|
||
|
|
{% if not loop.last %}
|
||
|
|
<a href="{{crumb.url}}">{{crumb.title}}</a>
|
||
|
|
<span>></span>
|
||
|
|
{% else %}
|
||
|
|
<span>{{crumb.title}}</span>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<header class="header">
|
||
|
|
<div class="container">
|
||
|
|
<h1>{{title}}</h1>
|
||
|
|
{% if subtitle %}
|
||
|
|
<p class="subtitle">{{subtitle}}</p>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
<main class="content">
|
||
|
|
{% if show_meta %}
|
||
|
|
<div class="meta-info">
|
||
|
|
{% if last_updated %}
|
||
|
|
<strong>Last Updated:</strong> {{last_updated | date_format(format="%B %d, %Y")}}
|
||
|
|
{% endif %}
|
||
|
|
{% if author %}
|
||
|
|
<br><strong>Author:</strong> {{author}}
|
||
|
|
{% endif %}
|
||
|
|
{% if reading_time %}
|
||
|
|
<br><strong>Reading Time:</strong> {{reading_time}} minutes
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if featured_image %}
|
||
|
|
<img src="{{featured_image}}" alt="{{title}}" style="width: 100%; height: auto; margin-bottom: 30px; border-radius: 5px;">
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{{content | markdown | safe}}
|
||
|
|
|
||
|
|
{% if cta_enabled %}
|
||
|
|
<div class="cta-section">
|
||
|
|
<h3>{{cta_title | default(value="Ready to Get Started?")}}</h3>
|
||
|
|
<p>{{cta_description | default(value="Take the next step and explore what we have to offer.")}}</p>
|
||
|
|
<a href="{{cta_url | default(value='/contact')}}" class="cta-button">{{cta_button_text | default(value="Get Started")}}</a>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<aside class="sidebar">
|
||
|
|
{% if toc_enabled and toc %}
|
||
|
|
<h3>Table of Contents</h3>
|
||
|
|
<ul>
|
||
|
|
{% for item in toc %}
|
||
|
|
<li><a href="#{{item.anchor}}">{{item.title}}</a></li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if sidebar_links %}
|
||
|
|
<h3>{{sidebar_title | default(value="Quick Links")}}</h3>
|
||
|
|
<ul>
|
||
|
|
{% for link in sidebar_links %}
|
||
|
|
<li><a href="{{link.url}}">{{link.title}}</a></li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if contact_info %}
|
||
|
|
<h3>Contact Information</h3>
|
||
|
|
<div class="meta-info">
|
||
|
|
{% if contact_info.email %}
|
||
|
|
<strong>Email:</strong> <a href="mailto:{{contact_info.email}}">{{contact_info.email}}</a><br>
|
||
|
|
{% endif %}
|
||
|
|
{% if contact_info.phone %}
|
||
|
|
<strong>Phone:</strong> {{contact_info.phone}}<br>
|
||
|
|
{% endif %}
|
||
|
|
{% if contact_info.address %}
|
||
|
|
<strong>Address:</strong> {{contact_info.address}}
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if related_pages %}
|
||
|
|
<h3>Related Pages</h3>
|
||
|
|
<ul>
|
||
|
|
{% for page in related_pages %}
|
||
|
|
<li><a href="{{page.url}}">{{page.title}}</a></li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
{% endif %}
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
<div class="container">
|
||
|
|
<p>© {{current_year | default(value="2024")}} {{site_name | default(value="My Website")}}. All rights reserved.</p>
|
||
|
|
{% if footer_links %}
|
||
|
|
<p>
|
||
|
|
{% for link in footer_links %}
|
||
|
|
<a href="{{link.url}}">{{link.title}}</a>
|
||
|
|
{% if not loop.last %} | {% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
</p>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
{% if analytics_id %}
|
||
|
|
<script>
|
||
|
|
// Add analytics tracking here if needed
|
||
|
|
console.log('Analytics ID: {{analytics_id}}');
|
||
|
|
</script>
|
||
|
|
{% endif %}
|
||
|
|
</body>
|
||
|
|
</html>
|