登录 注册

编辑区域宽度设置

本贴最后更新于 1178 天前，其中的信息可能已经渤澥桑田

版本 v1.2.31 不能进行编辑区域的宽度设置，没有找到对应选项。宽度不能锁定，在复杂应用场景（不同分辨率、拖动/开关侧边副栏宽度）切换时，影响排版美观度，希望予以解决。

  • 思源笔记

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

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

    22026 引用 • 87851 回帖 • 4 关注
  • Q&A

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

    7938 引用 • 36313 回帖 • 167 关注
北京 位置
20 悬赏
1 收藏
6 回帖
2
2
441 95 40 153 10 10 133

相关帖子

6 回帖
编辑区域宽度设置

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 • • 2
    订阅者 先知

    +1，我真的为了调整宽度，折腾了好久，改到怀疑人生。

    改了内容，还要改标题，改了标题，发现旁边的标题块图标位置又不对，改完了之后，发现标题的块引用位置也不对。

    终于全改完之后 心想终于完美了，可以享受了

    然后晚上就出了文档图标。。。

    按我改的方式（限制最大宽度，垂直居中）再也不能让文档图标全屏后还在标题正上方了，不过忍一忍也还好。

    后来又发现分屏内容的宽度会太宽，无语，于是后面就只改了预览页面

    如果有需要的话可以看看，其实后面我也发现编辑区域的宽度设置其实也还好，最大的问题是预览页面实在太宽

    /* ---------------编辑器内容两侧宽度设置 Start ————————————————————————*/

/* 调整思源编辑器内容最大宽度 */
.protyle-content > .protyle-wysiwyg,
.protyle  .b3-typography *,
.protyle-content > .protyle-title,
.protyle-content > .protyle-title .protyle-title__input{
    /* 如果要调整编辑器宽度只需调整下面这个值 */
    max-width: 1000px;
}

/* 居中 */
.protyle-content > .protyle-wysiwyg,
.protyle  .b3-typography *{
    margin: 0px auto !important;
}

/* 调整两侧宽度 */
/* 要调整宽度，就搜索75px 把下面是75px的全部修改 */
.protyle-content > .protyle-wysiwyg {
    /* 思源的编辑器在宽度较小的时候会主动调小编辑器内容,晕😵 */
    /* 所以我就搞固定宽度了，不然不好调整 */
    padding: 16px 75px 162px !important;

}

.protyle-content > .protyle-title {
    margin: 16px auto 0px !important;
    /* 原来title就有margin 96px，上面为了水平居中就清除了，于是改为padding，
    保证标题和内容对齐
     */
    padding: 0px 75px 0px;
}
.protyle-background__icon {
    /* 文档图标 */
    left: 75px !important;
}
.protyle-title .protyle-title__icon  {
    /* 标题的块图标还在原来的位置，也要修改 */
    margin: -15px 0 0 75px;
}
.protyle-title .protyle-attr {
    /* 然后文档右边的引用数原来是right0，要改成前面设置的宽度 */
    right: 75px;
}

/* 调整手机和平板端 */
@media screen and (max-width: 1023px) {
    /* 这里我假设平板最大宽度为1023px，小于此大小的屏幕将调整
    页面两侧宽度 */
    .protyle-content > .protyle-wysiwyg {
        padding: 16px 16px 162px !important;

    }

    .protyle-content > .protyle-title {
        margin: 16px auto 0px !important;
        /* 原来title就有margin 96px，上面为了水平居中就清除了，于是改为padding，
        保证标题和内容对齐
        */
        padding: 0px 16px 0px;
    }
    .protyle-background__icon {
        /* 文档图标 */
        left: 16px !important;
    }
    .protyle-title .protyle-title__icon  {
        /* 标题的块图标还在原来的位置，也要修改 */
        margin: -15px 0 0 16px;
    }
    .protyle-title .protyle-attr {
        /* 然后文档右边的引用数原来是right0，要改成前面设置的宽度 */
        right: 16px;
    }
}

/* ---------------编辑器内容两侧宽度设置 END ———————————————————————— */
    1 回复
  • 其他回帖
  • Achuan-2 •
    订阅者 先知

    如果只调整预览页面的宽度，使其居中

    /* ---------------编辑器内容两侧宽度设置 Start ————————————————————————*/
/* 已放弃调整即时编辑内容两侧宽度，只调整预览模式 */
/* 调整思源编辑器内容最大宽度 */
.protyle  .b3-typography * {
    /* 如果要调整编辑器宽度只需调整下面这个值 */
    max-width: 1000px;
}

/* 居中 */
.protyle  .b3-typography *{
    margin: 0px auto !important;
}
/* ---------------编辑器内容两侧宽度设置 END ———————————————————————— */
  • 88250 •
    订阅者 MOD

    这个暂时不会调整了，之前是有宽度选项的，但是加了这个选项会导致其他问题，如果一定需要的话建议自定义 CSS。

    1 回复
  • 88250 • • 1 • 1 赞同
    订阅者 MOD

    默认主题会自动重置，请参考帮助文档自定义主题章节。

  • 查看全部回帖
JoeJone
北京
回帖
0
 帖子
1
 积分
510

近期热议

推荐标签 标签

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    346 引用 • 1801 回帖 • 3 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 619 关注
  • RESTful

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

    30 引用 • 114 回帖 • 1 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    52 引用 • 40 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    39 引用 • 170 回帖 • 5 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • danl
    • 129 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 7 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 347 关注
  • OAuth

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

    36 引用 • 103 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 63 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 126 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 4 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 706 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 637 关注
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 11 关注
  • React

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

    192 引用 • 291 回帖 • 399 关注

最新标签