Generate a TOC of any page anywhere to quickly access the page's content.

Overview

logseq-plugin-tocgen

在任何地方生成任一页面/块的目录,通过它你可以快速访问页面/块内容。同时提供了滚动回页面顶部的功能。

Generate a TOC of any page/block anywhere and quickly access the page/block's content. A back to top button is also provided.

使用展示 (Usage)

demo

使用示例 (Examples)

为块所在的页面生成TOC。
Generate a TOC for the page where block belongs to.
{{renderer :tocgen}}
{{renderer :tocgen, [[]]}}

为某一页面创建一个TOC,可以用 "[[" 辅助查找想要的页面。
Create a TOC for a page, you can use "[[" to help find the page.
{{renderer :tocgen, pagename}}
{{renderer :tocgen, [[pagename]]}}

你也可以为某一页面块创建一个TOC,直接将块引用粘贴进来就好。
You can also create a TOC for a block, just paste its reference in.
{{renderer :tocgen, ((block-reference))}}

可以指定要生成几级。
You can specify how many levels to generate.
{{renderer :tocgen, [[]], 2}}
{{renderer :tocgen, [[pagename]], 2}}
{{renderer :tocgen, ((block-reference)), 2}}

如果你想在TOC中只包含H1-Hn这种heading,即markdown的`#`至`######`,那么你可以再通过一个参数来指定。
If you want to include only H1-Hn headings, that is, `#` to `######` in markdown,
you need to use a third argument.
{{renderer :tocgen, [[]], 1, h}}
{{renderer :tocgen, [[page name]], 1, h}}
{{renderer :tocgen, ((block-reference)), 1, h}}

如果你想生成一个随当前浏览页面变动而变动的 TOC,你可以传*作为页面名。

If you want to generate a TOC that dynamically changes according to what page you're currently working on, you can use * as page name.

{{renderer :tocgen, *}}
{{renderer :tocgen, *, 2}}
{{renderer :tocgen, *, 2, h}}

用户配置 (User configs)

{
  "disabled": false,
  "defaultLevels": 1,
  "defaultCollaped": false,
  "defaultHeadingType": "any",
  "hideBackTop": false
}

在 Logseq 的插件页面打开插件的配置后,有以下几项配置可供使用,请参照上方代码块进行设置(各项的默认值以体现在代码块中):

  • defaultLevels: 默认创建目录的级数,创建目录时没有指定级数时会使用此设置。
  • defaultCollapsed: 默认目录是否为折叠状态。
  • defaultHeadingType: 默认识别的标题类型。可以指定any,代表任何块都可作为标题识别;h代表仅 H1-Hn 块可作为标题识别。
  • hideBackTop: 如果不想要“滚动回页面顶部”这个功能的话可以通过这个设置关闭。

There are a couple of user settings available when you access the plugin settings from Logseq's plugins page. Please refer to the source block above (Default values are given in the source block).

  • defaultLevels: It defines how many levels a TOC contains by default if not specified when the TOC is created.
  • defaultCollapsed: It defines whether TOC is collapsed by default.
  • defaultHeadingType: It defines what kind of blocks can be recognized as a heading. any means that any block will do;h means that only H1-Hn blocks are accepted as headings.
  • hideBackTop: You can use this setting to disable the "Back to Top" functionality.

自定义样式 (Syle Customization)

你可以通过以下两个 CSS 类来自定义样式,kef-tocgen-page 对应页面,kef-tocgen-block 对应块。参照 Logseq 自定义样式的文档操作,将内容放在custom.css中即可。

You can customize styles using the following two CSS classes, kef-tocgen-page for page, kef-tocgen-block for block. Refer to Logseq's document for how to customize styles, place your modifications in custom.css.

.kef-tocgen-page {
  cursor: pointer;
  line-height: 2;
}
.kef-tocgen-block {
  line-height: 1.7;
}

你也可以通过kef-tocgen-noactivepage来自定义动态 TOC(见使用示例)在没有检测到活动页面时的内容与样式。

You can also use kef-tocgen-noactivepage to customize dynamic TOC's (see Examples section above) content and style when no active page is detected.

.kef-tocgen-noactivepage::before {
  content: "🈚️";
}
Comments
  • Feature Requests: Right Sidebar & Interaction Detail Optimization

    Feature Requests: Right Sidebar & Interaction Detail Optimization

    Thanks for you contribution, I love this plugin so much.

    It will be nice if it also supports:

    • Show generated TOC in right sidebar(similar to logseq-toc-plugin).
    • Quickly add the TOC of current page(Some pages don't show in the [[ query in some cases, and I need to manually copy the page name and paste it.)
    • When clicking a item in the generated TOC, if it's a block of current page, directly scroll to that block instead of open it in a new page.
    opened by jjaychen1e 18
  • fix: manually remove collapsed property.

    fix: manually remove collapsed property.

    When a block is collapsed, the TOC will be incomplete. Here is the explanation:

    It could be a bug of Logseq. Other properties I observed all begin with a white space.

    When a block is collapsed, the "collapsed" properly doesn't begin with a white space, for example, a collapsed block with content "somewords" could be: "somewordscollapsed:: true". In this case, "somewordscollapsed:: true" will entirely be replaced with empty string.

    opened by jjaychen1e 13
  • Recognize heading using metadata instead of `#`

    Recognize heading using metadata instead of `#`

    When set a block as a heading in Logseq, I right click a block -> convert to a heading. Logseq then add heading:: true as a property for that block.

    I prefer this over using # because the heading will automatically change its level base on how deep it is nested, so when I move the blocks around I don't have to change the number of #

    This heading currently is not supported by tocgen plugin, so when I use {{renderer :tocgen, *, 2, h}} it doesn't work.

    Could you please add support for heading based on the metadata? Thanks a lot!

    opened by nhan000 12
  • [feature request]new Option:Show The First Line of a Heading

    [feature request]new Option:Show The First Line of a Heading

    Have a look at this ex. below:

    - # A Heading
    version:: A
    type:: book
    price:: ff
    some describe of A heading
      - ## B heading
      - ## C heading
    

    use tocgen plugin code ' {{renderer :tocgen , [[my page]],6,h }}',become to this:

    ↓A Heading version:: A
    type:: book
    price:: ff
    some describe of A heading
       ↓B heading
       ↓C heading
    

    actually,I want to show that like this:

    ↓A Heading version:: A
       ↓B heading
       ↓C heading
    

    So,I'd like to request to show only'the first line'

    opened by cloudrflight 7
  • 大纲目录的新功能需求,大佬看看值不值得淦一个插件

    大纲目录的新功能需求,大佬看看值不值得淦一个插件

    Create a title preview to quickly adjust the title of the line when writing - Feature Requests - Logseq 我提了一个功能,大佬看看值不值得淦一个插件 需求描述:

    在观看视频和阅读文章时,记笔记,通常需要根据文章的逻辑,不断在不同标题级别下,摘录一些关键语录,但行数太多,看不到顶部的标题,无法快速切换到之前的标题下,进行输入。因此,我觉得需要在当前输入的行,使用快捷键,快速调出一个大纲标题预览悬浮窗口,以便指导,快速调整当前输入行,所在的大纲标题级别。

    一些截图:

    1、大纲标题预览窗口的设计

    image

    2.更改书写行的大纲级别时,这个预览将根据大纲级别自动跳转 image

    谢谢

    opened by aiyou9 6
  • 目录不显示标签,是否考虑增加

    目录不显示标签,是否考虑增加

    您好,对于block的首行里的标签,当前生成的目录中不显示,如用[[]]形式,则目录中可显示。能否在目录中显示标签呢?

    虽然Logseq本身标签和页面是一样,但有时候习惯用标签格式,感觉更舒服。如果也能显示就更好了。

    举例说明:如block首行包括[[abcd]],则生成目录中显示abcd;如block首行包括#abcd,则生成目录中不显示。

    opened by Sun-Pengcheng 5
  • Scrolls back to TOC when clicking any content

    Scrolls back to TOC when clicking any content

    Plugin version: v1.10.2 LogSeq version: 0.6.1

    With the plugin turned on, when I click on a header or text, the editor almost always scrolls back to the corresponding TOC item.

    opened by KKKIIO 5
  • Plugin is not working

    Plugin is not working

    Logseq 0.5.6 Mac os. I have installed plugin from Marketplace. Than i have Inserted {{{toc [[pagename]]}}} into my page. And it is highlighting red and not generating any table of content..

    opened by myownstandard 5
  • 功能增强:字数显示限制 及 指定忽略某block

    功能增强:字数显示限制 及 指定忽略某block

    1. 有时某些块或子块内容比较长,且从逻辑上确实是跟同级的块并列的,不好再开一个块藏起来,这时如果toc涉及它的层级,就会显示一大段很长的话在目录中,影响观看,为了易于观看只能减少级数避免toc到它(有可能是第二层)。 改进提议:是否能在设置中添加一个填空,让用户设置硬性限制显示前N个字符,后面接一个省略号“……”表示未完,默认值为0即不限制显示字数。
    2. 有时确实完全不想让某些块及其子块显示在toc中(各种原因:长度长、不从属于主逻辑却有关、重要性较次的备注等),通过将其它块改h1~h6来忽略个别的块及其子块实在麻烦。 改进提议:是否可以通过为个别块添加属性如 toc:: false 或添加tag如 #tocfalse 类似途径来忽略此块及其子块。

    Plus. 一个次要的bug,高亮==123==和粗体**123**或斜体*123*同时出现如==**123**==*==123==*时,toc中会显示*号如**123**

    opened by Gitbreast 4
  • Feature Request: Make Tags optionally visible in TOC items, from a toggle option in config settings

    Feature Request: Make Tags optionally visible in TOC items, from a toggle option in config settings

    I have (imported) content using tags in headlines to be displayed as TOC entries to make them useful (tags are part of readable text)

    For me modifying the local ~/.logseq/plugins/logseq-tocgen/dist/index.****.js by commenting out the line containing the code from the source linked below works as workaround but will not survive updates.

    content = content.replace(/(?:^|\s)#\S+/g, "")
    

    Origin of code: https://github.com/sethyuan/logseq-plugin-tocgen/blob/master/src/utils.js#L25

    I would be great to make the filtering of tags optionally to be disabled from the config.

    opened by acsr 4
  • 功能探讨:页面或标签,是否能在目录中,也是页面或标签的形式,方便鼠标悬停预览,与点击跳转

    功能探讨:页面或标签,是否能在目录中,也是页面或标签的形式,方便鼠标悬停预览,与点击跳转

    主要探讨问题:在目录中,是否可以增加双链链接,在大纲目录上,加上双链,增加大纲目录的三维深度,为撰写文章时,辅助凝练大纲,提供素材,以此打开思路?

    场景1 对标题打标签,对相关内容,进行预览,跳转,进一步为凝练标题,提供素材 image

    image

    场景2 为了使用双链,以下写法,能够兼容大纲层级,toc是否可以支持页面的双链 image

    opened by aiyou9 4
Releases(v1.22.0)
Owner
Seth Yuan
Seth Yuan
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Mini map for web pages.

pagemap Mini map for web pages. Example usage add a canvas tag to your HTML page: <canvas id='map'></canvas> fix it's position on the screen: #map {

Lars Jung 1.2k Dec 31, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Extend GitHub pages with support for LaTeX, plotly, etc.

Extend GitHub pages with support for LaTeX, plotly, etc. xhub is a browser extension for Google Chrome that lets you use various add-ons on GitHub REA

Nico Schlömer 71 Dec 11, 2022
Plug is a browser extension for users of the Internet Computer that allows you to access your ICP, Cycles, and other tokens as well as log into IC apps with one click.

Plug Introduction Welcome to Plug! An Internet Computer crypto wallet and authentication provider as a browser extension. Find our latest version in t

Psychedelic 150 Dec 23, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Django Class Based Views to generate Ajax charts js parameters.

Django Chartjs Django Chartjs lets you manage charts in your Django application. This is compatible with Chart.js and Highcharts JS libraries. Using a

PeopleDoc 377 Dec 25, 2022
Generate an image of all your Github contributions

GitHub Contribution Chart Generator Generates an image of all your GitHub contributions since you have signed up, so you can use it in social media. T

Sallar 4.3k Jan 2, 2023
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
Tool to download any version of Dofus 2.X

Dofus-Downloader Dofus Downloader is a tool that allows you to download all versions of Dofus 2.X through the CDN of the official launcher. The tool i

Nitram 6 Sep 7, 2022
Show page in a more document like look and provide quick exporting.

logseq-plugin-doc 将页面已更加文章化的形式展示,并提供快速导出功能。 Show page in a more document like look and provide quick exporting. 使用展示 (Usage) 关于无序列表 (About bullet list

Seth Yuan 56 Dec 22, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Subscribe to rss feeds from anywhere, receive notifications from anywhere.

INK RSS 管理订阅,接收通知 示例网页 · 示例群组 · 报告Bug 介绍 特点 项目背景 TODO 注意事项 部署 额外附赠 使用建议 调查 贡献 作者 协议 介绍 INK RSS 提供及时且多样的 rss 通知服务,借助现有的接口你可以在任意位置订阅,并使用任意方式接收通知,并且所有服务均

null 253 Dec 28, 2022
Embed your NFT art anywhere, generate preview for oldschool platforms

Embed.Art Introduction Platform like twitter and facebook use meta tags to display preview when sharing url. The format these meta tags support are li

Ronan Sandford 12 Sep 26, 2022
jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.

jQuery.Hotkeys #About jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting al

John Resig 2.6k Jan 2, 2023
⚗️Nitro provides a powerful toolchain and a runtime framework from the UnJS ecosystem to build and deploy any JavaScript server, anywhere

⚗️Nitro provides a powerful toolchain and a runtime framework from the UnJS ecosystem to build and deploy any JavaScript server, anywhere

unjs 1.3k Jan 5, 2023
fcall, fetch and call any remote hot functions, anywhere, anytime, without installations or configurations.

fcall, fetch and call any remote hot functions, anywhere, anytime, without installations or configurations.

立党 Lidang 4 Sep 20, 2022
Dead-simple CORS handling for any itty-router API (test with Cloudflare Workers, but works anywhere)!

Simple CORS-handling for any itty-router API. Designed on Cloudflare Workers, but works anywhere. Features Tiny. Currently ~600 bytes, with zero-depen

Kevin R. Whitley 6 Dec 16, 2022
Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

Awesome Books ES6 In this project, I build a basic website that allows users to add/remove books from a list. using ES6 syntax and make it more organi

Abdulhamid 11 Jul 1, 2022