131 lines
No EOL
4.1 KiB
HTML
131 lines
No EOL
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Yan Lin's Blog - {{ title }}</title>
|
|
<link rel="icon" href="/logo.webp" type="image/x-icon">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/index.css">
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
<script>
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
|
displayMath: [['$$', '$$'], ['\\[', '\\]']]
|
|
},
|
|
options: {
|
|
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
|
|
processHtmlClass: 'arithmatex'
|
|
}
|
|
};
|
|
|
|
window.addEventListener('load', function() {
|
|
document.querySelectorAll('script[type^="math/tex"]').forEach(function(script) {
|
|
const isDisplay = script.type.includes('mode=display');
|
|
const math = script.textContent;
|
|
const span = document.createElement('span');
|
|
span.className = isDisplay ? 'mathjax-block' : 'mathjax-inline';
|
|
span.innerHTML = isDisplay ? `\\[${math}\\]` : `\\(${math}\\)`;
|
|
script.parentNode.replaceChild(span, script);
|
|
});
|
|
|
|
if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
|
|
MathJax.typesetPromise();
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
a {
|
|
font-family: 'Lato', sans-serif;
|
|
}
|
|
|
|
img, .figure {
|
|
max-width: min(100%, 800px);
|
|
height: auto;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.blog-title {
|
|
font-size: calc(1.35rem + 0.9vw);
|
|
font-weight: bold;
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(1.35rem + 0.6vw);
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(1.1rem + 0.4vw);
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: calc(0.95rem + 0.1vw);
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header class="border-bottom lh-1 py-3 border-secondary">
|
|
<div class="row flex-nowrap justify-content-between align-items-center">
|
|
<div class="col-2">
|
|
<a class="link-secondary header-icon px-2 h4" href="/"><i class="bi bi-house-fill"></i></a>
|
|
</div>
|
|
<div class="col-8 text-center">
|
|
<div class="page-header-logo h2 m-0 fw-bold" style="font-family: 'Abril Fatface', serif;">Yan Lin's Blog</div>
|
|
</div>
|
|
<div class="col-2 text-end">
|
|
<a class="link-secondary header-icon px-2 h4" href="/blog"><i class="bi bi-list-task"></i></a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<article class="section col-xl-10 col-xxl-9 mx-auto">
|
|
{{ content }}
|
|
</article>
|
|
<p class="text-center text-secondary" style="font-size: 0.8rem; font-family: 'Lato', sans-serif;">Copyright © 2025. Designed and implemented by Yan Lin.</p>
|
|
</main>
|
|
<button id="back-to-top" class="btn btn-light rounded-circle" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;"><i class="bi bi-chevron-up"></i></button>
|
|
</body>
|
|
|
|
</html>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.querySelectorAll('img').forEach(function(img) {
|
|
img.classList.add('figure-img', 'rounded');
|
|
});
|
|
});
|
|
|
|
// Show or hide the back-to-top button
|
|
window.addEventListener('scroll', function() {
|
|
var backToTopButton = document.getElementById('back-to-top');
|
|
if (window.scrollY > 100) {
|
|
backToTopButton.style.display = 'block';
|
|
} else {
|
|
backToTopButton.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Scroll to top when the button is clicked
|
|
document.getElementById('back-to-top').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
window.location.href = '#';
|
|
return false;
|
|
});
|
|
</script> |