Google自动广告脚本需要加到网页 </head> 标签之前，Annhe's Wiki 使用的模板是 20cones，本文记录添加广告及优化的方法。
添加代码
查看模板 main.php ，有以下代码
<head>
<meta charset="utf-8" />
<title><?php tpl_pagetitle() ?> [<?php echo strip_tags($conf['title']) ?>]</title>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<?php tpl_metaheaders() ?>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<?php echo tpl_favicon(array('favicon', 'mobile')) ?>
<?php tpl_includeFile('meta.html') ?>
</head>可见模板会引用 meta.html 文件，因此，可以在 meta.html 中引入 Google 自动广告的 Javascript 代码。
<script data-ad-client="ca-pub-xxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>CSS 优化
显示广告之后，20cones 模板的工具按钮位置会被挤到页面底部，不能完整显示，查看 CSS：
#dokuwiki__pagetools {
position: absolute;
right: -40px;
top: 2em;
width: 40px;
}在 footer.html 中将工具按钮往上移动：
<script>
window.onload = function(){
ads = document.querySelectorAll('.google-auto-placed');
if(typeof ads[0] == "undefined") { console.log("google-auto-placed not found!");return 1};
var pre = ads[0].previousSibling;
var next = ads[0].nextSibling;
var up = ads[0].parentNode;
if[1]pre != null && pre.id == "top-tabs") || (next != null && next.id == "top-tabs") || (up != null && up.id == "top-tabs" {
console.log(" auto ad show in top tabs. need to adjust page tool position");
var tool = document.getElementById('dokuwiki__pagetools');
var h = ads[0].offsetHeight;
tool.style.top = "-" + h + "px";
}
// 避免广告出现在导航条内部
if( up != null && up.id == "top-tabs") {
up.removeChild(ads[0]);
up.parentNode.appendChild(ads[0]);
up.style.minHeight = "";
}
};
</script>CSS position
position 属性规定元素的定位类型。最开始的方案将 position 从 absolute 改为 fixed ，但是当缩放或者屏幕大小不一样的时候会出问题。因此改为上一节 footer.html 中用脚本修改 top 值的方式。这里仅记录一下 postion。
可能的值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
可见 absolute 和 fixed 的区别，相对于父元素 和相对于浏览器窗口。
参考资料
1. https://www.w3school.com.cn/cssref/pr_class_position.asp参考资料
| ↑1 | pre != null && pre.id == "top-tabs") || (next != null && next.id == "top-tabs") || (up != null && up.id == "top-tabs" |
|---|
发表回复