WordPress自建博客博主的神器——特色图工具

本人一直热衷于在自己的WordPress博客上分享知识与见解。然而,每当我深入挖掘话题,亦或是倾心撰写文章时,我总是发现,文章的主图——也就是那个特色图,看起来乱糟糟的,无法与我的文章内容或者主题形成良好的呼应。这种情况,让我深感困扰。

于是,我决定动手做出改变,我开发了一个工具,它可以帮助我把上传或粘贴的图标链接地址自动缩放居中,安置在固定尺寸的白色背景特色图上。只需简单的复制和上传至媒体库,一张具有固定样式的文章特色图就诞生了。

特色图工具

自制的特色图在线工具。

这个工具的上方,是获取网站的favicon图标的功能,而在下方,您还可以看到我自定义的一些功能。这些功能都可以按照您的个人喜好进行增删。

通过这个特色图工具,我发现我的博客文章看起来更为整洁,每篇文章的主题图都能更加准确地反映出文章的主题,我觉得,这对于WordPress自建博客的博主来说,简直是必备的神器。

另外推荐几个图标获取站点(国内部分还是要自己找的)

在数字化时代,图标成为了我们生活中不可或缺的一部分。无论是在网页设计、应用开发、演示文稿还是个人项……
2023-07-28
在当今竞争激烈的商业世界中,品牌形象和标识对于企业的重要性不言而喻。而Seeklogo作为一家专注于品牌标……
2023-07-28
在工作中,有时候我们会需要用到一些网站图标,但是浏览器上没有提供直接下载网站图标的方法,想要下载必……
2023-07-31

源码

<!doctype html>
<html lang="zh">

<head>
    <?php get_header(); ?>
    <style>
        #up {
            padding-top: 40px;
        }
        
        body {
            background: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        
        form {
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }
        
        input {
            margin: 0 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        canvas {
            display: block;
            width: 480px;
            height: 300px;
            margin: 10px auto 50px;
            border: none;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        }
        
        footer {
            margin-top: auto;
        }
        
        .content {
            flex: 1;
            /* 让主体内容区域占据剩余空间 */
        }
    </style>
</head>

<body>
    <?php get_template_part('component/body-top'); ?>
    <div id="app">
        <?php
        get_template_part('component/nav-header-pro');
        ?>
            <div class="top-divider"></div>
            <div class="content">


                <form id="up" onsubmit="event.preventDefault(); fetchFavicon();">
                    <input type="text" id="webURL" placeholder="请输入网址获取ico图标" required />
                    <input type="submit" value="提取 Favicon" />
                </form>
                <form>
                    <img id="favicon" />
                    </br>
                    <input type="text" id="faviconLink" placeholder="ico图标地址" readonly />
                </form>
                <form>
                    <div id="dhCode"></div>
                </form>
                <form>
                    <input type="file" id="iconInput" accept=".ico" onchange="displayIcon(event)" />
                    <input type="text" id="iconURL" placeholder="请输入图片链接生成特色图" oninput="fetchIcon()" />
                </form>
                <canvas id="canvas" width="480" height="300"></canvas>


                <script>
                    var canvas = document.getElementById('canvas');
                    var ctx = canvas.getContext('2d');

                    function drawIcon(img) {
                        ctx.fillStyle = "white";
                        ctx.fillRect(0, 0, canvas.width, canvas.height);

                        var scale = Math.min(160 / img.width, 160 / img.height);
                        var x = (canvas.width - img.width * scale) / 2;
                        var y = (canvas.height - img.height * scale) / 2;
                        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
                    }

                    function displayIcon(event) {
                        var img = new Image();
                        img.onload = function() {
                            drawIcon(img);
                        }
                        img.src = URL.createObjectURL(event.target.files[0]);
                    }

                    function fetchIcon() {
                        var img = new Image();
                        img.onload = function() {
                            drawIcon(img);
                        }
                        img.src = document.getElementById('iconURL').value;
                    }
                </script>
                <script>
                    var cors_api_url = 'https://cors-anywhere.herokuapp.com/';

                    function fetchFavicon() {
                        var fullUrl = document.getElementById('webURL').value;
                        var link = new URL(fullUrl).origin + '/favicon.ico';
                        var img = document.getElementById('favicon');
                        img.src = link;
                        document.getElementById('faviconLink').value = link;

                        // 获取网站名称
                        var websiteName = getWebsiteName(fullUrl);

                        // 获取主域名
                        // var mainDomain = getMainDomain(fullUrl);

                        // 生成DH码,并显示在div中
                        var dhCode = '
            
            

' + websiteName + '

'; document.getElementById('dhCode').innerText = dhCode; } // 获取主域名 function getMainDomain(url) { var parsedUrl = new URL(url); var mainDomain = parsedUrl.protocol + '//' + parsedUrl.hostname; return mainDomain; } // 获取网站名称(使用域名中间的部分作为网站名称) function getWebsiteName(url) { var hostname = new URL(url).hostname; var parts = hostname.split('.'); return parts.length >= 2 ? parts[1] : hostname; } </script> </div> </div> </body> </html>

 

网址

特色图工具

自制的特色图在线工具。

版权声明:
作者:Daloong
链接:https://www.daloong.cn/?p=509
来源:This is Daloong's blog
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
WordPress自建博客博主的神器——特色图工具
本人一直热衷于在自己的WordPress博客上分享知识与见解。然而……
<<上一篇
下一篇>>