2021 年 12 月 30 日,我同时注册了 shineve.com 和 shineve.cn 两个域名,前者分配给 WordPress,后者配置给 DokuWiki。

DokuWiki 的默认 logo:

ShinEVE

之后相当长的时间,每次看到 DokuWiki 的 logo,我都想把最后一个字母 E 翻转过来,像李印白先生设计的当代商城 logo 一样:

李印白先生设计的当代商城 logo

如何实现呢?只能问谷歌了,搜索 “CSS 旋转字母”,找到的方案是:transform: rotate(180deg),自己写了个 demo 测试:

<style>
    .leftE {
        display: inline-block;
        transform: rotate(180deg);
   }
</style>
   
<span>ShinEV<span class="leftE">E</span></span>

在本地运行正常,但上到正式环境,最后一个字母 E 的高度总是和其它 6 个字母对不齐!

于是我问 ChatGPT,有没有其它的方案,ChatGPT 给的方法是 transform: scaleX(-1),完美解决对齐问题。

最后就是怎么给 DokuWiki 的添加添加样式。DOM 原生有:

document.getElementById("myDIV").classList.add("mystyle");

但是 DokuWiki 的 logo 代码结构是这样的:

<h1 class="logo">
    <a href="/wiki/doku.php?id=start" accesskey="h" title="Home [h]">
        <img src="/wiki/lib/exe/fetch.php?media=wiki:logo.png" width="1600" height="1600" alt="">
        <span>ShinEVE</span>
    </a>
</h1>

动态添加样式并不容易,既然已经引入 jQuery,不如直接调用 html() 重写 <span>ShinEVE</span>

vim conf/userscript.js
$(".logo span").html('ShinEV<span style="transform:scaleX(-1);">E</span>');

但发现翻转以后,E 又飞了!原来 DokuWiki 默认设置了 logo 的样式:

#dokuwiki__header .logo span {
    display: block;
    padding-top: 10px;
}

重写为 inline-block 就好了:

vim conf/userstyle.css
#dokuwiki__header .logo span {
    display: inline-block !important;
    margin-top: -5px !important;
    font-weight: bolder;
    font-family: sans-serif;
}

测试没问题,最终效果:

ShinEVE New logo

本文除 scaleX 这个知识点以外,还涉及 HMTL 的 inlineblockinline-block,可查阅 MDN 文档进一步学习。

收工。

最后修改:2023 年 11 月 06 日
如果觉得我的文章对你有用,请随意赞赏