131 lines
4.6 KiB
HTML
131 lines
4.6 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>我的个人博客</title>
|
|
<link rel="stylesheet" href="{% static 'bottom.css' %}">
|
|
{% block stylesheethref %}
|
|
{% endblock %}
|
|
|
|
</head>
|
|
<body>
|
|
<!-- 头部 -->
|
|
<header>
|
|
<div class="container header-content">
|
|
<div class="logo"><a href="/">我的博客</a></div>
|
|
|
|
<nav class="nav-links">
|
|
<a href="#">前端技术</a>
|
|
<a href="#">后端开发</a>
|
|
<a href="#">生活随笔</a>
|
|
<a href="#">关于我</a>
|
|
<a href="#">关于我</a>
|
|
</nav>
|
|
|
|
<div class="search-box">
|
|
<input type="text" placeholder="搜索文章...">
|
|
<button><i class="fas fa-search"></i></button>
|
|
</div>
|
|
|
|
<div class="profile">
|
|
<span>欢迎回来</span>
|
|
<img src="http://iph.href.lu/50x50?text=正在开发中" alt="个人头像" class="profile-img">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区 -->
|
|
<main>
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<!-- 底部 -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>关于我们</h3>
|
|
<p>这是一个专注于技术分享和个人成长的博客平台，记录我在前端开发、后端技术和生活感悟等方面的思考与实践。</p>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h3>分类</h3>
|
|
<div class="footer-links">
|
|
<a href="#">前端技术</a>
|
|
<a href="#">后端开发</a>
|
|
<a href="#">数据库</a>
|
|
<a href="#">生活随笔</a>
|
|
<a href="#">读书笔记</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h3>友情链接</h3>
|
|
<div class="footer-links">
|
|
<a href="#">GitHub</a>
|
|
<a href="#">Stack Overflow</a>
|
|
<a href="#">MDN Web Docs</a>
|
|
<a href="#">掘金</a>
|
|
<a href="#">知乎</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h3>联系我们</h3>
|
|
<div class="footer-links">
|
|
<a href="mailto:example@example.com">email@example.com</a>
|
|
<a href="#">GitHub</a>
|
|
<a href="#">Twitter</a>
|
|
<a href="#">微信公众号</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="copyright">
|
|
<p>© 2023 我的个人博客 版权所有 | 粤ICP备12345678号</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 简单的交互功能 -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 搜索功能
|
|
const searchBtn = document.querySelector('.search-box button');
|
|
const searchInput = document.querySelector('.search-box input');
|
|
|
|
searchBtn.addEventListener('click', function() {
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
alert('搜索: ' + query);
|
|
// 实际应用中这里应该是跳转到搜索页面或执行搜索操作
|
|
}
|
|
});
|
|
|
|
searchInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
alert('搜索: ' + query);
|
|
// 实际应用中这里应该是跳转到搜索页面或执行搜索操作
|
|
}
|
|
}
|
|
});
|
|
|
|
// 文章卡片交互
|
|
const articleCards = document.querySelectorAll('.article-card');
|
|
articleCards.forEach(card => {
|
|
card.addEventListener('click', function(e) {
|
|
if (!e.target.closest('.read-more')) {
|
|
const id = this.querySelector('.article-id').textContent;
|
|
window.open(`./archives/${id}`)
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |