Sea 项目样式修改

第 1 步：新增自定义标签逻辑

1. 打开您主题目录下的 scripts/tags.js 文件。
2. 将 projects 标签的注册代码 替换 为以下内容：

hexo.extend.tag.register('projects', () => {
  const projects = hexo.theme.config.projects || [];
  const projectsEle = projects.map((item, index) => {
    // 通过索引判断，交替应用 'alt' 类，实现左右布局切换
    const cardClass = (index % 2 === 1) ? 'blog-card alt' : 'blog-card';
    const imageStyle = item.img ? `background-image: url(${item.img})` : '';

    return `
      <div class="${cardClass}">
        <a href="${item.link}" target="_blank" class="meta">
          <div class="photo" style="${imageStyle}"></div>
        </a>
        <div class="description">
          <h1>${item.name}</h1>
          <p>${item.desc}</p>
          <p class="read-more">
            <a href="${item.link}" target="_blank">View Project</a>
          </p>
        </div>
      </div>
    `;
  });
  return `<div class="sea-project-wrapper">${projectsEle.join('')}</div>`;
});

第 2 步：更新 CSS 样式

1. 打开您主题目录下的 source/css/_partial/projects.css 文件。
2. 将其中的所有内容 替换 为以下新的 CSS 代码：

.sea-project-wrapper {
  padding: 20px 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, .1);
  background: var(--sea-color-bg-soft);
  line-height: 1.5;
  font-family: var(--sea-font-family);
  border-radius: 8px;
  overflow: hidden;
  z-index: 0;
  max-width: 700px;
}

.blog-card a {
  color: inherit;
  text-decoration: none;
}

.blog-card:hover .photo {
  transform: scale(1.2) rotate(2deg);
}

.blog-card .meta {
  position: relative;
  z-index: 0;
  height: 200px;
  flex-shrink: 0;
}

.blog-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform .3s ease-out;
}

.blog-card .description {
  padding: 1.5rem;
  background: var(--sea-color-main-bg);
  position: relative;
  z-index: 1;
}

.blog-card .description h1 {
  line-height: 1.1;
  margin: 0;
  font-size: 1.5rem;
  color: var(--sea-color-text-1);
}

.blog-card .description p {
  position: relative;
  margin: 1rem 0 0;
  color: var(--sea-color-text-2);
}

.blog-card .description p:first-of-type {
  margin-top: 1.25rem;
}

.blog-card .description p:first-of-type::before {
  content: "";
  position: absolute;
  height: 5px;
  background: var(--sea-color-primary);
  width: 40px;
  top: -0.85rem;
  border-radius: 3px;
}

.blog-card .description .read-more {
  text-align: right;
  margin-top: 1.5rem;
}

.blog-card .description .read-more a {
  color: var(--sea-color-primary);
  display: inline-block;
  position: relative;
  font-weight: bold;
  font-size: 0.9rem;
}

/* 桌面端样式 */
@media (min-width: 640px) {
  .blog-card {
    flex-direction: row;
  }
  .blog-card .meta {
    flex-basis: 40%;
    height: auto;
  }
  .blog-card .description {
    flex-basis: 60%;
    padding: 2rem;
  }
  .blog-card .description::before {
    transform: skewX(-3deg);
    content: "";
    background: var(--sea-color-main-bg);
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .blog-card.alt {
    flex-direction: row-reverse;
  }
  .blog-card.alt .description::before {
    left: inherit;
    right: -10px;
    transform: skew(3deg);
  }
}

第 3 步：修改_config.sea.yml

修改配置文件

# 项目
projects:
  - name: '我的项目 1'
    desc: '这是我的第一个项目的描述，介绍项目的功能和技术。'
    link: 'https://github.com/project-1' # 替换为您的项目链接
    img: '/images/project1.png' # 替换为您的项目图片路径

第 4 步：新增sources/projects/index.md

新增index.md文档

---
title: 项目
comments: false
---

{% projects %}

第 5 步：重新生成和预览

最后，重新生成博客文件并启动本地服务器来查看最终效果。

hexo clean
hexo generate
hexo server