Google自动广告脚本需要加到网页 </head> 标签之前，Annhe's Wiki 使用的模板是 20cones，本文记录添加广告及优化的方法。
添加代码
查看模板 main.php ，有以下代码
|
1 2 3 4 5 6 7 8 9 |
<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 代码。
|
1 |
<script data-ad-client="ca-pub-xxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> |
CSS 优化
显示广告之后，20cones 模板的工具按钮位置会被挤到页面底部，不能完整显示，查看 CSS：
|
1 2 3 4 5 6 |
#dokuwiki__pagetools { position: absolute; right: -40px; top: 2em; width: 40px; } |
在 footer.html 中将工具按钮往上移动：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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((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 |
1. https://www.w3school.com.cn/cssref/pr_class_position.asp |
发表回复