给博客挂广告以参与 NodeSupport 免费服务器赞助计划

给博客挂广告以参与 NodeSupport 免费服务器赞助计划

活动概况

NodeSeek 与 YxVM 合作推出 免费服务器赞助计划，针对开发者及网站运营者，可以申请免费服务器。网站运营者需要在网站或博客上挂载活动指定的广告。由于很多人的博客是基于 hexo 的静态网页，挂载广告不能用常规 html 方式。下面教大家如何在 anzhiyu 主题上挂载广告。

开始修改

👉 方法一：修改源代码

首先感谢：CM TG 群友 NotPeppa 提供的原始代码

首先找到 \themes\anzhiyu\layout\includes\widget\card_webinfo.pug 文件

打开它，在文件的最后面加上以下代码（20250406 更新）：

1
2
3
4
5
6
7
8
9
.sponsor-iframe-sidebar-container(
  style="margin: 15px 0 -40px 0; width: 100%; height: 260px; box-sizing: border-box; overflow: hidden;"
)
  iframe(
    src="https://support.nodeget.com/page/promotion?id=89"
    style="transform: scale(0.9); transform-origin: top left; width: 111%; height: 100%; border: none;"
    scrolling="no"
    loading="lazy"
  )

注意缩进

👉 方法二：利用安知鱼原生功能

找到 \source\_data 目录，新建 widget.yml 文件，写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
top:
  - class_name: card-sponsor
    name: YxVm 友情赞助
    icon: fa-solid fa-heart
    id_name: sidebarSponsor
    html: |
      <div class="sponsor-card animated-fadein" style="position: relative;">
        <iframe
          src="https://support.nodeseek.com/page/promotion?id={改为你自己的申请ID号}" 
          style="
            transform: scale(0.9);
            transform-origin: top left;
            border-radius: 8px;
            width: 111.1%;
            height: 250px;
            border: none;
            display: block;
            margin-bottom: -17%;
          "
          scrolling="no"
          loading="lazy"
        ></iframe>
      </div>

显示效果

显示效果

#广告 #建站