本文将详细介绍如何在 NodeBBS 中配置和管理广告，包括图片广告、Google 广告和 HTML 自定义广告等常见使用方式。
一、基础配置流程
- 登录管理后台
- 进入：广告管理 → 广告列表
- 点击【新建广告】按钮
- 选择对应的广告位
- 配置广告内容并保存
不同广告位支持的尺寸和展示位置，可在【广告位管理】中查看。
二、广告启用与禁用
系统支持对【广告】和【广告位】进行独立控制：
- 在列表页点击【状态】列的启用 / 禁用徽标（Badge）即可切换
- 切换后即时生效
- 关闭广告位后，该位置所有广告将停止展示
使用建议：
- 临时活动广告可随时启用/停用
- 违规或过期广告建议及时关闭
三、图片广告配置
适用于推广产品、活动页面等场景。
配置方式
-
新建广告
-
广告类型选择：图片广告
-
填写以下信息：
- 图片 URL
- 跳转链接
-
保存即可生效
注意事项
- 图片尺寸需与广告位尺寸匹配
- 建议使用 CDN 或稳定图床
- 推荐格式：PNG / JPG / WebP
四、Google Adsense 广告配置（推荐）
适用于通过 Google Adsense 实现自动化变现。
1. 申请 Adsense 账号
前往 Google Adsense 官网申请账号，并通过网站审核。
2. 配置全站广告脚本
进入：
系统配置 → 通用设置 → 站点统计脚本
插入以下代码（示例）：
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5402318672528775"
crossorigin="anonymous"></script>
⚠️ 请替换为你自己的 ca-pub 编号。
3. 创建广告位代码
在 Google Adsense 后台创建广告单元后，获取代码。
在 NodeBBS 中：
- 新建广告
- 广告类型选择：脚本广告
- 粘贴以下结构代码（示例）：
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5402318672528775"
data-ad-slot="3231236676"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
⚠️ 必须完整保留代码结构，否则可能无法正常展示广告。
常见问题
- 广告不显示：请确认已加载全站脚本
- 无填充：等待 Google 分配广告
- 报错：检查 client / slot 是否正确
五、HTML 自定义广告
适用于品牌推广、联盟广告、自营产品宣传等场景。
支持插入任意 HTML + CSS 结构，自由度最高。
示例：3:2 图文广告
<div class="wk-view-shell">
<a href="https://example.com" target="_blank" class="wk-view-link">
<div class="wk-view-cover">
<img
src="https://placehold.co/300x300/eeeeee/333333?text=WKTV"
alt="WKTV"
>
</div>
<div class="wk-view-meta">
<h3 class="wk-view-name">WKTV 高清电视直播</h3>
<p class="wk-view-sub">多平台支持 · 开机即看</p>
<span class="wk-view-go">立即体验</span>
</div>
</a>
</div>
<style>
.wk-view-shell {
max-width: 600px;
margin: 16px auto;
border: 1px solid #ddd; /* 新增边框 */
border-radius: 12px;
overflow: hidden;
background: #fff;
}
/* 点击区域 */
.wk-view-link {
display: block;
color: inherit;
text-decoration: none;
}
/* 图片区（3:2） */
.wk-view-cover {
aspect-ratio: 3 / 2;
background: #f5f5f5;
overflow: hidden;
}
.wk-view-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 内容区 */
.wk-view-meta {
padding: 12px 16px;
}
.wk-view-name {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.wk-view-sub {
margin: 6px 0;
color: #666;
font-size: 14px;
}
.wk-view-go {
display: inline-block;
padding: 6px 14px;
background: #2563eb;
color: #fff;
border-radius: 6px;
font-size: 13px;
}
</style>
使用建议
- 避免引入不可信第三方脚本
- 建议限制样式作用域
- 移动端优先适配
- 注意广告合规性
六、常见问题汇总
Q1：广告不显示？
- 是否启用广告和广告位
- 脚本是否加载成功
- 是否被广告拦截插件拦截
Q2：可以同时使用多个广告平台吗？
可以，不同广告位可使用不同平台。
Q3：广告影响加载速度怎么办？
- 使用 async / defer
- 合理延迟加载
- 压缩图片资源
