让我们来给掘金贴上【新春对联】，文末提供油猴脚本

Ijiran
827 阅读2分钟

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

春节即将到来，给掘金网站贴个对联，对联式广告在现如今的各种网站中很多，看完了这篇文章，你就会知道那些广告位虽然挺贵，但是实现起来并不复杂。

就比如起点中的广告，看了好多年的小说，小说在不停的换，广告也在不停的换，唯有广告位屹立不倒。

话不多说，开始实现，最后我会将这个代码输出成一个油猴脚本，并且放到github上，大家可以自行去查看，安装，大家可以多多指点，或者帮忙完善项目。

本次所用到的代码（不多就四五行）

<div id="juejin-duilian-left" style="position: fixed;left:0%;bottom: 26%;z-index: 999;width: 70px;text-align: center;">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px;font-family: STXingkai;">百年天地回元气</span>
</div>

<div id="juejin-duilian-right" style="position: fixed;right:0%;bottom: 26%;z-index: 999;width: 70px;text-align: center;">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px; font-family: STXingkai;">一统山河际太平</span>
</div>

调试对联位置，一左一右

我们需要调试一下对联摆放的位置，将我们准备好的代码直接通过F12强行塞进去，如图：

image.png

我这里通过调整bottom属性来调整上下的位置，其实是可以做一个垂直居中的，之后再完善完善。

通过这些代码的增加，我们就能在页面上看到如下图的效果了。

image.png

字体我本次选择的是华为行书，对联嘛，自然是飘逸一些的好。

给对联弄一个背景图

写完对联，就要给对联弄个背景图，年关将至，换个喜庆点的背景。

随便找了个图片当做背景，（这里白嫖一下掘金的云图库，哈哈哈），给代码设置一个背景图属性。

如下：

<div id="juejin-duilian-left" style="position: fixed;left:0%;bottom: 26%;z-index: 999;width: 70px;text-align: center; background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a788ebf3e0d34af4a90c3968d40282a8~tplv-k3u1fbpfcp-watermark.image');">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px;font-family: STXingkai;">百年天地回元气</span>
</div>

<div id="juejin-duilian-right" style="position: fixed;right:0%;bottom: 26%;z-index: 999;width: 70px;text-align: center;background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a788ebf3e0d34af4a90c3968d40282a8~tplv-k3u1fbpfcp-watermark.image');">
    <span class="writing-mode: vertical-rl;" style="font-size: 36px; font-family: STXingkai;">一统山河际太平</span>
</div>

自此，我们就得到了第一版的效果啦。

image.png

优化完善一下，去直接搞一个比较好看的对联

直接搞一个比较好看的对联，将图片直接赋予在div中。

上联.png

下联.png

代码：

<div id="juejin-duilian-left" style="position: fixed;left:0%;bottom: 26%;z-index: 999;">
    <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/510788335a224e45b4f694e23dcb3e6f~tplv-k3u1fbpfcp-watermark.image" alt="" style="width: 90px;">
</div>

<div id="juejin-duilian-right" style="position: fixed;right:0%;bottom: 26%;z-index: 999;">
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/586b5188c665414a8088b6b7450aa6fa~tplv-k3u1fbpfcp-watermark.image" alt="" style="width: 90px;">
</div>

最后效果：

image.png

期间遇到一个问题

因为代码直接填充在body下面会导致掘金在切换网页时失效，所以找了几个位置进行填充，最后还是放在了底部div中。

输出成油猴脚本

油猴脚本就简单弄了一下，没有太深入研究，有点粗糙，大家见谅。

跟大家分享一下脚本代码，可以自行添加到油猴中去。也可以去github中下载，顺便给个start什么的最好啦，谢谢大家。

// ==UserScript==
// @name         Juejin 春节新装
// @name:zh-CN   掘金春节换装
// @namespace    https://github.com/Ijiran/pxyz-script
// @version      0.1
// @description  Juejin
// @description:zh-CN   给掘金网站换上新装，贴上两幅对联
// @author       curly brackets
// @match        https://juejin.cn/*
// @license      MIT License
// @grant        none
// @run-at       document-end
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @require    http://code.jquery.com/jquery-1.11.0.min.js
// ==/UserScript==

(function() {
    'use strict';

    $(document).ready(function () {
         var duilianHtml = "<div id=\"juejin-duilian-left\" style=\"position: fixed;left:0%;bottom: 26%;z-index: 999;\">\n" +
                "    <img src=\"https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/510788335a224e45b4f694e23dcb3e6f~tplv-k3u1fbpfcp-watermark.image\" alt=\"\" style=\"width: 90px;\">\n" +
                "</div>\n" +
                "\n" +
                "<div id=\"juejin-duilian-right\" style=\"position: fixed;right:0%;bottom: 26%;z-index: 999;\">\n" +
                "    <img src=\"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/586b5188c665414a8088b6b7450aa6fa~tplv-k3u1fbpfcp-watermark.image\" alt=\"\" style=\"width: 90px;\">\n" +
                "</div>";

    $(".global-component-box").append(duilianHtml);
    })

})();

欢迎大家指正，点赞，评论。

avatar
文章
阅读
粉丝