关于自适应宽度的问题

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

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

多谢多谢!

  • 思源笔记

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

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

    23025 引用 • 92621 回帖
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 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

推荐标签 标签

  • DNSPod

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

    6 引用 • 26 回帖 • 518 关注
  • danl
    146 关注
  • gRpc
    11 引用 • 9 回帖 • 69 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 189 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    90 引用 • 567 回帖
  • ActiveMQ

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

    19 引用 • 13 回帖 • 668 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖 • 1 关注
  • 国际化

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

    8 引用 • 26 回帖 • 1 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 747 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 101 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    343 引用 • 723 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • 职场

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

    127 引用 • 1706 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 361 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 317 关注
  • App

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

    91 引用 • 384 回帖 • 2 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 209 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1520 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    409 引用 • 1246 回帖 • 587 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • OAuth

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

    36 引用 • 103 回帖 • 17 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 2 关注