跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 关于 typora 的显示优化问题
未分類
23 1 月 2021

关于 typora 的显示优化问题

关于 typora 的显示优化问题

資深大佬 : JCZ2MkKb5S8ZX9pq 6

关于 typora 的显示优化问题

前置说明

  • 用了一个 css 样式,让标题显示数字层级。
  • 习惯文件标题用一级标题,也就是文章内容的标题默认是二级标题。

需求

  • 想要清晰地看清文章结构(大纲视图)。
  • 希望左侧大纲保持展开。

问题点

  • 大纲模式只认标题。且不认列表内的标题。

  • 用标题模式来写(即上半部份的写法)。

    • 因为各级标题的大小区分并不明显,不易区分各级标题。虽然可以用 css 去指定颜色区别,但感觉也不够明显。希望有整个标题下属内容,一起缩进的显示。类似代码编辑器括号内{}的效果。子内容缩进个四格。
    • 另一个问题是标题模式下,调整层级不便。比如一个三级标题下有若干个四级标题,我如果想把三级升二级去掉一个#就可以了,但下属的所有四级标题也都要改一遍。如果是列表模式,只要一起框选去掉一级缩进就好了。
    • 标题模式还有一个问题是层级有限制。
  • 用列表模式(下半部分)

    • 有缩进层级。但无法在大纲视图显示。如果内文内容量大,还是需要大纲视图。
  • 跟思维导图软件的互通

    • xmind 之类的大部分用的都是标题模式来划分层级。幕布用的好像是列表模式。

请问

  • 有什么 app 能更好地满足编辑同时查看大纲的需求。
  • 如果还是用 typora,那么为了大纲,还是考虑用标题模式。那么标题模式下 css 有没有可能实现下属内容的分级缩进?因为列表本身是嵌套的,css 比较好写。标题模式没想好怎么写。
  • 编辑时左侧大纲有时会自动缩起来( mac 版),有办法让它保持展开嘛?
大佬有話說 (4)

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    @old9 大佬麻烦看一眼这个。

    简单写了一个缩进,但是遇到点问题。

    h2 {
    margin-left: 0rem !important
    }
    h2~* {
    margin-left: 0rem;
    }

    h3 {
    margin-left: 1rem !important
    }
    h3~* {
    margin-left: 1rem;
    }

    h4 {
    margin-left: 2rem !important
    }
    h4~* {
    margin-left: 2rem;
    }

    h5 {
    margin-left: 3rem !important
    }
    h5~* {
    margin-left: 3rem;
    }

    h6 {
    margin-left: 4rem !important
    }
    h6~* {
    margin-left: 4rem;
    }

    ———-

    这样大致上可用,如果文章结构正常按层级来问题不大。
    但遇到的问题是,有些情况下缩进错误。效果见图

    https://s3.ax1x.com/2021/01/31/yVuRkq.png

    比如:

    ## 2. 二级标题
    ### 2.1 四级标题
    ## 3. 二级标题
    正文

    在这样的结构下,期望是 [3. 二级标题] 后面的正文跟随
    h2~* {
    margin-left: 0rem;
    }
    这个属性。但是会被后面
    h3~* {
    margin-left: 1rem;
    }
    这个属性给覆盖掉。
    极端情况下,比如上面如果出现一个 h6,那后面不管 h 几下面就都缩进 4rem 了。
    请问有没有什么好的方法。

    另外 typora 自动计数这个也是第一次看到,不知道有否有类似的原理可以利用。打断一下继承啥的
    https://support.typora.io/Auto-Numbering/

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    比如有没有写法是
    h2~*:not(h3,h4,h5,h6)
    h3~*:not(h2,h4,h5,h6)
    ……

    类似这种效果的?请问有这种的嘛? @old9

  • 資深大佬 : old9

    就是扁平的 HTML 结构,然后希望 CSS 写出嵌套的缩进效果是吧?这个好像没什么好方法……或者上 JS

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    @old9 嗯,是没想到啥好方法。
    它 css 是作为 theme 载入的,对 js 没啥太好的支持。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具