惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cyberwarzone
Cyberwarzone
F
Full Disclosure
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
有赞技术团队
有赞技术团队
J
Java Code Geeks
博客园 - 【当耐特】
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 叶小钗
L
LINUX DO - 最新话题
T
Threatpost
S
SegmentFault 最新的问题
Vercel News
Vercel News
云风的 BLOG
云风的 BLOG
C
Cyber Attacks, Cyber Crime and Cyber Security
Google DeepMind News
Google DeepMind News
Know Your Adversary
Know Your Adversary
S
Schneier on Security
V
Vulnerabilities – Threatpost
D
DataBreaches.Net
G
GRAHAM CLULEY
Latest news
Latest news
P
Privacy International News Feed
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
Scott Helme
Scott Helme
L
Lohrmann on Cybersecurity
T
The Exploit Database - CXSecurity.com
Security Latest
Security Latest
G
Google Developers Blog
L
LangChain Blog
MyScale Blog
MyScale Blog
Project Zero
Project Zero
N
News and Events Feed by Topic
Hacker News - Newest:
Hacker News - Newest: "LLM"
大猫的无限游戏
大猫的无限游戏
P
Proofpoint News Feed
Blog — PlanetScale
Blog — PlanetScale
阮一峰的网络日志
阮一峰的网络日志
N
News | PayPal Newsroom
www.infosecurity-magazine.com
www.infosecurity-magazine.com
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
SecWiki News
SecWiki News
T
Tor Project blog
C
Check Point Blog
Google Online Security Blog
Google Online Security Blog
GbyAI
GbyAI
The Last Watchdog
The Last Watchdog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
WordPress大学
WordPress大学

mephisto.cc

修复rime-ice无法弹出候选框的问题 开机滚动字体显示优化 个人网站安全防护 树莓派上部署Vaultwarden 使用goaccess实时分析Caddy日志 个人网站监控 Hugo全站AVIF记 Linux下尝试使用Godot开发小游戏 Arch linux dae 透明代理 Airflow接管galler-dl下载任务 如何使用gallery-dl批量下载图像 Arch核显下如何愉快玩Dota2和CS2 Arch/labwc 环境网络相关设置 Rime添加dota2词库 Arch 重装记录 Supertuxkart iOS版终于发布了 打造自己的流媒体音乐服务 剪切板管理工具clipcat推荐 MangoHud性能监控 微信小程序开发记 Rofi试用 解决Arch下VSCode无法输入中文的问题 独立窗口管理器下无法录屏问题处理 上海市二手房成交数据监控 OpenLDAP监控 Arch linux如何顺畅连接蓝牙设备 使用Git和Ansible管理配置文件 Arch Linux SSL VPN 客户端配置 简单获取celery任务实时结果 Arch linux下iNode客户端的安装和使用方法 券商费率调整记 迷你主机组装记 Labwc更换定制皮肤 树莓派跑分流代理 实用自动代理配置示例 九年老鼠标复活记 Openvpn示例 Mac下如何旋转webp图片 如何隐藏Vscode中Markdown PDF插件的头部内容 解决Linux下网络配置无法变更保存的问题 labwc环境启用wlogout Ubuntu下新官方微信尝鲜 简单检测用户是否开启广告屏蔽 Atuin ZFS下卡顿问题解决 Wine安装64位微信 Fish 和 Atuin使用记 Fastapi简单实现临时下载链接 Fastapi微信公众号开发简要 Hugo根据语种展示不同内容 如何修复Waybar微信图标错误 信封加密简要 Linux环境下维护公众号记录 快速隐藏和呼出终端 Wayland环境自动切换壁纸 SuperTuxKart 试玩 简单抓取雪球股票快讯 为什么你的kill命令不能列出信号表 Wine安装微信保姆教程 Hysteria科学上网简要 Ubuntu 23.10 钉钉无法启动解决方法 网站导航栏防止插入Adsense自动广告 Linux环境按键检测 Hugo文末添加最后修改时间 Wayland环境ksnip无法复制问题解决 我眼中的股票市场 Caddy简单图片防盗链 greetd和regreet使用教程 Wayland环境下截图加后期修改 Wayland 环境下gif录屏 Firefox的一些有趣功能 Ubuntu 切换系统语言 Firefox 标题栏高度调整 网站添加回到顶部功能 Hugo自定义字体 Labwc 便捷配置 Wofi使用教程 窗口管理器labwc使用记 文件共享软件Dufs推荐 Fcitx5配置详解 Ubuntu安装chrome的方法总结 一种Xterm.js的全屏方案 Google网址收录api Python示例 手机听离线音乐 Snipe it资产导入 应用启动器yofi使用配置 Snipe it资产管理系统安装使用 Ubuntu开机启动加速 Vue3 vite TypeScript跨域等相关设置 Ubuntu手动升级Libreoffice Ubuntu设置alacritty为默认终端 简体文章批量转换为繁体 使用Inkscape调整svg图片大小 实用命令 使用mitmproxy给手机app抓包 Python中rstrip方法细解 Github同主机多仓库部署deploy key问题处理 Linux安装最新版本Python KeePassXC使用教程 Ubuntu 22.10连接蓝牙耳机报错br-connection-profile-unavailable解决方法 Caddy日志配置轮转和格式化
Hugo静态站点接入Adsense广告
2023-05-08 · via mephisto.cc

Hugo 生成的静态站点要接入 Google Adsense 广告,方法如下:

接入全站自动广告

Adsense 广告分为全站广告(By site)和单元广告(By ad unit)。

如果想简单接入,不定制广告的类型,建议接入全站自动广告,不操心,完全信任 Google

Adsense by site
  • 先去 Adsense 后台,把自动展示广告的代码复制到

    /xxx/layouts/partials/google/ads.html

xxx 是你网站的根目录,ads.html 是定义的文件名,里面粘贴上自动广告代码。 放在这个路径下,好处是:万一某一天你需要换个 theme,文件还在,完全不受影响。 形如:

1<script
2  async
3  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
4  crossorigin="anonymous"
5></script>

根据 Google 要求,广告代码是要放到 <head></head> 标签间的。

所以需要放在 themes 的相关地方,比如我使用的这个皮肤(每种皮肤路径不一定相同,要自己琢磨下),路径为:

xxx/themes/hugo-clarity/layouts/partials/head.html
hugo themes header

ads 为上面 ads.html 的文件名:

1<!-- ads -->
2{{ partial "google/ads" . }}

这样全站自动广告就接入完成了,Adsense 会自动处理剩下的事情,包括在哪些页面的什么位置展示什么样的广告,还是很方便的。

接入自定义广告单元

人们总是喜欢自定义,By site 广告和 By ad unit 并不冲突。不完全信任 Google 也没错,比如你写的某个文章,你认为在 A 位置插入广告非常合适,B 位置就不行,此时自定义单元广告就派上用场啦。这个时候 Google 自动分配广告的算法不一定行。

  • 按照 Adsense 指引,创建 4 种自定义广告单元
adsense unit types
  • 每种广告单元对应创建一个 hugo shortcodes

    类似全站自动广告,把对应的广告单元代码分别放到 shortcodes 文件中。点图示地方获取单元广告代码

    get unit code

    复制后,粘贴到对应文件中,如下图所示:

    hugo adsense shortcodes-adsense
  • 在 content 的 md 文件中引入对应的 shotcodes

    例如, 文章开头添加广告

    md-call-header.webp

    文章末尾添加广告

    md-call-footer.webp

    当然文章中间也可以添加,每种广告单元适合的位置不一样,名字按照自己喜好取。

    这样,自定义广告单元也设置好了,可能别人有更加方便的方式,个人觉得不频繁变动也够用。

    只是挨个文章添加广告有点费力,也许这就是自定义的乐趣,通常我给文章开头一个 adsense-header, 结尾一个 adsense-footer,中间看情况给一个 adsense-emb。再多用户不高兴,Google 也不答应,要考虑下用户体验。

接入自定义信息流广告

自定义信息流广告接入有门槛和特殊要求,一定要放到 feed 中才行,值得单独说下。所谓 feed 流可以简单想象为一个 for 循环,比如本站的首页,有 N 个文章简介块组成,信息流广告模仿你文章块的样式,提供更好的用户体验,在用户浏览的时候自然出现,与网站的外观和风浑然一体,非常适合移动设备,好比生物世界的保护色和拟态^_^

下面介绍接入过程

  • 先找到循环所在的模板

我是通过网页源码定位,通过搜索 css 类关键字找到的,每个 hugo theme 的 feed 流模板位置不一样。hugo-clarity 的位置。

xxx/themes/hugo-clarity/layouts/partials/archive.html

  • 修改信息流模板文件
hugo feed
1     {{- range $pageindex,$pagevalue := (.Paginate $pages).Pages }}
2      {{if and ($pageindex) (modBool $pageindex 3)}}
3      <!-- ads feed -->
4      {{ partial "google/adsense-feed" . }}
5      {{end}}
6      ...此处省略其它代码块
7     {{end}}

代码解释,range 后接入数组,$pageindex, $pagevalue 分别为 index,value,if 判断 index 为真 且 对 3 取模运算后为真。假设每页 10 个文章,3、6、9 的地方都会插入 feed 流广告。modBool 这个模板函数 index 为 0 的时候也为真,所以要排除下,不然用户看到的第一个就是广告,还怎么伪装 🥸。当然用户也可以更改 3 为其它数字,看自己意愿要展示多少广告,多了影响用户体验和网站性能。

至于这个 adsense-feed.html 模板文件放在什么位置,参考全站广告接入部分。

综上所述,全站自动广告 和 自定义广告分别用在不同场景下,也可以结合使用,各取所长。