Initial commit: DVS Blog v1.0.0
This commit is contained in:
@@ -0,0 +1,173 @@
|
||||
<!-- article.html -->
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="repo-container repo-py-6">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="repo-mb-4">
|
||||
<a href="/" class="repo-btn repo-btn--ghost repo-btn--sm">
|
||||
<i class="fas fa-arrow-left repo-mr-2"></i>返回首页
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 文章容器 -->
|
||||
<div class="repo-card">
|
||||
<!-- 文章头部 -->
|
||||
<div class="repo-card__header" style="background: var(--repo-color-primary); color: #fff;">
|
||||
<h1 class="repo-text-xl repo-font-bold repo-mb-3">{{ title }}</h1>
|
||||
<div class="repo-flex repo-items-center repo-justify-between repo-flex-wrap repo-gap-3">
|
||||
<div class="repo-flex repo-items-center repo-gap-4">
|
||||
<div class="repo-flex repo-items-center repo-gap-1">
|
||||
<i class="far fa-user"></i>
|
||||
<span>{{ author }}</span>
|
||||
</div>
|
||||
<div class="repo-flex repo-items-center repo-gap-1">
|
||||
<i class="far fa-clock"></i>
|
||||
<span>{{ created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="repo-flex repo-gap-2">
|
||||
<button onclick="window.print()" class="repo-btn repo-btn--ghost repo-btn--sm" style="color: #fff; border-color: rgba(255,255,255,0.3);">
|
||||
<i class="fas fa-print"></i>
|
||||
</button>
|
||||
<button onclick="shareArticle()" class="repo-btn repo-btn--ghost repo-btn--sm" style="color: #fff; border-color: rgba(255,255,255,0.3);">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div class="repo-card__body article-content">
|
||||
{{ content|safe }}
|
||||
</div>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<div class="repo-card__footer">
|
||||
<div class="repo-flex repo-items-center repo-justify-between">
|
||||
<div class="repo-text-sm repo-text-secondary">
|
||||
<i class="far fa-clock repo-mr-1"></i>阅读时间约需 5分钟
|
||||
</div>
|
||||
<div class="repo-flex repo-gap-2">
|
||||
<button onclick="scrollToTop()" class="repo-btn repo-btn--ghost repo-btn--icon">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
<a href="/" class="repo-btn repo-btn--primary">
|
||||
返回首页
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航提示 -->
|
||||
<div class="repo-row repo-mt-4">
|
||||
<div class="repo-col">
|
||||
<div class="repo-card" style="border-color: var(--repo-color-primary);">
|
||||
<div class="repo-card__body" style="padding: 12px 16px;">
|
||||
<p class="repo-text-sm" style="color: var(--repo-color-primary);">
|
||||
<i class="fas fa-info-circle repo-mr-2"></i>使用键盘左右箭头可快速导航文章
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="repo-col">
|
||||
<div class="repo-card">
|
||||
<div class="repo-card__body" style="padding: 12px 16px;">
|
||||
<p class="repo-text-sm repo-text-secondary">
|
||||
<i class="fas fa-bookmark repo-mr-2"></i>按 Ctrl+D 收藏本页
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.article-content {
|
||||
color: var(--repo-color-text);
|
||||
line-height: 1.75;
|
||||
font-size: 15px;
|
||||
}
|
||||
.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
|
||||
color: var(--repo-color-text);
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.article-content h1 { font-size: 1.9em; border-bottom: 1px solid var(--repo-color-border); padding-bottom: 0.4em; }
|
||||
.article-content h2 { font-size: 1.5em; border-bottom: 1px solid var(--repo-color-border); padding-bottom: 0.3em; }
|
||||
.article-content h3 { font-size: 1.25em; }
|
||||
.article-content h4 { font-size: 1.1em; }
|
||||
.article-content p { margin: 1em 0; }
|
||||
.article-content a { color: var(--repo-color-link); text-decoration: underline; }
|
||||
.article-content ul, .article-content ol { margin: 1em 0; padding-left: 1.8em; }
|
||||
.article-content ul { list-style: disc; }
|
||||
.article-content ol { list-style: decimal; }
|
||||
.article-content li { margin: 0.4em 0; }
|
||||
.article-content blockquote {
|
||||
border-left: 4px solid var(--repo-color-primary);
|
||||
padding: 0.6em 1.2em;
|
||||
margin: 1.5em 0;
|
||||
color: var(--repo-color-text-secondary);
|
||||
background: var(--repo-color-bg-tertiary);
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
.article-content img { max-width: 100%; border-radius: 12px; margin: 2rem auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
|
||||
.article-content th, .article-content td { padding: 10px 14px; border: 1px solid var(--repo-color-border); text-align: left; }
|
||||
.article-content th { background: var(--repo-color-bg-secondary); font-weight: 600; }
|
||||
.article-content pre {
|
||||
background: #1f2937; color: #f3f4f6; border-radius: 8px; padding: 1.25rem 1.5rem;
|
||||
overflow-x: auto; margin: 1.5rem 0; font-family: var(--repo-font-family-mono);
|
||||
font-size: 0.875em; line-height: 1.6; border: 1px solid #374151;
|
||||
}
|
||||
.article-content pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
|
||||
.article-content code:not(pre code) {
|
||||
background: var(--repo-color-bg-tertiary); padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px; font-size: 0.875em; color: var(--repo-color-text);
|
||||
}
|
||||
.article-content pre::-webkit-scrollbar { height: 8px; }
|
||||
.article-content pre::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; }
|
||||
.article-content pre::-webkit-scrollbar-thumb { background: var(--repo-color-primary); border-radius: 4px; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function shareArticle() {
|
||||
if (navigator.share) {
|
||||
navigator.share({ title: document.title, url: window.location.href });
|
||||
} else {
|
||||
copyToClipboard(window.location.href);
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'ArrowLeft') { /* 上一篇逻辑 */ }
|
||||
else if (e.key === 'ArrowRight') { /* 下一篇逻辑 */ }
|
||||
});
|
||||
|
||||
// 代码块复制按钮
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.article-content pre').forEach(function(pre) {
|
||||
var container = document.createElement('div');
|
||||
container.className = 'repo-relative';
|
||||
pre.parentNode.insertBefore(container, pre);
|
||||
container.appendChild(pre);
|
||||
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'copy-button';
|
||||
btn.innerHTML = '<i class="far fa-copy repo-mr-1"></i>复制';
|
||||
btn.onclick = function() {
|
||||
var code = pre.querySelector('code') ? pre.querySelector('code').innerText : pre.innerText;
|
||||
copyToClipboard(code);
|
||||
};
|
||||
container.appendChild(btn);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user