mirror of
https://gh.wpcy.net/https://github.com/mainwp/mainwp.dev.git
synced 2026-07-16 03:21:21 +08:00
0cad3cbf9c
- Mermaid scripts were missing from documentation-single.html layout - All guide pages with diagrams use documentation-single layout, not default layout - Fixed JavaScript syntax errors in documentation-single.html - Added exact Mermaid implementation to the correct template - This should now correctly render diagrams in all guide pages
197 lines
10 KiB
HTML
197 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ site.dox.language }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.dox.title }}{% endif %}</title>
|
|
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.dox.description }}{% endif %}">
|
|
|
|
<link rel="canonical" href="{{ page.url | replace: 'index.html', '' | absolute_url }}">
|
|
<link rel="shortcut icon" href="{{ '/favicon.ico' | absolute_url }}" type="image/x-icon">
|
|
|
|
<!-- Theme styles -->
|
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
{% include header.html %}
|
|
|
|
<div class="o-container">
|
|
<div class="o-row">
|
|
<div class="o-col-3@md">
|
|
<div class="c-page-nav">
|
|
<div class="c-page-nav__header">
|
|
<h2 class="c-page-nav__title">{{ page.navigation_title | default: page.title }}</h2>
|
|
</div>
|
|
<div class="c-page-nav__content">
|
|
{% if page.navigation %}
|
|
{% for item in page.navigation %}
|
|
<div class="c-page-nav__section" data-section="{{ item.title | slugify }}">
|
|
<h3 class="c-page-nav__heading js-toggle-nav">
|
|
<span class="c-page-nav__toggle-icon"></span>
|
|
{{ item.title }}
|
|
</h3>
|
|
{% if item.items %}
|
|
<ul class="c-page-nav__list">
|
|
{% for subitem in item.items %}
|
|
<li class="c-page-nav__item">
|
|
<a href="#{{ subitem.id }}" class="c-page-nav__link">{{ subitem.title }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="o-col-9@md">
|
|
<div class="c-post">
|
|
<div class="c-post__header">
|
|
<h1 class="c-post__title">{{ page.title }}</h1>
|
|
{% if page.description %}
|
|
<div class="c-post__desc">
|
|
{{ page.description }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="c-post__content">
|
|
{% assign content_with_hidden_h1 = content | replace_first: '<h1', '<div class="content-title" style="display: none;"' | replace_first: '</h1>', '</div>' %}
|
|
{{ content_with_hidden_h1 }}
|
|
</div>
|
|
{% if page.previous or page.next %}
|
|
<div class="c-post__footer">
|
|
<div class="o-row">
|
|
{% if page.previous %}
|
|
<div class="o-col-6@md">
|
|
<a href="{{ page.previous.url | absolute_url }}" class="c-arrow-link c-arrow-link--left">
|
|
<span class="c-arrow-link__text">Previous</span>
|
|
<span class="c-arrow-link__title">{{ page.previous.title }}</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% if page.next %}
|
|
<div class="o-col-6@md">
|
|
<a href="{{ page.next.url | absolute_url }}" class="c-arrow-link c-arrow-link--right">
|
|
<span class="c-arrow-link__text">Next</span>
|
|
<span class="c-arrow-link__title">{{ page.next.title }}</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include footer.html %}
|
|
|
|
<!-- Theme scripts -->
|
|
<script src="{{ site.baseurl }}/dox-theme/assets/js/vendor/jquery.min.js" defer></script>
|
|
<!-- Highlight.js -->
|
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
|
|
<!-- Theme functionality -->
|
|
<script src="{{ site.baseurl }}/dox-theme/assets/js/theme-toggle.js" defer></script>
|
|
<script src="{{ site.baseurl }}/dox-theme/assets/js/scripts.js" defer></script>
|
|
<script src="{{ site.baseurl }}/dox-theme/assets/js/page-nav.js" defer></script>
|
|
<script src="{{ site.baseurl }}/dox-theme/assets/js/navigation.js" defer></script>
|
|
<!-- Code block functionality -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Highlight.js
|
|
hljs.configure({
|
|
ignoreUnescapedHTML: true
|
|
});
|
|
hljs.highlightAll();
|
|
|
|
// Find all code blocks
|
|
const codeBlocks = document.querySelectorAll('pre:not(.no-copy) > code');
|
|
|
|
codeBlocks.forEach(codeBlock => {
|
|
const pre = codeBlock.parentElement;
|
|
|
|
// Create wrapper if needed
|
|
let wrapper = pre.parentElement;
|
|
if (!wrapper.classList.contains('code-block')) {
|
|
wrapper = document.createElement('div');
|
|
wrapper.className = 'code-block';
|
|
pre.parentNode.insertBefore(wrapper, pre);
|
|
wrapper.appendChild(pre);
|
|
|
|
// Add header with language label and copy button
|
|
const header = document.createElement('div');
|
|
header.className = 'code-header';
|
|
|
|
// Try to extract language from class
|
|
let language = 'code';
|
|
const langClass = codeBlock.className.match(/language-(\w+)/) || codeBlock.className.match(/hljs language-(\w+)/);
|
|
if (langClass && langClass[1]) {
|
|
language = langClass[1].toUpperCase();
|
|
}
|
|
|
|
const langLabel = document.createElement('span');
|
|
langLabel.className = 'language-label';
|
|
langLabel.textContent = language;
|
|
|
|
const copyBtn = document.createElement('button');
|
|
copyBtn.className = 'copy-button';
|
|
copyBtn.textContent = 'Copy';
|
|
|
|
header.appendChild(langLabel);
|
|
header.appendChild(copyBtn);
|
|
wrapper.insertBefore(header, pre);
|
|
}
|
|
});
|
|
|
|
// Add click event to all copy buttons
|
|
document.addEventListener('click', function(event) {
|
|
if (event.target.matches('.copy-button')) {
|
|
const button = event.target;
|
|
const codeBlock = button.closest('.code-block');
|
|
const codeElement = codeBlock.querySelector('code');
|
|
|
|
navigator.clipboard.writeText(codeElement.textContent).then(() => {
|
|
button.textContent = 'Copied!';
|
|
button.classList.add('copied');
|
|
|
|
setTimeout(() => {
|
|
button.textContent = 'Copy';
|
|
button.classList.remove('copied');
|
|
}, 2000);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% if site.dox.google_analytics.tracking_code and jekyll.environment == 'production' %}
|
|
<!-- Google Analytics -->
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
ga('create', '{{ site.dox.google_analytics.tracking_code }}', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
{% endif %}
|
|
|
|
<!-- Mermaid - Following implementation docs exactly -->
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
mermaid.initialize({ startOnLoad: true });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
