AI摘要

本文为Joe主题美化教程，涵盖顶部视频、头像呼吸灯、背景透明度调整、格子背景、文章列表渐变效果、弹窗公告效果和彩色标签效果等，图文并茂，适合新手快速上手。

此内容根据文章生成，仅用于文章内容的解释与总结

🎨 Joe主题美化完全指南

打造高颜值Typecho博客，从Joe主题开始！

图文详解，代码完整，新手也能轻松上手

🌟 站点首页顶部视频

📸 效果预览

顶部视频效果

🛠️ 实现教程

温馨提示：建议在操作前备份主题文件！

📁 文件结构准备

Joe主题目录/
├── usr/themes/joe/
│   ├── 新建文件夹（任意名称）/
│   │   ├── index/
│   │   │   └── video.php
│   │   ├── css/
│   │   │   └── video.css
│   │   ├── js/
│   │   ├── post/
│   │   └── other/

💻 代码实现

1. 创建video.php文件

在index文件夹中创建video.php，添加以下代码：

<div class="video-background">
  <video poster="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/a7e1480a41a61cfa23145ea8a30fd75dfba726c0e06fc59c22ef8ce03f0a21381c5026a125fa502a27f32b1792d9c838?pictype=scale&from=30111&version=3.3.3.3&fname=Screenshot_2024_1127_034242.png&size=1024" 
         playsinline="" autoplay="" loop="" muted="">
    <source src="https://alimov2.a.kwimgs.com/upic/2024/12/13/19/BMjAyNDEyMTMxOTE4MjZfMzAxNDE5NDQ2Nl8xNTEwNTk4MTI5OTRfMl8z_b_B3addd920d6174ebffd11478576239387.mp4" type="video/mp4">
  </video>
  <span class="title"><?php $this->options->title(); ?></span>
  <span class="description"><?php $this->options->description(); ?></span>
</div>

2. 创建video.css样式

在css文件夹中创建video.css，添加以下代码：

/* 首页视频背景样式 */
.video-background {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px; 
  border-radius: 5px;
  overflow: hidden;
  background-image: url('https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/a7e1480a41a61cfa23145ea8a30fd75dfba726c0e06fc59c22ef8ce03f0a21381c5026a125fa502a27f32b1792d9c838?pictype=scale&from=30111&version=3.3.3.3&fname=Screenshot_2024_1127_034242.png&size=1024');
  background-size: cover;
  background-position: center; 
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.video-background .title {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 9vw; 
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.video-background .description {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3vw;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .video-background .title {
    font-size: 36px; 
  }
  .video-background .description {
    font-size: 16px; 
  }
}

3. 集成到主题

修改主题文件，添加引用：

文件路径操作
/usr/themes/joe/module/head.php添加CSS引用
/usr/themes/joe/index.php替换首页内容

添加CSS引用：

<?php $this->need('你的文件夹名称/css/video.css'); ?>

替换首页内容：

// 原代码（约第43行）
$this->need('module/index/carousel.php');

// 替换为
$this->need('你的文件夹名称/index/video.php');

✨ 头像呼吸灯效果

🎬 效果展示

头像呼吸灯

评论区头像也会自动添加呼吸灯效果，鼠标悬停还会旋转！

💡 实现代码

将以下CSS代码添加到网站的 <head> 或 <body> 中：

<style>
/* 头像呼吸光环和鼠标悬停旋转放大 */
.avatar {
  border-radius: 50%;
  animation: light 4s ease-in-out infinite;
  transition: 0.5s;
}

.avatar:hover {
  transform: scale(1.15) rotate(720deg);
}

@keyframes light {
  0% { box-shadow: 0 0 4px #f00; }
  25% { box-shadow: 0 0 16px #0f0; } 
  50% { box-shadow: 0 0 4px #00f; }
  75% { box-shadow: 0 0 16px #0f0; } 
  100% { box-shadow: 0 0 4px #f00; }
}
</style>

🎯 透明度自定义

📐 背景透明度调整

当使用背景图时，可能会被文字遮挡，通过CSS轻松解决：

🔧 基础透明度

body { --background: rgba(255,255,255,0.7) }

📊 透明度参数说明

透明度值效果描述
0.0完全透明
0.5半透明
0.7轻微透明
1.0完全不透明

💭 使用示例

/* 半透明效果 */
body { --background: rgba(255,255,255,0.5) }

/* 完全透明 */
body { --background: rgba(255,255,255,0.0) }

🔲 格子背景效果

🎨 CSS格子背景

纯CSS实现格子背景，零HTTP请求，性能友好！

body::before {
  background-image: 
    linear-gradient(90deg, rgba(60, 10, 30, .04) 10%, transparent 0), 
    linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
  background-size: 20px 20px;
  background-position: 50%;
  background-repeat: repeat;
}
优势：解决特定页面背景高度不够的问题，零性能负担！

🌈 文章列表渐变效果

🖼️ 效果预览

渐变效果

📁 文件修改清单

文件名路径作用
joe.index.jsusr/themes/Joe/assets/js/HTML结构
joe.index.cssusr/themes/Joe/assets/css/样式定义
joe.mode.cssusr/themes/Joe/assets/css/夜间模式

💻 分步实现

1️⃣ HTML结构修改

在joe.index.js中搜索joe_list__item wow default，在第一个<a>标签后添加：

<div class="article-banner-wrap"></div>
<div class="article-banner"></div>

2️⃣ CSS样式添加

在joe.index.css末尾添加：

/* 首页列表渐变 */
.article-banner-wrap {
  position: absolute;
  height: 100%;
  width: 50%;
  right: 0;
  top: 0;
}

.article-banner {
  visibility: hidden;
  opacity: .2;
  position: absolute;
  height: 100%;
  width: 50%;
  right: 0;
  top: 0;
  z-index: 0;
  background: linear-gradient(to left,#2BC0E4,#EAECC6);
  visibility: visible;
  animation: banner-show 1s;
}

.joe_list__item.default:hover .article-banner {
  opacity: 1;
}

3️⃣ 夜间模式适配

在joe.mode.css末尾添加：

/* 夜间模式渐变 */
html[data-night='night'] .article-banner {
  background: linear-gradient(to left,#1F1C2C,#928DAB);
  opacity: 0.1;
}

🎪 弹窗公告效果

📱 效果展示

弹窗效果

📝 弹窗代码

将以下代码添加到自定义HTML中：

<style>
.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup {
  animation: popOut .4s ease-in-out forwards;
  transform-origin: center center;
  transform: scale(0);
}

@keyframes popOut {
  to { transform: scale(1); }
}

.popup-content {
  background-color: #fff;
  padding: 30px;
  max-width: 400px;
  text-align: center;
  border-radius: 6px;
}

.popup-title {
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000000;
}

.popup-button {
  background-color: #B0C4DE;
  color: #fff;
  border: none;
  padding: 6px 20px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
</style>

<div class="popup-container">
  <div class="popup-content">
    <h2 class="popup-title">公告</h2>
    <p>您好，欢迎访问我的个人Blog！</p>
    <button class="popup-button" onclick="this.parentElement.parentElement.style.display='none'">我已知晓</button>
  </div>
</div>

🏷️ 彩色标签效果

🎨 效果展示

彩色标签

🎯 CSS代码

将以下CSS添加到自定义CSS中：

/* 文章标签彩色效果 */
.article-tags {
  margin-bottom: 10px;
}

.article-tags a {
  padding: 4px 10px;
  background-color: #19B5FE;
  color: white;
  font-size: 12px;
  margin: 0 5px 5px 0;
  border-radius: 2px;
  display: inline-block;
}

/* 5色循环 */
.article-tags a:nth-child(5n) { background-color: #4A4A4A; }
.article-tags a:nth-child(5n+1) { background-color: #ff5e5c; }
.article-tags a:nth-child(5n+2) { background-color: #ffbb50; }
.article-tags a:nth-child(5n+3) { background-color: #1ac756; }
.article-tags a:nth-child(5n+4) { background-color: #19B5FE; }

.article-tags a:hover {
  background-color: #1B1B1B;
  color: #FFF;
}

🔗 相关资源

📚 延伸阅读

🌐 参考博客

感谢以下博主的精彩分享：

✅ 使用总结

美化项目难度效果备注
顶部视频⭐⭐⭐视觉冲击强需文件操作
头像呼吸灯⭐简单实用纯CSS
透明度调整⭐基础美化参数可调
格子背景⭐简约美观零性能负担
渐变列表⭐⭐高级感需修改源码
弹窗公告⭐⭐交互性强可自定义内容
彩色标签⭐色彩丰富直接可用
💡 小贴士：建议按顺序逐步添加，每步完成后测试效果，避免一次性修改过多导致问题难以排查！
最后修改：2025 年 09 月 15 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏