两步设置notion客户端悬浮目录
notion设置悬浮目录
notion客户端设置悬浮目录
此方法针对notion-enhancer插件修改得来,后期notion-enhancer可能会完善,但目前无法显示悬浮目录。
设置后目录可以显示在右侧侧边栏
还可以自动隐藏在右侧,当鼠标滑到最右侧时出现(通过点击<<实现)
一、安装notion-enhancer插件并打开side panel和outliner
插件地址https://github.com/notion-enhancer/desktophttps://github.com/notion-enhancer/desktop
二、打开notion-enhancer插件地址
路径一般为:系统盘\用户(或user)\当前电脑账户名\AppData\Roaming\npm\node_modules\notion-enhancer
1. 找到\mods\side-panel下的app.css,打开app.css文件,将以下代码覆盖源代码
/*
* side panel
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.notion-frame {
transition: padding-right 300ms ease-in-out;
}
.enhancer-panel--container {
flex-grow: 0;
flex-shrink: 0;
position: absolute;
top: 40px;
bottom: 0;
right: 0;
z-index: 99;
height: 100vh;
background: var(--theme--sidebar);
color: var(--theme--text_ui);
font-weight: 500;
cursor: default;
transition: box-shadow 300ms ease-in, width 300ms ease-in-out;
}
#enhancer-panel {
display: flex;
flex-direction: column;
position: relative;
pointer-events: auto;
background: var(--theme--sidebar);
cursor: auto;
max-height: 100%;
transition: transform 300ms ease-in-out,
opacity 300ms ease-in-out,
right 300ms ease-in-out;
}
#enhancer-panel[data-locked="false"] {
max-height: calc(100vh - 120px);
box-shadow: var(--theme--box-shadow_strong) !important;
}
#enhancer-panel[data-full-height="true"] {
height: 100%;
}
#enhancer-panel[data-locked="false"][data-full-height="true"] {
height: calc(100vh - 120px);
}
.enhancer-panel--header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
height: 45px;
width: 100%;
color: var(--theme--text);
font-size: 14px;
padding: 2px 14px;
overflow: hidden;
user-select: none;
cursor: pointer;
transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.enhancer-panel--header:hover {
background: var(--theme--interactive_hover);
}
.enhancer-panel--icon {
flex-grow: 0;
flex-shrink: 0;
border-radius: 3px;
width: 22px;
height: 22px;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.enhancer-panel--icon svg {
width: 100%;
height: 100%;
}
.enhancer-panel--title {
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.enhancer-panel--reload-button {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 6px;
margin-right: 6px;
border-radius: 3px;
transition: background 20ms ease-in;
}
.enhancer-panel--reload-button:hover {
background: var(--theme--main)
}
.enhancer-panel--switcher-icon {
flex-grow: 0;
flex-shrink: 0;
width: 12px;
height: 12px;
fill: var(--theme--text_ui);
}
.enhancer-panel--reload-button svg,
.enhancer-panel--switcher-icon svg {
width: 100%;
height: 100%;
display: block;
fill: var(--theme--text_ui_info);
}
.enhancer-panel--toggle {
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
height: 24px;
width: 24px;
border-radius: 3px;
cursor: pointer;
opacity: 0;
transition: background 20ms ease-in, opacity 300ms ease-in;
}
#enhancer-panel:hover .enhancer-panel--toggle {
opacity: 1;
}
.enhancer-panel--toggle:hover {
background: var(--theme--interactive_hover);
}
.enhancer-panel--toggle svg {
width: 14px;
height: 14px;
fill: var(--theme--text_ui);
transition: transform 400ms ease-in;
fill: var(--theme--text_ui_info);
}
#enhancer-panel[data-locked="false"] .enhancer-panel--toggle svg {
transform: rotateZ(-180deg);
}
#enhancer-panel--content {
flex: 1;
width: 100%;
color: var(--theme--text);
font-size: var(--theme--font_body-size);
display: flex;
flex-direction: column;
position: relative;
min-height: 0;
}
.enhancer-panel--resize {
position: absolute;
top: 0px;
left: 0px;
height: 100vh;
width: 0px;
z-index: 1;
}
#enhancer-panel[data-locked="false"] .enhancer-panel--resize {
height: 100%;
}
.enhancer-panel--resize div {
height: 100%;
width: 6px;
}
.enhancer-panel--overlay-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
.enhancer-panel--switcher {
max-width: 320px;
position: relative;
right: 14px;
border-radius: 3px;
padding: 8px 0;
box-shadow: var(--theme--box-shadow_strong);
background: var(--theme--card);
overflow: hidden;
}
.enhancer-panel--switcher-item {
display: flex;
align-items: center;
width: 100%;
padding: 8px 14px;
color: var(--theme--text);
font-size: 14px;
user-select: none;
cursor: pointer;
overflow: hidden;
transition: background 300ms ease;
}
.enhancer-panel--switcher-item:hover {
background: var(--theme--interactive_hover);
}
2. 找到\mods\outliner下的panel.js,打开panel.js文件,将以下代码覆盖源代码
/*
* outliner
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
"use strict";
const { createElement } = require("../../pkg/helpers");
module.exports = (store, __exports) => {
let lastSearch;
// Observe for page changes
const pageObserver = new MutationObserver((list, observer) => {
for (let { addedNodes } of list) {
if (addedNodes[0]) {
// replace
// if (addedNodes[0].className === 'notion-page-content') {
if (addedNodes[0].className === "notion-scroller vertical horizontal") {
startContentObserver();
}
// Clear outline on database pages
else if (addedNodes[0].className === "notion-scroller") {
contentObserver.disconnect();
const outline = document.querySelector(".outliner");
if (outline) outline.textContent = "";
}
}
}
});
// Observe for header changes
const contentObserver = new MutationObserver((list, observer) => {
list.forEach((m) => {
let header;
if (
(m.type === "childList" &&
(m.target.hasAttribute("placeholder") ||
m.target.className?.includes("header-block")) &&
((header = getHeaderBlock(m.target)) ||
(header = getHeaderBlock(m.addedNodes[0])))) ||
(m.type === "characterData" &&
(header = getHeaderBlock(m.target.parentElement)))
)
updateOutlineHeader(header);
else if (
m.type === "childList" &&
m.removedNodes[0] &&
(isHeaderElement(m.removedNodes[0]) ||
m.removedNodes[0].querySelector?.('[class*="header-block"]'))
)
findHeaders();
});
});
function startContentObserver() {
findHeaders();
contentObserver.disconnect();
contentObserver.observe(
// replace
document.querySelector(".notion-scroller.vertical.horizontal"),
// document.querySelector('.notion-page-content'),
{
childList: true,
subtree: true,
characterData: true,
}
);
}
function findHeaders() {
// Add cooldown to prevent the function being run twice at the 'same' time
if (lastSearch >= Date.now() - 10) return;
lastSearch = Date.now();
const outline = document.querySelector(".outliner");
if (!outline) return;
outline.textContent = "";
// replace
const pageContent = document.querySelector(
".notion-scroller.vertical.horizontal"
),
headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
fragment = new DocumentFragment();
headerBlocks.forEach((header) => {
const blockId = header.dataset.blockId.replace(/-/g, ""),
headerEl = header.querySelector("[placeholder]"),
placeholder = headerEl.getAttribute("placeholder");
const outlineHeader = createElement(`
<div class="outline-header" header-level="${placeholder.slice(-1)}">
<a href="${window.location.pathname}#${blockId}" class="outline-link"
outline-placeholder="${placeholder}"></a>
</div>
`);
header.outline = outlineHeader;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
fragment.appendChild(outlineHeader);
});
outline.appendChild(fragment);
}
function updateOutlineHeader(header) {
const headerEl = header.querySelector("[placeholder]");
if (!(headerEl && header.outline?.parentElement)) return findHeaders();
const outlineHeader = header.outline;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
setOutlineLevel(
outlineHeader,
headerEl.getAttribute("placeholder").slice(-1)
);
}
function setOutlineLevel(outlineHeader, level) {
outlineHeader.setAttribute("header-level", level);
outlineHeader.firstElementChild.setAttribute(
"outline-placeholder",
`Header ${level}`
);
}
function getHeaderBlock(el) {
return el?.closest?.('[class*="header-block"]');
}
function isHeaderElement(el) {
let placeholder;
if (el) {
placeholder =
el.getAttribute?.("placeholder") ||
el.querySelector?.("[placeholder]")?.getAttribute("placeholder");
}
if (!placeholder) placeholder = "";
return placeholder.includes("Heading");
}
return {
onLoad() {
if (store().lined) {
const outline = document.querySelector(".outliner");
outline?.setAttribute("lined", "");
}
if (document.querySelector(".notion-scroller.vertical.horizontal")) {
startContentObserver();
}
pageObserver.observe(document.body, {
childList: true,
subtree: true,
});
},
onSwitch() {
pageObserver.disconnect();
contentObserver.disconnect();
},
};
};
设置完成,快打开你的notion体验悬浮目录吧!
卡顿
如果感觉有些卡顿,删除不要的功能,notion-enhancer这个插件的功能特别的多,并且是模块化的。
对于我,我只需要悬浮目录的功能,所以就只留了这些:
其中core、outliner、side-panel是不能删的,删除后你的目录功能会受到影响,你也可以选择性的保留你需要的功能。(建议将不要的功能放到其他位置,以便需要时加入)
期待你的评论!
附图1:
附图2:
更多推荐
所有评论(0)