Modification of table of contents of digital garden

ObsidianDigital Garden插件将文章目录与GraphBacklink模块一同放在sidebar中,在移动端难以使用。
这里对其模板做一些改动,让文章目录与filetree显示在同一区域,利用js实现Tab切换,方便使用。

Details

首先删除src/site/_include/components/sidebar.njk文件中关于目录的代码:

- {%if settings.dgShowToc === true%}
- {%set tocHtml= (content and (content\|toc)) %}
- {%if tocHtml %}
- <div class="toc">
- <div class="toc-title-container">
- <div class="toc-title">
- On this page
- </div>
- </div>
- <div class="toc-container">
- {{ tocHtml | safe }}
- </div>
- </div>
- {%endif%}
- {%endif%}

src/site/_include/components/filetree.njk文件中做如下修改:

 <div class="folder" x-data="{isOpen: true}">
+    <div class="sidebar-nav">
+        <ul>
+            <li class="current">
+                Overview
+            </li>
+            <li>
+                Contents
+            </li>
+        </ul>
+    </div>
+    <div class="sidebar-panel-container">
+        <div class="item" style="display: block;">
+			<div class="site-overview">
	            {% for fileOrFolderName, fileOrFolder in filetree -%}
					{{menuItem(fileOrFolderName, fileOrFolder, 0, fileOrFolderName)}}
	            {% endfor -%}
+	        </div>
+	    </div>
+        {% if settings.dgShowToc === true %}
+        <div class="item">
+	        {%set tocHtml= (content and (content|toc)) %}
+	        {%if tocHtml %}
+            <div class="toc">
+	            <div class="toc-container">
+	                {{ tocHtml | safe }}
+                </div>
+            </div>
+	        {%endif%}
+        </div>
+        {% endif %}
+    </div>
 </div>

src/site/styles/custom-style.scss中添加以下样式:

li.current {
    border-bottom: 1px solid;
}

.sidebar-nav li {
    float: left;
    list-style-type: none;
    padding: 0 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}

.item {
    display: none;
}

src/site/_include/layouts文件夹的两个.njk文件的</html>标签前添加:

	</body>
+	<script>
+	var lis = document.querySelectorAll('div.sidebar-nav li');
+	var items = document.querySelectorAll('.item');
+	for (var i = 0; i < lis.length; i++) {
+	    lis[i].setAttribute('data-index', i);
+	    lis[i].onclick = function () {
+	        for (var i = 0; i < lis.length; i++) {
+	            lis[i].className = '';
+	        }
+	        this.className = 'current';
+	        var index = this.getAttribute('data-index');
+	        for (var j = 0; j < items.length; j++) {
+	            items[j].style.display = 'none';
+	        }
+	        items[index].style.display = 'block';
+	    }
+	}
+	</script>
	</html>
Important

这里给出的样式文件仅保证您能完成文件树和目录切换的基础功能,此外还需根据您的实际情况对样式文件中有关目录和文件树的样式进行修改才行做到更好的呈现。

Showcase

toc1

toc2

川公网安备 51012202000874
蜀ICP备2023019585号