前言

Dream 面向所有 Halo 博客用户,不同用户之间对样式不可避免的会有不同的喜好偏差。如果要满足所有人的喜好,则主题不可避免将要有 n+ 个配置项。

为了避免主题包含一堆次要的配置,也为了满足前端样式定制化的需求,主题开放了配置 CSSJavaScript 的方式进行主题定制。

或许有人会考虑直接修改主题代码,但目前该方法目前是不建议的,因为:

  1. 主题的 css / js 代码经过压缩处理;
  2. 升级主题版本后你的修改将会丢失;
  3. 直接修改文件代码将导致 FreeCDN 的功能失效(虽然我一直想换掉这个工具,但是目前还在使用着)。

ftl 文件可直接修改,没有压缩,也不会造成 FreeCDN 使用上的问题,但还是不建议,非必要不修改。

本文的定制化需求都来源于各个博主实际使用的需求摘要记录,感谢各位博主提出的宝贵建议,可前往 GitHub issue 上查看相关的记录 。

1. 移动端侧边抽屉去除博主信息

移动端侧边栏包含了博主信息,Widget 信息模块中也包含了博主信息,造成了信息重复,可能你想去掉侧边栏上的博主信息,那么可在 内嵌 CSS 框中添加如下代码实现。

建议来源:Issue #76 · nineya/halo-theme-dream

ul.navbar-slideout-menu:not(.is-toc,.not-toc) {
    display: none;
}

2. 背景图淡化

背景图太鲜艳了,造成了喧宾夺主的感觉,可对背景图进行淡化处理,在 内嵌 CSS 框中添加如下代码实现。

body:before {
    opacity: 0.5 !important;
}

3. 文章列表摘要行数

默认的文章列表项样式中,摘要是 4 行,想增大或者减少摘要行数?在 内嵌 CSS 框中添加如下代码实现。

.widget.card .main .main-content {
    -webkit-line-clamp: 3;
}

4. 文章内图片隐藏图片名称

文章内嵌图片默认显示图片名称,但是作者可能不想维护图片名称,希望能够隐藏图片名称,在 内嵌 CSS 框中添加如下代码实现。

.main-content .gallery-item p {
    display: none;
}

5. 调整背景透明度

文章、侧边栏等模块的背景颜色和透明度调整,在 内嵌 CSS 框中添加如下代码实现。

html {
  --background2: rgba(255, 255, 255, 0.1);
}
html.night {
  --background2: rgba(40, 44, 52, .1);
}
.section .card {
  background: var(--background2);
}