自定义样式

Kenshin edited this page Sep 6, 2018 · 26 revisions

此功能最低要求 1.0.2 版本,如低于此版本,请升级 到最新版本。


一览(动图)

http://ojec5ddd5.bkt.clouddn.com/custom%20theme.gif

入口

Imgur

界面说明

Imgur

优先级

简悦跟 CSS 有关的地方共有两处:

  • 阅读模式中的 主题 字体样式 字体大小 版面布局
  • 选项页 → 高级设定 → 自定义样式

优先级的顺序:(高 → 底)

  • 自定义 CSS;(上图 ① 所示)
  • 全局、标题与描述、正文、代码段(上图 ② 所示)
  • 阅读模式中的 主题 字体样式 字体大小 版面布局

图示:
Imgur

简悦 HTML 标签说明

Class 说明

  • .simpread-font
    定义阅读模式的字体样式,如:
.simpread-font {
    font: 300 16px/1.8 -apple-system,PingFang SC,Microsoft Yahei,Lantinghei SC,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  • simpread-theme-root
    用来描述主题的 背景色字体颜色,如:
.simpread-theme-root {
    background-color: #fff;
    color: #555;
}

HTML Tag 说明(普通页面)

  • sr-read
    阅读模式的根节点

  • sr-rd-title
    标题

  • sr-rd-desc
    描述

  • sr-rd-content
    正文

  • sr-rd-footer
    页脚

图示(普通页面)

Imgur

HTML Tag 说明(论坛类面)

  • sr-rd-mult
    每段内容的根节点

  • sr-rd-mult-avatar
    头像

  • sr-rd-mult-content
    每段内容的正文

HTML Tag 说明(分页面)

  • sr-page
    分页的根节点

图示(论坛类页面 与 分页)

Imgur

如何自定义

一般情况下,只需要在 高级设定自定义样式自定义 CSS 段覆盖除 .simpread-font 以外的上述内容,即可。

提交你的样式

https://github.com/Kenshin/simpread/issues/71

无法更新阅读模式的:主题、字体样式、字体大小、版面布局

当遇到如图的请看时,则发生了无法设定的问题。

Imgur

  • 自定义样式 中包含了对应的设置,则无法使用 主题 字体样式 字体大小 版面布局
  • 如果想要使用 主题 字体样式 字体大小 版面布局 则需要删除相关项;
  • 详细请看 优先级关系

对应项的代码如下:

    switch( type ) {
        case "layout":
        case "margin":
            return styles.global.marginLeft != "" || styles.css != "";
        case "fontsize":
            return styles.title.fontSize != "" ||
                   styles.desc.fontSize != ""  ||
                   styles.art.fontSize != ""   ||
                   styles.css != "";
        case "fontfamily":
            return styles.global.fontFamily != "" || styles.css != "";
        case "theme":
            return styles.css.search( "simpread-theme-root" ) != -1;
    }
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.