本文最后更新于88 天前，其中的信息可能已经过时，如有错误请发送邮件到liumiao0429@foxmail.com
博客代码
视图预览
代码结构
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>博客首页</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 顶部导航 -->
<div class="head-box">
<!-- logo -->
<div class="logo">
LOGO
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li v-for="item in navList" :key="item.id">
<img v-if="item.icon" :src="item.icon" alt="导航图标" class="nav-icon" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</div>
<!-- 主题内容 -->
<div class="main">
<!-- 左边文章部分 -->
<div class="left-box">
<div class="wz-box" v-for="item in wzList" :key="item.blog_id">
<div class="wz-img">
<img v-if="item.thumbnail" :src="item.thumbnail" alt="文章图片" />
</div>
<div class="wz-content">
<h1 class="wz-title">{{ item.title }}</h1>
<div>
<span>作者：{{ item.author }}</span>
<span>阅读：{{ item.views }}</span>
<span>创建时间：{{ item.created_at }}</span>
</div>
<p>{{ item.excerpt }}</p>
</div>
</div>
</div>
<!-- 右边信息部分 -->
<div class="right-box">
<!-- 用户 -->
<div class="user">
<!-- 用户头像 -->
<div >
<img src="./img/头像2.jpeg" alt="用户头像" />
</div>
<div class="user-info">
<span><h1></h1></span>
<span><p>王者 吃鸡 游戏王</p></span>
<br>
<button>关注我</button>
<br>
<span><p>唱 跳 Rap 篮球</p></span>
</div>
</div>
<div class="gonggao">
<h3>公告</h3>
<h3>
<span>
<p>过去无可挽回，未来可以改变</p>
<p>菜就多练</p>
</span>
</h3>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
// 导航数据
navList: [
{
id: "1",
name: "搜索",
icon: "./img/search.png",
path: "/search"
},
{
id: "2",
name: "首页",
icon: "./img/home.png",
path: "/"
},
{
id: "3",
name: "时间轴",
icon: "./img/calendar-three.png",
path: "/timeline"
},
{
id: "4",
name: "标签",
icon: "./img/tag-one.png",
path: "/tag"
},
{
id: "5",
name: "分类",
icon: "./img/category-management.png",
path: "/categories"
},
{
id: "6",
name: "友链",
icon: "./img/personal-collection.png",
path: "/friends"
},
{
id: "7",
name: "娱乐",
icon: "./img/entertainment.png",
path: "/entertainment"
}
],
// 文章数据
wzList: [
{
blog_id: 1,
author: "林浅夏",
views: 2389,
title: "京都枫叶季深度游攻略",
created_at: "2023-05-15 14:30:00",
excerpt: "独家揭秘京都枫叶季三大私藏路线，含清晨避人群攻略与峡谷游船体验，附哲学之道实拍技巧。",
thumbnail: "https://pic.rmb.bdstatic.com/bjh/events/8ed77199d6f5f57d7830bdf7347c1ff2450.jpeg@h_1280",
content: "<article><h2>京都枫叶季深度游攻略</h2><p>十一月京都化身红色海洋，清水寺的垂枝樱与枫叶同框的奇景不容错过。推荐三条小众路线：</p><ol><li>哲学之道银阁寺（避开人群清晨6点抵达）</li><li>大原三千院宝泉院体验日式庭院美学</li><li>嵯峨野小火车保津川游船全程观赏峡谷红叶</li></ol><figure><img src='https://via.placeholder.com/600x400/FFD700/000000?text=Autumn+Foliage' alt='枫叶景观' style='display:block;margin:20px auto;'><figcaption>哲学之道清晨实拍（建议携带广角镜头）</figcaption></figure><blockquote>\"京都的红叶教会我们，生命最绚烂的时刻往往最短暂。\" —— 日本俳句</blockquote></article>"
},
{
blog_id: 2,
author: "陈墨轩",
views: 1742,
title: "2023编程神器横向测评",
created_at: "2023-04-28 09:15:00",
excerpt: "2023主流IDE深度测评：VS Code/IntelliJ等5款工具性能大PK，含启动速度、内存占用实测数据，附代码对比图。",
thumbnail: "https://pic4.zhimg.com/v2-4536c369f295b23582d3862dcd670bb7_r.jpg",
content: "<article><h2>2023编程神器横向测评</h2><p>对比测试了5款主流IDE：<strong>VS Code</strong>、<em>Sublime Text</em>、IntelliJ IDEA、PyCharm、WebStorm。</p><table><tr><th>项目</th><th>启动速度</th><th>插件生态</th><th>内存占用</th></tr><tr><td>VS Code</td><td>★★★★★</td><td>★★★★☆</td><td>★★☆☆☆</td></tr><tr><td>IntelliJ</td><td>★★☆☆☆</td><td>★★★★★</td><td>★★☆☆☆</td></tr></table><figure><img src='https://via.placeholder.com/600x300/00FF00/FFFFFF?text=Code+Comparison' alt='代码对比图' style='border-radius:8px;'></figure><p>最终结论：轻量级开发选VS Code，企业级项目推荐JetBrains全家桶。</p></article>"
},
{
blog_id: 3,
author: "苏晴雨",
views: 3567,
title: "极简主义者的胶囊衣橱",
created_at: "2023-05-03 16:45:00",
excerpt: "极简主义穿搭公式：70%基础款+20%季节色+10%设计款，附33件胶囊衣橱清单与高性价比品牌推荐。",
thumbnail: "https://img95.699pic.com/photo/60046/6737.jpg_wh860.jpg",
content: "<article><h2>极简主义者者的胶囊衣橱</h2><p>用33件单品打造四季穿搭，心公式：<strong>70%基础款+20%季节色+10%设计款</strong>。</p><div style='display:flex;gap:20px;'><img src='https://via.placeholder.com/300x400/FF69B4/FFFFFF?text=Outfit1' alt='穿搭示例1' style='flex:1;'><img src='https://via.placeholder.com/300x400/7FFFD4/000000?text=Outfit2' alt='穿搭示例2' style='flex:1;'></div><ul><li>投资高质量羊毛大衣（推荐品牌：Max Mara）</li><li>白衬衫选择埃及棉材质（支数100）</li><li>配饰预算占比不超过15%</li></ul><p>完整清单及购买链接见评论区置顶</p></article>"
},
{
blog_id: 4,
author: "沈夜白",
views: 1284,
title: "量子计算入门指南",
created_at: "2023-04-12 18:20:00",
excerpt: "量子计算零基础入门：从薛定谔方程到量子比特可视化，附布洛赫球面图解与IBM量子体验平台推荐。",
thumbnail: "https://img.xintp.com/2023/08/2023081708532870.png",
content: "<article><h2>量子计算入门指南</h2><p>从薛定谔方程到量子比特，图解关键概念：</p><figure><img src='https://via.placeholder.com/500x300/FFA500/000000?text=Qubit+Visualization' alt='量子比特图示' style='box-shadow:0 4px 8px rgba(0,0,0,0.1);'><figcaption>布洛赫球面上的量子态表示</figcaption></figure><pre><code>|⟩ = |0⟩ + |1⟩（其中² + ² = 1）</code></pre><p>推荐学习资源：<a href='#'>IBM Quantum Experience</a> + <a href='#'>Qiskit 教程</a></p></article>"
},
{
blog_id: 5,
author: "周云深",
views: 4128,
title: "米其林三星主厨的居家食谱",
created_at: "2023-05-20 11:00:00",
excerpt: "米其林三星主厨秘方还原：和牛海胆卷制作全攻略，含铸铁锅锁汁技巧与食材处理时间表，本周五直播演示。",
thumbnail: "https://img1.sucaisucai.com/12/15/12015751_1.jpg",
content: "<article><h2>米其林三星主厨的居家食谱</h2><p>复刻<em>Masa's Sushi Bar</em>招牌菜：<strong>和牛海胆卷</strong></p><figure><img src='https://via.placeholder.com/600x400/FFDAB9/000000?text=Wagyu+Uni+Roll' alt='和牛海胆卷' style='transform:rotate(-5deg);'><figcaption>布洛赫球面上的量子态表示</figcaption></figure><ol><li>寿司米醋比例：1杯米+45ml醋+20g糖+5g盐</li><li>炙烤和牛技巧：铸铁锅烧至200℃瞬间锁汁</li><li>海胆处理：食用前10分钟开盒保持鲜甜</li></ol><p>完整视频教程将于本周五晚8点直播演示</p></article>"
}
]
};
},
errorCaptured(err, vm, info) {
// 增加适当的错误处理机制
console.error('捕获到错误:', err, info);
return false;
}
});
</script>
<style>
html, body, #app {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
li {
list-style-type: none;
}
/* 顶部开始 */
.head-box {
height: 60px;
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
.logo {
font-size: 20px;
font-weight: bold;
}
.nav {
display: flex;
}
.nav li {
/* display: display: flex; 有点小问题*/
display: inline-flex;
align-items: center;
}
.nav-icon {
width: 18px;
margin-right: 5px;
margin-left: 30px;
font-size: 18px;
display: flex;
align-items: center;
}
.nav-icon {
width: 18px;
margin-right: 5px;
}
/* 顶部结束 */
/* 主题开始 */
.main {
width: 1200px;
margin: 40px auto 0;
display: flex;
}
.left-box {
width: 70%;
margin-right: 15px;
}
.wz-box {
width: 100%;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
display: flex;
margin-bottom: 10px;
border-radius: 10px;
}
.wz-img {
width: 450px;
height: 200px;
margin-right: 20px;
}
.wz-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.wz-content {
width: 100%;
}
.wz-title {
font-size: 24px;
font-family: 'kaiti';
font-weight: 600;
}
.right-box {
width: 30%;
}
.user {
width: 100%;
height: 600px;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.user img {
width: 300px;
height: 300px;
/* border-radius: 50%; 圆形头像 */
border-radius: 50%;
/* 居中 */
}
.user-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
text-align: center;
}
.user-info h1 {
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
.user-info span {
font-size: 16px;
margin-bottom: 10px;
}
.user-info p {
font-size: 16px;
margin-bottom: 10px;
}
.user-info button {
background-color: #4969f8;
color: #fff;
border: none;
padding: 10px 80px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.gonggao {
width: 100%;
height: 200px;
background-color: #f2f2f2;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.gonggao p {
font-size: 16px;
text-align: center;
padding-top: 20px;
}
/* 主题结束 */
</style>
</body>
</html>
