前言

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

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

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

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

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

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

移动端定制

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

建议来源:https://github.com/nineya/halo-theme-dream/issues/76

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

背景图淡化

背景图太鲜艳了,造成了喧宾夺主的感觉,可对背景图进行淡化处理。

body:before {
    opacity: 0.5 !important;
}