摘要

本文是一些对 Handsome 进行美化的过程和效果。

Handsome 美化

typecho写作环境优化 一文中进行了 typecho 写作环境的优化。尽管 typecho 的 handsome 主题显示效果还不错,然而还是有很多观感上的问题,比如黑暗模式的外观,提示框的美化等。接下来对其进行逐个的更改。

其实通过更改 css 即可非常简单的实现样式的变更,不过需要注意的是 css 样式的优先级。如果我们自己加入 css,而不去改 handsome 原有的 css 的话,就有必要进行选择器的精确化(即让选择的元素位于 handsome.min.css 之前)。

然后在 外观设置 -> 自定义输出head 头部的HTML代码 中添加指向自己的 css 的 url 即可。

字体与字号

文章默认字体大小是 14px,比起 Anatolo(15px)、mkdocs-material(16px)看着确实有些小。直接加入以下 css 更改字体大小,同时保持原有左边栏字号不变。

body {
    font-size: 15px;
}

a.auto {
    font-size: 14px;
}

.navi ul.nav li li a {
    font-size: 14px;
}

代码标记调整

code

黑暗模式下的代码标记极其瞎眼,对比度也有问题,需要更改颜色。

如果有进行代码高亮,则有必要从 code 标记中排除所有代码高亮相关的样式,比如

code:not(.hljs):not(.highlight-chroma) {
    padding: 1px 3px;
    font-size: 0.95em;
    white-space: pre-wrap;
    border: 1px solid #e3edf3;
    background: #f7f7f9;
    color: #d14;
    border-radius: 2px;
}

关于 handsome 的黑暗模式:只是在选择器前面加了 html.theme-dark

html.theme-dark code:not(.hljs):not(.highlight-chroma) {
    background-color: #1f1e33;
    border: 1px solid darkgreen;
    color: aquamarine;
}


before

可以看到这边提示的对比度...

before

example code block

after

删除线黑块化

需要鼠标悬浮(移动设备点击)才能显示的删除线文本内容。此效果参考萌百:此效果参考萌百

del:not(.hljs):not(.highlight-chroma) {
    color: rgba(119, 119, 119, 0.9);
    background: #777777;
    border-radius: 6px;
    transition: 0.1s linear;
}

del:not(.hljs):not(.highlight-chroma):hover,
del:not(.hljs):not(.highlight-chroma):active {
    background: initial;
}

当然也可以通过 ::before 或者 ::after 加入更多好玩的东西 你知道的太多了

你知道的太多了

del:not(.hljs):not(.highlight-chroma):hover::after{
    content: "你知道的太多了";
    display: inline-block;
    padding: .1rem .5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
    background: #fff;
    position: absolute;
    top: -1.5em;
    left: -1em;
}

收缩框(Collapse)

原来那个框又肥又难看,现在直接压缩高度,并且添加一个图标。理论上直接为那个标题添加一个 ::before 把图塞进去完事,但实际上事情没有这么简单。

直接为 div.accordion-toggle 添加一个 ::before,发现其定位不对。本来应该根据 div 定位,现在明显是根据整个 html 进行定位,行为如下:

wrong pos

进行一个 STFW1,发现如果要为元素进行 position: absolute 绝对定位,需要将其父元素的 position 属性设置为 relative,否则会出现奇奇怪怪的行为:::before and ::after position absolute acting like position fixed

当然 ::before 也遵循这一规则,所以需要首先将其父元素的 position 属性设置为 relative

div.accordion-toggle {
    position: relative;
}

div.accordion-toggle:before {
    content: "";
    position: absolute;
    /* ... */
}

效果

Some content.

提示框(Admonition)

handsome 提供了一种叫做 [scode] 的短代码样式,可以显示提示框。其中的 type 字段和 size 字段控制生成出的 div 的 class。例如 [scode type="blue" size="simple"] 会生成:

<div class="tip inlineBlock info simple">
</div>

所以我们只需要改这个 div 的样式即可实现自定义。

mkdocs-material 的提示框样式比原来那个鬼样子看着要好看的多。直接进行一个抄。

提示

需要注意的是 mkdocs-material 的提示框(markdown_extensions: - admonition)比 handsome 里面这个破玩意要好看的多,当然也好用的多。这个短代码的生成方式多少有点大病,而且并不想去源码里面堆石山,所以我们暂时只把样式改成一样的就行。

信息

如果 scode 这个东西可以在更改 type 或者 size 到不是他们预定义的枚举,或者能将更多的字段输出到 class 或者 style,那这个事情可能会简单的多。

然而这他喵的并不行。

比如 [scode type="neko" size="cat" meow="nya"] 只能得到一个 <div class="tip inlineBlock info ">,就离谱。还好现在这个样子至少能用


before

after

需要通过 短代码p 标记实现:

<!--  由于短代码位于codeblock内时的一些sb特性,请将&lsqb;手动替换为[  -->
<!--  替换 p class 的 quote 为想要的图标样式  -->
&lsqb;scode type="share" size="simple"]
<p class="admonition-title quote">share</p>
quote
&lsqb;/scode]

样式展示:

blue

abstract

blue

note

blue

info

blue

example

green

tip

green

question

green

success

yellow

warning

red

error

red

failure

red

bug

其他

打赏 替换为 喵一声:

document.querySelector("#support_author > span").innerHTML = "喵一声"

打赏作者 替换为 喵一声

document
    .querySelector("#myModal > div > div > div.modal-header.box-shadow-bottom-normal > h4")
    .innerHTML = "请喵一声"

更多详情可以参考 css 文件。

总结

总体来看,虽然有 php 支持的动态功能,不过这一套东西的可定制性还是一般。特别是如果在不改代码的情况下实现一些特定功能,真是异常困难。不过自从写作体验优化之后,只需要进行数据库推送即可。比起纯静态页面(如 hexo,mkdocs 等)还节省了 ci 部署的麻烦,总的来说优点略大于缺点,暂时先这样了。虽然可以直接推一个静态生成好的页面到数据库里面


  1. Search The F**king Web.
最后修改:2022 年 06 月 20 日
如果觉得我的文章对您有用,请喵一声