缤纷节日主题切换，让博客洋溢欢乐气息

2024-02-24 09:20:20

轻松切换主题，为你的 Hexo 博客增添节日风采

在节日即将到来之际，是时候为你的 Hexo 博客增添一些节日气氛了。本文将指导你如何添加春节和圣诞节主题，让你的博客在不同的节日里焕然一新。

主题切换按钮

首先，为你的博客添加一个主题切换按钮，可以放置在导航栏、侧边栏或页脚处。此按钮将允许读者轻松切换主题。

<button id="theme-toggle">切换主题</button>

CSS 样式

接下来，编写两个主题的 CSS 样式。

春节主题

body {
  background-color: #f5f5f5;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  color: #e83e8c;
}

a {
  color: #e83e8c;
}

.post-content {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

.post-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.post-date {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.post-tags {
  font-size: 14px;
  color: #999;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

圣诞节主题

body {
  background-color: #000;
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  color: #ff0000;
}

a {
  color: #ff0000;
}

.post-content {
  background-color: #222;
  padding: 20px;
  margin-bottom: 20px;
}

.post-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.post-date {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.post-tags {
  font-size: 14px;
  color: #999;
}

.footer {
  background-color: #000;
  color: #fff;
  padding: 20px;
}

JavaScript 脚本

编写一个 JavaScript 脚本来控制主题切换。

const themeToggle = document.getElementById('theme-toggle');

themeToggle.addEventListener('click', () => {
  const currentTheme = document.body.getAttribute('data-theme');

  if (currentTheme === 'spring-festival') {
    document.body.setAttribute('data-theme', 'christmas');
  } else {
    document.body.setAttribute('data-theme', 'spring-festival');
  }
});