Halo主题添加顶部气泡提示框

效果演示

使用方法

登录halo后台，点击设置--代码注入--页脚，添加一下代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
      const hour = new Date().getHours();
      let greeting = '你好';
      
      if (hour >= 5 && hour < 11) greeting = '早上好 🌞';
      else if (hour >= 11 && hour < 14) greeting = '中午好 ☀️';
      else if (hour >= 14 && hour < 18) greeting = '下午好 🌤';
      else greeting = '晚上好 🌙';
      
      const toast = document.createElement('div');
      toast.textContent = greeting;
      toast.style = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        z-index: 9999;
        animation: fadeInOut 2.3s ease;
      `;
      
      document.body.appendChild(toast);
      setTimeout(() => toast.remove(), 2300);
    }
  });
</script>

<style>
  @keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  }
</style>