关于自适应宽度的问题

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

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

多谢多谢!

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
  • 其他回帖
  • 我这里点击标题不会设置宽度,你用默认主题试试。

    3 回复
  • RenaEmiya 1 评论

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

    麻烦 V 姐看看嗷~~

    动画.gif

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

推荐标签 标签

  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 155 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 25 关注
  • NGINX

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

    311 引用 • 546 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 155 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 328 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • 星云链

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

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

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

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

    30 引用 • 218 回帖 • 629 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 672 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    26 引用 • 84 回帖 • 2 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 510 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 245 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖