前言

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

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

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

  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);
}