关于自适应宽度的问题

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

我之用通过 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>

多谢多谢!

  • 思源笔记

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

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

    20174 引用 • 77870 回帖 • 1 关注
2 操作
RenaEmiya 在 2022-07-18 19:49:33 更新了该帖
RenaEmiya 在 2022-07-15 16:52:24 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 我这里点击标题不会设置宽度,你用默认主题试试。

    3 回复
  • RenaEmiya 1 评论

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

    麻烦 V 姐看看嗷~~

    动画.gif

    html 块里的内容是?
    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 评论

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

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

推荐标签 标签

  • abitmean

    有点意思就行了

    39 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 20 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 8 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 561 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    7030 引用 • 31782 回帖 • 219 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖 • 1 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 9 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    141 引用 • 441 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 128 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • JRebel

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

    26 引用 • 78 回帖 • 623 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖 • 1 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 557 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3169 引用 • 8208 回帖 • 2 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 1 关注
  • GitHub

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

    207 引用 • 2031 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖 • 1 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 354 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 464 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    4 引用 • 91 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • Kotlin

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

    19 引用 • 33 回帖 • 52 关注