学习笔记

制作可变logo教程

XG.孤梦博主大佬

2023-06-12

1 评论

2,159 阅读

1285 个字

百度已收录

06/12

本文最后更新于 2023年06月21日，已超过 634天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

前言

使用joe主题的人应该都知道主题logo会随主题的明暗模式进行变换，那么这个是怎么实现的呢？其实这个有两种方法。

替换文件法

这个方法通常运用在图片（位图图像）通过在明暗模式切换的js代码中添加logo的文件路径替换，达到两张图片的切换效果。

矢量图编辑法

有学习过设计美术方面的或者使用过 Adobe Illustrator、Corel Draw 的人，应该都知道矢量图，有一个非常好的特性就是图像可以无限级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果，而位图缩放和旋转容易失真，这个是这么实现的呢，其实你可以下载一个纯矢量图文件文件格式通常以 .svg 结尾，右键以文本编辑器或者记事本方式打开然后，你就会看见一大段类似坐标点一样的代码（数学向量），就是因为这些坐标一样的数学向量组成了一张图像，所以矢量图可以使用css或者js对其就行编辑，从而达到图像变换的效果。

位图与矢量图比较

图像类型	组成	优点	缺点	常用制作工具
点阵图像（位图）	像素	只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象	缩放和旋转容易失真，同时文件容量较大	Photo Shop、画图等
矢量图像	数学向量	文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真	不易制作色彩变化太多的图象	AdobeIllustrator、Flash、CorelDraw等

两种方法根据自己需要与实际需求自行选择

教程开始

方法一

准备

两张不同效果的logo图片（最好是透明镂空效果最佳）
制作或者修改图片软件推荐使用 Photo Shop

制作图片

使用PS打开需要编辑的图片，根据自己需求设计，关于PS（Photo Shop）教程可自行去B站搜索相关教程这里就不过多赘述，就教一个简单的图片镂空，关于镂空不懂PS的小白可以使用AI自动抠图将图片镂空，当然效果可能不是很理想。

一、编辑图片

用PS（Photo Shop）打开图片，这里拿老米的logo举例（如有侵权联系进行删除）

在左边工具栏选择魔棒工具，然后点击logo图片的白色区域，如果图片背景比较复杂可以修改上面菜单栏的容差与勾选上连续一点一点选取。

选取后点击删除键即可删除白色背景

然后保存为以 .png 结尾的图片文件格式

图片就制作到这里，然后上传图片到服务器文件夹里

二、代码部分
明暗模式的js代码在主题文件夹的 /assets/js/joe.config.js 文件夹里

logo的代码在主题文件目录下的 /public/header.php 文件里

使用合适的js替换代码将logo的图片地址替换即可，方法很多比如最常见的获取img图片对象的id，然后使用setAttribute()方法重新设置该id对象的src属性的值即可

例子


 <!--图片代码 -->
    <img id="img" src="img/logo.png" width="50"  height="50"/>

 <!--切换按钮代码 -->
    <button onclick="myFunction()">更改logo图片</button>

 <!--js代码 -->
    <script>
    function myFunction() {
        var img=document.getElementById("img");
        img.setAttribute("src","img/4.jpg");
            }
    </script>