这个教程将指导你如何修改Emlog的模板文件，将文章头部改为蓝色渐变背景的现代风格，类似于技术教程网站常见的设计。
步骤概览
- 备份原始文件
- 确定修改位置
- 添加必要的CSS样式
- 修改文章头部HTML结构
- 测试效果
详细步骤
1. 备份原始文件
在开始修改之前，先备份你的 echo_log.php 文件，以防需要恢复：
- 找到你当前使用的主题文件夹:
content/templates/你的主题名称/ - 复制
echo_log.php文件并重命名为echo_log.php.bak
2. 添加必要的CSS样式
打开主题的 header.php 文件，在 </head> 标签前添加以下CSS样式：
Html
<!-- 文章头部风格样式 -->
<style>
.article-header-banner {
position: relative;
background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
color: #fff;
padding: 60px 0 80px;
margin-bottom: 30px;
overflow: hidden;
text-align: center;
}
.article-header-banner::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,154.7C672,128,768,96,864,96C960,96,1056,128,1152,154.7C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
background-position: center;
}
.article-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 20px;
}
.article-meta {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.article-meta-item {
display: flex;
align-items: center;
}
.article-meta-item svg {
margin-right: 5px;
width: 16px;
height: 16px;
}
.article-tags {
margin-top: 20px;
}
.tag-item {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 4px 10px;
border-radius: 20px;
margin: 0 5px 5px 0;
font-size: 12px;
}
.article-container {
max-width: 90%;
margin: 0 auto;
padding: 0 15px;
}
@media (max-width: 768px) {
.article-title {
font-size: 1.8rem;
}
.article-meta {
flex-wrap: wrap;
gap: 10px;
}
}
</style>3. 修改文章头部HTML结构
现在，打开你的 echo_log.php 文件，找到文章头部区域。基于我们的主题文件，我们需要修改这部分：
- 找到以下这部分代码（大约在第357行左右）：
Php
<!-- 文章头部区域 -->
<header class="mb-8">
<!-- 阅读控制工具栏 -->
<div class="flex justify-end mb-4 items-center space-x-3 text-gray-600">
<!-- 工具栏内容 -->
</div>
<!-- 文章标题 -->
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800"><?= htmlspecialchars($log_title, ENT_QUOTES, 'UTF-8') ?></h1>
<!-- 文章元信息 -->
<div class="flex flex-wrap items-center text-gray-600 mb-6 space-x-4">
<!-- 元信息内容 -->
</div>
<!-- 文章摘要 -->
<?php if (!empty($excerpt)): ?>
<div class="bg-gray-50 border-l-4 border-blue-500 p-4 mb-6 text-gray-700 italic rounded">
<?= $excerpt ?>
</div>
<?php endif; ?>
<!-- 文章封面图片 -->
<?php if (!empty($log_cover)): ?>
<div class="mb-6 rounded-lg overflow-hidden shadow-md">
<img src="<?= htmlspecialchars($log_cover, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars($log_title, ENT_QUOTES, 'UTF-8') ?>" class="w-full h-auto">
</div>
<?php endif; ?>
</header>- 用下面的新代码替换整个头部区域：
Php
<!-- 文章头部区域 -->
<div class="article-header-banner">
<div class="article-container">
<h1 class="article-title"><?= htmlspecialchars($log_title, ENT_QUOTES, 'UTF-8') ?></h1>
<div class="article-meta">
<div class="article-meta-item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
<?= $reading_time ?>分钟
</div>
<div class="article-meta-item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg>
<?= date('Y-m-d', $date) ?>
</div>
<div class="article-meta-item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
<?= isset($user_cache[$author]) ? htmlspecialchars($user_cache[$author]['name'], ENT_QUOTES, 'UTF-8') : '管理员' ?>
</div>
<div class="article-meta-item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
<?= $views ?>
</div>
<div class="article-meta-item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M928 161H699.2c-49.1 0-97.1 14.1-138.4 40.7L512 233l-48.8-31.3A255.2 255.2 0 0 0 324.8 161H96c-17.7 0-32 14.3-32 32v568c0 17.7 14.3 32 32 32h228.8c49.1 0 97.1 14.1 138.4 40.7l44.4 28.6c1.3.8 2.8 1.3 4.3 1.3s3-.4 4.3-1.3l44.4-28.6C602 807.1 650.1 793 699.2 793H928c17.7 0 32-14.3 32-32V193c0-17.7-14.3-32-32-32zM324.8 721H136V233h188.8c35.4 0 69.8 10.1 99.5 29.2l48.8 31.3 6.9 4.5v462c-47.6-25.6-100.8-39-155.2-39zm563.2 0H699.2c-54.4 0-107.6 13.4-155.2 39V298l6.9-4.5 48.8-31.3c29.7-19.1 64.1-29.2 99.5-29.2H888v488z"></path></svg>
<?= $word_count ?>字
</div>
</div>
<?php if (!empty($tags)): ?>
<div class="article-tags">
<?php foreach ($tags as $tag): ?>
<span class="tag-item"><?= htmlspecialchars($tag, ENT_QUOTES, 'UTF-8') ?></span>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
<!-- 文章摘要 -->
<?php if (!empty($excerpt)): ?>
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-gray-50 border-l-4 border-blue-500 p-4 mb-6 text-gray-700 italic rounded">
<?= $excerpt ?>
</div>
</div>
</div>
<?php endif; ?>
<!-- 文章封面图片 -->
<?php if (!empty($log_cover)): ?>
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="mb-6 rounded-lg overflow-hidden shadow-md">
<img src="<?= htmlspecialchars($log_cover, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars($log_title, ENT_QUOTES, 'UTF-8') ?>" class="w-full h-auto">
</div>
</div>
</div>
<?php endif; ?>
<!-- 阅读控制工具栏 -->
<div class="container mx-auto px-4 mb-8">
<div class="max-w-4xl mx-auto">
<div class="flex justify-end items-center space-x-3 text-gray-600">
<div class="font-size-controls flex items-center border rounded-lg overflow-hidden">
<button id="decreaseFontBtn" class="px-3 py-2 bg-gray-100 hover:bg-gray-200 border-r flex items-center justify-center transition-colors duration-200" aria-label="减小字体">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</button>
<span id="fontSizeIndicator" class="px-3 py-2 text-sm">默认</span>
<button id="increaseFontBtn" class="px-3 py-2 bg-gray-100 hover:bg-gray-200 border-l flex items-center justify-center transition-colors duration-200" aria-label="增大字体">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
<button id="printArticleBtn" class="flex items-center space-x-1 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200" aria-label="打印文章">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
</svg>
<span class="text-sm">打印</span>
</button>
<!-- 新增：目录按钮 -->
<button id="tocBtn" class="flex items-center space-x-1 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200" aria-label="文章目录">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span class="text-sm">目录</span>
</button>
</div>
</div>
</div>4. 保存并测试
- 保存修改后的
echo_log.php文件 - 打开你的博客，访问一篇文章测试效果
5. 常见问题解决
问题：标签没有正确显示
如果标签没有显示，修改标签相关代码如下：
Php
<?php
// 获取标签
$tags_html = blog_tag($logid);
$tags = array();
if(!empty($tags_html)) {
// 解析标签HTML
preg_match_all('/<a[^>]*>(.*?)<\/a>/i', $tags_html, $matches);
if(!empty($matches[1])) {
$tags = $matches[1];
}
}
?>
<?php if (!empty($tags)): ?>
<div class="article-tags">
<?php foreach ($tags as $tag): ?>
<span class="tag-item"><?= $tag ?></span>
<?php endforeach; ?>
</div>
<?php endif; ?>问题：样式冲突
如果遇到样式冲突，可以给我们的样式添加更具体的选择器：
Css
.article-header-banner {
/* 保持原有样式 */
}
.article-header-banner .article-title {
/* 样式 */
}效果预览
完成修改后，你的文章头部将会变成蓝色渐变背景的现代风格，类似于技术教程网站，包含：
- 渐变蓝色背景
- 波浪形底部过渡
- 居中大标题
- 图标式的文章信息（阅读时间、发布日期、作者、阅读量、字数）
- 圆角标签展示
希望这个教程对你有所帮助！如有任何问题，可以随时提问。
评论
发表评论