关于自适应宽度的问题

本贴最后更新于 619 天前,其中的信息可能已经天翻地覆

我之用通过 html 块来实现某个页面的宽度控制

现在的自适应宽度,一方面并不能达到我想要的指定宽度

另一方面,不管是开启还是关闭,点一下标题或者切换一下页签,都会重置宽度

好像是重新读了一些 css 文件里的宽度设置部分,导致 html 块里的宽度设置无效

想说能不能改一下这个自适应宽度的实现方式,当这个功能关闭的时候(就是目前的自适应宽度这个按钮开启的时候),就和老版本一样就好,不要在点击标题或者换页签时刷新宽度的设置

动画.gif

这是我用的 html 块,如果可以修改这部分代码实现固定宽度的功能也可以~~

<p style="color: rgba(135,135,135,0.2)" align="right"> page width</p>
<script>
setTimeout(function(){
    let PageChangeNode=document.querySelector('.protyle-content [data-node-id="20220419092315-fvi1knp"]').parentNode
    PageChangeNode.querySelector('.protyle-wysiwyg').style.width="34cm";
    PageChangeNode.querySelector('.protyle-title').style.width="34cm";
},2000)
</script>

多谢多谢!

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18131 引用 • 66889 回帖
2 操作
RenaEmiya 在 2022-07-18 19:49:33 更新了该帖
RenaEmiya 在 2022-07-15 16:52:24 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • RenaEmiya 1 评论

    后来我用自定义 css 解决啦,就在 css 里对特定页面重新设置一下宽度就好

    /* 临时使用,特定页面宽度设置 */
    .protyle-background[data-node-id='20220211193134-47owli3'] ~ .protyle-title,
    .protyle-background[data-node-id='20220211193134-47owli3'] ~ .protyle-wysiwyg{
        width:  36cm !important;
    }
    
    这是最简单的方法,我居然没想到 🤦‍♀️
    Vanessa
  • 其他回帖
  • RenaEmiya 4 评论

    html 块里的内容是这样的

    <p style="color: rgba(135,135,135,0.2)" align="right"> page width</p>
    <script>
    setTimeout(function(){
        let PageChangeNode=document.querySelector('.protyle-content [data-node-id="20220419092315-fvi1knp"]').parentNode
        PageChangeNode.querySelector('.protyle-wysiwyg').style.width="34cm";
        PageChangeNode.querySelector('.protyle-title').style.width="34cm";
    },2000)
    </script>
    
    

    其中[data-node-id="20220419092315-fvi1knp"]的 id 是 html 块所在文档块的 id

    在 2.0.26 之前,我通过这个 html 块来控制页面宽度,现在每次碰标题或者打开文档树都会重置为初始宽度~

    我这个需求是有点特殊,谢谢 V 姐啦~~

    1 操作
    RenaEmiya 在 2022-07-18 19:49:52 更新了该回帖
    试试这个 PageChangeNode.querySelector('.protyle-wysiwyg > div:first-child').style.width="34cm";
    Vanessa
    @Vanessa 唔 这样的话,我这里是改了文档里第一个块的宽度,不是文档页面的宽度~
    RenaEmiya
    @1995hanjian 第一个宽度也会把文档撑开的,不行你再看看修改其他 dom。protyle-wysiwyg 这个的宽度我会修改
    Vanessa
    @Vanessa 嗯嗯 我再试试,谢谢 V 姐嗷
    RenaEmiya
  • RenaEmiya 1 评论

    谢谢 V 姐回复嗷~~我又用默认主题测试了一下,点击标题或者 alt+1 唤出文档树还是会重置这个 html 块里的宽度设置~~

    麻烦 V 姐看看嗷~~

    动画.gif

    html 块里的内容是?
    Vanessa
  • 我这里点击标题不会设置宽度,你用默认主题试试。

    3 回复

推荐标签 标签

  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 1 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 457 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    126 引用 • 1699 回帖
  • Sillot

    Sillot (汐洛)孵化自思源笔记,致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点
    Github 地址:https://github.com/Hi-Windom/Sillot

    12 引用 • 26 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 8 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 594 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    169 引用 • 799 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 618 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 6 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 286 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 444 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 57 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    207 引用 • 2031 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 591 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    273 引用 • 676 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 9 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 496 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 20 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖