登录 注册

[css] 代码片段分享：将列表变成时间线笔记、日记

效果图：

时间线.PNG

代码片段：

/****************************** 时间线图 ******************************/
[data-type="NodeList"][custom-setTimeLine] {
    overflow: hidden;

    >[data-type="NodeListItem"] {
        padding-top: 10px !important;
        padding-bottom: 20px !important;

        /* 图标 */
        >.protyle-action {
            top: 12px;
            left: 105px;

            scale: 1.2;
        }

        /* 第一个内容块：时间 */
        >.protyle-action+[data-type="NodeParagraph"] {
            position: absolute;
            margin-left: 10px;
        }

        /* 第二个内容块到最后一个内容块：内容 */
        >[data-type]:not(.protyle-action+[data-type="NodeParagraph"]) {
            margin-left: 147px;
        }
    }
  
    /* 线条 */
    >[data-type="NodeListItem"]::before {
        content: "";

        top: 0;
        left: 121.4px;

        height: 100%;

        border: 1px solid var(--b3-theme-on-surface) !important;
    }
}
  • 思源笔记

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

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

    28444 引用 • 119764 回帖
  • 代码片段

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

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

    285 引用 • 1985 回帖
1 引用
思源有没有插件或者原生实现按照“时间线”排列每日“动作”的功能 • veryzhh
1 操作
JeffreyChen 在 2025-09-04 23:18:28 更新了该帖
广州 位置
4 感谢
5 收藏
1 引用
1 操作
10 回帖
5
347 244 2 1 100

相关帖子

10 回帖
[css] 代码片段分享：将列表变成时间线笔记、日记

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • cxg318 •

    image.png

    字体大了以后，有问题，希望修复一下

    1 回复
  • 其他回帖
  • Floria233 •
    付费者

    为啥俺的没用？可能是因为主题的缘故？？？😂

    2 回复
  • wilsons •
    付费者 捐赠者

    其实就是一个二级列表而已，一级是左侧时间线，二级是具体内容

    image.png

    image.png

    如果操作不习惯，可以先取消样式编辑，编辑好后再恢复

    或者直接用我下面这个代码

    使用方法：

    1 先安装 runjs 插件

    2 随便新建个文档，把下面的代码放到 js 代码片段中

    // 显示/隐藏时间线
// see https://ld246.com/article/1756998809429
async function main() {
    // css 代码
    const styleContent = `
/****************************** 时间线图 ******************************/
[data-type="NodeList"][custom-setTimeLine] {
    overflow: hidden;

    >[data-type="NodeListItem"] {
        margin-top:0;
        margin-bottom:0;
        padding-top: 10px !important;
        padding-bottom: 20px !important;

        /* 图标 */
        >.protyle-action {
            top: 12px;
            left: 105px;

            scale: 1.2;
        }

        /* 第一个内容块：时间 */
        >.protyle-action+[data-type="NodeParagraph"] {
            position: absolute;
            margin-left: 10px;
        }

        /* 第二个内容块到最后一个内容块：内容 */
        >[data-type]:not(.protyle-action+[data-type="NodeParagraph"]) {
            margin-left: 147px;
        }
    }
  
    /* 线条 */
    >[data-type="NodeListItem"]::before {
        content: "";

        top: 0;
        left: 121.4px;

        height: 100%;

        border: 1px solid var(--b3-theme-on-surface) !important;
    }
}
    `;

    // 定义 style 的内容
    const styleId = "ShowOrHideTimeLIne";
    // 获取现有的 <style> 元素
    let styleElement = document.getElementById(styleId);
  
    if (styleElement) {
        // 如果存在，则删除它
        styleElement.remove();
        await client.pushMsg({
            msg: "已隐藏", timeout: 3000,
        });
    } else {
        // 如果不存在，则创建并添加它
        const newStyle = document.createElement("style");
        newStyle.id = styleId;
        newStyle.textContent = styleContent;
        document.head.appendChild(newStyle);
        await client.pushMsg({
            msg: "已显示", timeout: 3000,
        });
    }
}
main();
plugin.saveAction(thisBlock.id, "显示/隐藏时间线");

    3 然后 js 代码块右键菜单中按下图运行下代码

    image.png

    4 然后在顶部工具栏 runjs 菜单中，可以动态显示和隐藏时间线

    image.png

    注意：

    1 代码新增了 margin-top:0;margin-bottom:0; 不然在默认主题时间线之间有空隙

    2 该方法显示和隐藏只是临时的，即使隐藏刷新页面仍旧是时间线，如果想记住，可以用这个代码进行调整 求隐藏已完成任务块的代码片段 - wilsons 的回帖

    1 操作
    wilsons 在 2025-09-05 10:12:07 更新了该回帖
  • Fighter93 •
    付费者 作者

    这是我用默认主题-midnight 后的效果，应该是你主题的问题时间线 midnight 主题.PNG

  • 查看全部回帖
Fighter93
喜欢探索新鲜好玩的领域、事物。 广州
回帖
79
 帖子
7
 积分
396

近期热议

推荐标签 标签

  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • OneDrive
    2 引用 • 3 关注
  • Access
    1 引用 • 3 回帖 • 14 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    293 引用 • 4496 回帖 • 688 关注
  • Kubernetes

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

    119 引用 • 54 回帖
  • 架构

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

    146 引用 • 442 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 174 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • Outlook
    1 引用 • 5 回帖
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    327 引用 • 1395 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • GitLab

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

    46 引用 • 72 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • HBase

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

    17 引用 • 6 回帖 • 72 关注
  • 前端

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

    248 引用 • 1342 回帖
  • 支付宝

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

    29 引用 • 347 回帖 • 2 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    110 引用 • 153 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 3 关注
  • GitHub

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

    213 引用 • 2044 回帖
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 249 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 740 关注
  • 职场

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

    127 引用 • 1708 回帖 • 1 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 724 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 5 关注

最新标签