DokuWiki使用Google自动广告

Google自动广告脚本需要加到网页 </head> 标签之前,Annhe's Wiki 使用的模板是 20cones,本文记录添加广告及优化的方法。

添加代码

查看模板 main.php ,有以下代码

可见模板会引用 meta.html 文件,因此,可以在 meta.html 中引入 Google 自动广告的 Javascript 代码。

CSS 优化

显示广告之后,20cones 模板的工具按钮位置会被挤到页面底部,不能完整显示,查看 CSS:

footer.html 中将工具按钮往上移动:

CSS position

position 属性规定元素的定位类型。最开始的方案将 positionabsolute 改为 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 属性的值。

可见 absolutefixed 的区别,相对于父元素 和相对于浏览器窗口

参考资料

请勿全文转载,部分引用请注明出处。
本文链接地址: https://www.annhe.net/article-3874.html
博客能带货吗

发表评论

电子邮件地址不会被公开。 必填项已用*标注