mirror of
https://github.com/Zippland/worth-calculator.git
synced 2026-01-19 01:21:03 +08:00
添加广告时间控制功能
- 创建环境变量配置示例文件 .env.example - 添加广告配置工具函数,支持时间控制和链接配置 - 修改广告组件,根据环境变量控制显示 - 支持以下环境变量: - NEXT_PUBLIC_AD_END_TIME: 广告结束时间 - NEXT_PUBLIC_AD_ENABLED: 是否启用广告 - NEXT_PUBLIC_AD_LINK: 广告跳转链接 使用方法: 1. 复制 .env.example 为 .env.local 2. 设置广告结束时间,超过该时间广告自动下线 3. 可通过 NEXT_PUBLIC_AD_ENABLED=false 立即关闭广告 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { isAdEnabled, getAdLink } from '@/utils/adConfig';
|
||||
|
||||
export default function HorizontalBanner() {
|
||||
// 如果广告未启用或已过期,不显示
|
||||
if (!isAdEnabled()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full bg-gray-100">
|
||||
{/* 横向 Banner - 7:1 比例 */}
|
||||
<a
|
||||
href="https://www.google.com"
|
||||
href={getAdLink()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block relative w-full bg-gray-200 overflow-hidden hover:opacity-90 transition-opacity duration-300 cursor-pointer"
|
||||
|
||||
@@ -2,11 +2,17 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { isAdEnabled, getAdLink } from '@/utils/adConfig';
|
||||
|
||||
export default function VerticalAd() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 检查广告是否应该显示
|
||||
if (!isAdEnabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 延迟显示广告,避免影响首屏加载
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
@@ -35,7 +41,7 @@ export default function VerticalAd() {
|
||||
|
||||
{/* 广告内容 - 3:5 比例(宽:高) */}
|
||||
<a
|
||||
href="https://www.google.com"
|
||||
href={getAdLink()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block relative bg-gray-200 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-shadow duration-300 cursor-pointer"
|
||||
|
||||
31
utils/adConfig.ts
Normal file
31
utils/adConfig.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
// 广告配置工具函数
|
||||
|
||||
export function isAdEnabled(): boolean {
|
||||
// 检查是否启用广告
|
||||
const enabled = process.env.NEXT_PUBLIC_AD_ENABLED;
|
||||
if (enabled === 'false') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查广告结束时间
|
||||
const endTimeStr = process.env.NEXT_PUBLIC_AD_END_TIME;
|
||||
if (!endTimeStr) {
|
||||
// 如果没有设置结束时间,默认显示广告
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const endTime = new Date(endTimeStr);
|
||||
const now = new Date();
|
||||
|
||||
// 如果当前时间超过了结束时间,则不显示广告
|
||||
return now <= endTime;
|
||||
} catch (error) {
|
||||
console.error('Invalid ad end time format:', endTimeStr);
|
||||
return true; // 时间格式错误时默认显示广告
|
||||
}
|
||||
}
|
||||
|
||||
export function getAdLink(): string {
|
||||
return process.env.NEXT_PUBLIC_AD_LINK || 'https://www.google.com';
|
||||
}
|
||||
Reference in New Issue
Block a user