MENU

Typecho Theme

2019 年 09 月 10 日 • 默认分类

Mirages

使用这款主题也已经很久了,主题的简约美貌很令人喜爱。但也无法阻挡自己动手DiY的喜好,虽然在上个Wordpress主题中已经动手到自己都觉得难看的地步,但是我还是打算继续常识瞎改。

如下是瞎改手记:

日志

2019-9-16v0.05

  • 给OwO添加了自定义表情
  • 罗小黑破亿啦

::luocat:109::

2019-9-14:

  • 上下页按钮不受ul and ol影响。
  • 首页“阅读全文”按钮动画。

2019-9-13:

  • 中秋节 (Mid-autumn festivals) 快乐🌕
  • 全局字体修改。

2019-9-12:

  • 保持文章标题样式不变。
  • 添加首页大标题样式。
  • 添加漏掉的鼠标指针样式。
  • 添加ulol的动画,以及其他地方的一些小动画。
  • 添加通过js判断手机不显示裙子。

2019-9-10:

  • 修改鼠标指针。
  • 添加页脚裙边,修改相应的css。

ToDo

​ 当然这只是一部分,0基础的我不能够在短时间内将它完全变成我想要的样子,而且随着时间的变化,自己对于美的定义也是会变化的。

  • Live2d!
  • 添加自定义OwO表情
  • “阅读全文”按钮添加动画
  • 首页标题添加一些动画
  • 全局字体
  • 首页标题字体样式
  • ul和ol以及其他的小动画
  • 让裙子在移动端不显示
  • 鼠标指针
  • 优化由其他自定义元素带来的一些影响

详细手记 (扯淡)

自定义表情

该主题大佬选用的是DIYgod的OwO表情,虽然是大佬几年前的作品了,但是现在还是非常多的人在使用的。在使用表情和自己添加表情方面都是非常方便的。

主题的大佬还对OwO的js进行了小小的修改,以方便像我这样的用户 (cai bi) 更加方便的添加自定义表情。并且大佬还有着详细的文档。所以说先找文档是个好习惯,以至于刚开始的我使用了各种操作,才发现原来可以这么的简单。而我们只需要修改一个OwO.json文件就好了,剩下的就是准备好表情包了。

注意,不要修改主题目录/js/OwO.json 文件

大佬的主题还是很用心 () 的,连高分屏下的表情太小都考虑到了。

字段名称使用说明
retinaSuffix高分屏下使用的文件名后缀,例如 _2x.png,如果未准备 @2x 的图片,则和 suffix 字段保持一致
imgClass表情 class,内置的有:smallmiddlemediumlarge,对应不同的表情大小。你也可以自己写 class 来精确的控制表情的展示效果

鼠标

鼠标 (mouse) 是个很经典的东西,它虽然比计算机出生的要晚,但现在我们几乎是离不开它了。鼠标指针的样式早就随着当年的Windows7一起更换主题一起过去了,现在可能很少有人会花时间在换系统鼠标指针主题上浪费时间了。伴随着见到其他鼠标样式除了是其他操作系统之外,那就是在网页上了。

网页上更换鼠标样式并非是非常麻烦的操作,主要通过css就能轻松解决。比较麻烦的是,css可以很方便的定义在不同标签上的鼠标动作样式。

类似于这样:直接调用的是系统默认的样式,然后可以很方便的对动作进行修改。

类型CSS值 描述
Generalauto 浏览器根据当前内容决定指针样式 例如当是内容是文字时使用text样式
defaultdefault.gif默认指针,通常是箭头。
none 无指针被渲染

但要是对于不同标签的鼠标样式都更换为一个其他的鼠标,除了全局样式以外,还要一些特殊的标签进行单独修改。除非每个标签的鼠标动作都是一个样式,那样看上去就会有这膈应的感觉。

所以除了这样一个全局修改之外,

body {
    cursor: url(/images/cursor/normal.png), auto;
}

还要定义很多标签的鼠标样式:

#index a, #index a:link, #index a: {
    cursor: url(/images/cursor/check.png), pointer !important;
}

详细操作

body {
    cursor: url(images/cursor/normal.png), auto;
}
#index a, #index a:link, #index a: {
    cursor: url(images/cursor/check.png), pointer !important;
}
img[data-action="zoom"] {
    cursor: url(images/cursor/check_img.png), pointer !important;
    cursor: url(images/cursor/check_img.png), -webkit-zoom-in !important;
    cursor: url(images/cursor/check_img.png), -moz-zoom-in;
}
p {
    cursor: url(images/cursor/check_text.png), auto;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: url(images/cursor/check.png), pointer;
    text-decoration: underline;
}
code {
    cursor: url(images/cursor/check_text.png), auto;
}
blockquote {
    cursor: url(images/cursor/check_text.png), auto;
}
.post-content .content-tabs .content-tabs-head, .comment-content .content-tabs .content-tabs-head {
    cursor: url(images/cursor/check.png), pointer !important;
}
input[type="checkbox"] {
    cursor: url(images/cursor/normal.png), auto;
}
li {
    cursor: url(images/cursor/check_text.png), auto;
}
li.task-list-item {
    cursor: url(images/cursor/normal.png), pointer !important;
}
#comments .comment-list li.comment-body {
    cursor: url(images/cursor/check.png), pointer !important;
}
#comments a, #comments a:link, #comments a:visited {
    cursor: url(images/cursor/check.png), pointer !important;
}
textarea#textarea {
    cursor: url(images/cursor/check_text.png), auto;
}
#comment-form #submit.button {
    cursor: url(images/cursor/check.png), pointer !important;
}
body.theme-white .OwO .OwO-logo {
    cursor: url(images/cursor/check.png), pointer !important;
}
#comments .comment-mail-me label {
    cursor: url(images/cursor/normal.png), auto;
}
span.toc {
    cursor: url(images/cursor/check.png), pointer !important;
}

footer

​ 今天在footer中看到一个裙子,觉得加载页脚还是挺好看的,于是就正大光明的借过来了。

1568013294503.png

当然光借鉴不学习是不能够有进步的。

当初纯洁 (naive) 的我以为只需要在footer上直接上个背景图,就简单的解决问题了。当然是我想的太简单了。

首先问题的主要是裙边从视觉角度来看是从body衍生了一点到颜色不同的区域footer中。那简单插入一个背景图就不能那么顺利的解决问题了。

那么我们可以使用在footer中,copyright上加一个div,该div并不需要实际在bodyfooter中间,我们是直接在copyright上方创建的这个div,后续使用元素将它的背景图漂移到与copyright和body重叠的区域就可以了。

移动端不显示

其实本来想做自适应的,实在是做不好,也没办法。于是就想到了自己当年在瞎折腾Wordpress的的主题的时候用js修改过一个移动端不显示live2d的操作。把它直接应用到这里绝对是没有任何问题的,并且当前主题也有jQuery。

其实就是一个非常简单的if语句,检测屏幕宽度,达到一定值时利用js修改dresswrap这个两个标签的css样式,修改的感觉不到它们的存在就ok了。

<script type="text/javascript">
        if (screen && screen.width > 480) {
            
    }
                else {
                document.getElementById("dress").style.height = "0px";
                document.getElementById("wrap").style.padding = "0";
            }
</script>

如何漂移

这是对于我一个几乎没有前端知识入门玩家的很大的问题,css有超多种玩法,让一个div带着背景漂移当然是一个很简单的事情。在借鉴大佬的成果下, 自己研究了一下:在给予height值后,使用position配合bottom就能轻松漂移到copyright的上方。

bottom的效果取决于元素的position属性:

  • position设置为absolutefixed时,bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。
  • position设置为relative时,bottom属性指定了元素的下边界离开其正常位置的偏移。
  • position设置为sticky时,如果元素在viewport里面,bottom属性的效果和position为relative等同;如果元素在viewport外面,bottom属性的效果和position为fixed等同。
  • position设置为static时,bottom属性无效。

详细操作:

添加一个在footer中的div,并赋予以下css值

background: url(/images/footer.png) no-repeat 50%;
height: 360px;
z-index: 100;
position: absolute;
bottom: 1px;
width: 100%;
pointer-events: none;

background no-repeat :背景不重复

height:设定高度

z-index:对于一个已经定位的元素(即position属性值不是static的元素),z-index 属性指定元素在当前堆叠上下文中的堆叠层级

position:用于指定一个元素在文档中的定位方式

bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移,非定位元素设置此属性无效

width:宽度

pointer-events:指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

旧方法中,漂移的方法是新添加一个div,并且直接添加一个白色的背景色。当时没有考虑到主题会变化背景色,当到晚上时,会变化一个纯黑的背景,而中间有个横条是白色的,很是难受。

后来发现一个简单的方法,直接在body中添加padding向下的间距就可以了,并且body是整个背景一起变色的,这样就很简单的解决问题了。

padding: 0 0 13rem 0;

旧方法

当然,如果直接漂移,可能会与body中的内容重叠,就如下效果。直接导致了遮住了主题中的文字。所以为了防止body被遮住,我们还需要再body的下方再创建一个div用来给我们的背景图“漂移”。

1568014548234.png

并且背景使用和body一样的颜色,给人从视觉上感觉裙边是衍生到下面的copyright上的。

操作:

在上述div上方添加一个div并赋予以下css

padding: 6.6rem;
background: white;

其他记录:

<div id="dup"></div>
<div id="dress"></div>

更新主题

自家用

无论是怎么修改主题到自己想要的样子,但是最终开发的人不是我,目前也没有能力继续把一个主题维护下去。所以更新是必不可免的,但是更新主题必然会遇到个问题,主题不过是几个单个文件,自己修改就是在修改这些文件,而这些单个文件是不能够增量更新的,既然自己手动修改过了,那么新版本的主题必将覆盖我自己所修改的一些地方。每次遇到的问题都是忘记自己到底在哪里瞎改了,更新完了之后各种问题。

所以决定动了哪些文件还是记一下吧。

  • header.php:/usr/themes/Mirages/component

    • 使文章标题保持不变:<h1 class="blog-title-post">
  • footer.php:/usr/themes/Mirages/component

    • 页脚裙边:<div id="dress"></div>
  • xfy.css

    • 主要的自定义样式
最后编辑于: 2019 年 10 月 12 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

已有 10 条评论
  1. 真是折腾不停歇啊~

    1. @后宫学长瞎折腾2333#(装大款)

  2. 表情测试::luocat:125::

  3. @(滑稽)怎么感觉表情加载有点慢,是我网络太辣鸡了吗

    1. @Zero是因为我的表情是在我的1M辣鸡服务器上的,没用cdn的::luocat:74::

  4. 小伙汁,你的签名我很喜欢::luocat:86::

    1. @heroyf(/ω\)

  5. 细节很到位 支持一下。

  6. 今天也想改一下主题字体,突然想到有个邻居改过,又回来翻阅一番,发现字体的教程没有写~~

    1. @Mark偷懒嘿嘿::luocat:84::