提示:如何为文章模板制作目录(TOC)
先决条件:
文件名称:article_page。哈佛商学院,年代style .css, script.js文件
阅读时间:最多2分钟
嵌入时间:最多4分钟
这里有一个在你的文章模板中创建目录的方法，确保副标题将被适当地缩进，而不是与主标题对齐
2分钟读书学习如何定制主题．
你可以使用免费的插件Nikhil构造背景。你可以很容易地嵌入到你的主题，看看下面的步骤:
1）．下载插件并解压缩。
2）.将JS文件上传到帮助中心的assets文件夹中。请看下面的截图。
3）.现在，将jQuery .toc.min.js文件和jQuery库链接到您的document_head.hbs该插件是基于jQuery的。
4）.调用script.js文件底部Document函数下的TOC函数。
5）.最后，添加div以显示文章模板上的TOC。
输出为:
谢谢
-
你好,
谢谢分享!我用下面的代码做了类似的事情:
在script.js中:
!function(a){"use strict";var b=function(b){return this.each(function(){var c,d,e=a(this)，f=e.data()，g=[e]，h=this. tagname,i=0;c= a.l extend({content:"body"，标题:"h1,h2,h3"}，{content:f。toc | |无效0,标题:f。来cHeadings||void 0},b),d=c.headings.split(","),a(c.content).find(c.headings).attr("id",function(b,c){var d=function(a){0===a.length&&(a="?");for(var b=a.replace(/\s+/g,"_"),c="",d=1;null!==document.getElementById(b+c);)c="_"+d++;return b+c};return c||d(a(this).text())}).each(function(){var b=a(this),c=a.map(d,function(a,c){return b.is(a)?c:void 0})[0];if(c>i){var e=g[0].children("li:last")[0];e&&g.unshift(a("<"+h+"/>").appendTo(e))}else g.splice(0,Math.min(i-c,Math.max(g.length-1,0)));a("").appendTo(g[0]).append(a("").text(b.text()).attr("href","#"+b.attr("id"))),i=c})})},c=a.fn.toc;a.fn.toc=b,a.fn.toc.noConflict=function(){return a.fn.toc=c,this},a(function(){b.call(a("[data-toc]"))})}(window.jQuery);
如果($ (" # toc ") . length > 0) {
$ (" # toc ") .toc({内容:" div.article-body "});
}- in style.css:
.toc-list ul， .toc-list ol {
list-style-type:回复;
}
.toc-list ul li， .toc-list ol li {
Margin: 0px;
}
.toc-list列表
border - radius: 4 px;
颜色:text_color美元;
显示:块;
粗细:300;
padding-left: 10 px;
/ * margin-bottom: 10 px; * /
}
.toc-list ul li a:hover {
background - color: brand_color美元;
颜色:brand_text_color美元;
文字修饰:没有;
}- in article_page.hbs:
{{#每个article.labels}}
{{#是标识符“show_toc”}}
<节课= " toc-list " >
<强>{{直流的in_this_article}} < / >强
< ul id = " toc " > < / ul >
< / >节
{{/}}
{{/每个}}我发现最后一部分很棒，因为只有在文章中有show_toc标签(这是我想要的定制)时，它才会触发文章的TOC部分。
-
谢谢，我想你读这篇文章也是为了在TOC列表项目上面添加标题:
-
Ifra Saqlain步骤2和步骤3的屏幕截图是相同的。这是故意的吗?
-
你好马克，感谢ping，这不是故意的，应该有document_head模板截图。
-
谢谢,Ifra Saqlain!使动态TOC与jQuery插件一起工作。
一个问题:我添加了一个“在本文中”的标题。我修改了Javascript代码片段，使其只提取
标题。如果文章中没有
标题，是否有办法隐藏“In this article”标题?
<节课= " article-info " >
< div class = " article-content”>
< div class = " article-body”>在本文中:
{{#如果附件}}
< div class = " article-attachments”>
< ul类= "附件" >
{{#每个附件}}
<李类= " attachment-item " > -
你好Mark，你可以在你的h3标题标签中添加一个类名:toc-title,然后检查它的长度李在ul、然后把它藏起来toc-title。
解决方案:
1).在h3中添加类名。
2).检查李的长度ul。
3).现在测试你的TOC，如果有任何问题请告诉我:)
谢谢
-
谢谢你的解决方案。工作很好。
我正在尝试将TOC设置为透明标注。
添加以下代码:
在本文中:
< ul id = " toc " > < / ul >
< / div >
{{article.body}}
< / div >和
$(文档)时函数(){
$ (" # toc”)。来c({content: ".article__body", headings: "h1,h2,h3,h4"});
如果($ (ul # toc) .(“李”)。长度=== 0){
$ (' .toc-title ') hide ();
$ (' .callout调出,透明').hide();
}
})如果文章TOC中没有标题，则隐藏，但此标注的边框仍然存在。我该怎么办?
您好，因为您忘记在脚本代码中为类添加点:
你的代码:
$(文档)时函数(){
$ (" # toc”)。来c({content: ".article__body", headings: "h1,h2,h3,h4"});
如果($ (ul # toc) .(“李”)。长度=== 0){
$ (' .toc-title ') hide ();
$ (' .callout调出,透明”)。hide ();//没有点为类
}
})固定:应用此。
$(文档)时函数(){
$ (" # toc”)。来c({content: ".article__body", headings: "h1,h2,h3,h4"});
如果($ (ul # toc) .(“李”)。长度=== 0){
$ (' .toc-title ') hide ();
$ (' .callout.callout——透明')hide ();
}
})确实。谢谢你！最后一个问题:
我怎样才能改变?
如果($ (ul # toc) .(“李”)。长度=== 0){如果文章标题少于2个，要隐藏TOC吗?
嘿Jakub:）
使用这个脚本代码的查询:
如果文章标题少于2个，要隐藏TOC吗?
$(文档)时函数(){
$ (" # toc”)。来c({content: ".article__body", headings: "h1,h2,h3,h4"});
$ (' .callout.callout——透明')hide ();
如果($(“ul # toc李”)。长度>= 2){
$ (' .callout.callout——透明'),告诉();
}
})很多谢谢!
非常感谢你的帮助:)
你好,
TOC工作得很好，除了一件事-我想知道这只发生在我的HC?
点击链接将您带到特定的标题，但下面的几行不是部分的标题。
例如-点击第三个链接从TOC:http://gmsystem.亚博zendesk.com/hc/pl/articles/4417171125905-Jak-wypożyczyć-licencję有力优势-
正如你所看到的，它带你到适当的部分，但第一行隐藏在标题后面。
我怎样才能解决这个问题呢?你好Jakub Kręcisz，这是由于你的粘头，头隐藏了那几行。
请看下面的截图:
粘头:
当我离开的时候位置:固定来自CSS:
解决方案:
您可以通过在DOM函数内的脚本文件末尾添加给定的代码来解决此问题
$(窗口).scroll(函数(){
if ($(this).scrollTop() > 50) {
$('主'). css({“margin-top”:“125 px”});
} else {
$('主'). css({“margin-top”:" 0 "});
}
}）;
截图:
在document_head上添加Jquery CDN。哈佛商学院的文件。
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js " > < /脚本>
截图:
谢谢
团队
另外，点击给定的链接:)
谢谢你！我照你写的做了。
是否可以将此限制仅用于文章页面?
我想要最小化跳的效果在其他页面上，例如，在带有块的行以特定像素量移动的主页上:
“0”的位置:
位置“滚动”:
在文章页面添加模板名称。
更新之前的脚本代码:
$(文档)时函数(){
if(tempName === "article-template") {
$(窗口).scroll(函数(){
if ($(this).scrollTop() > 50) {
$('主'). css({“margin-top”:“125 px”});
} else {
$('主'). css({“margin-top”:" 0 "});
}
}）;
}
}）;Ifra,
真的，真的很感谢你的帮助-非常感谢!
:）
这简直太神奇了。非常感谢Ifra Saqlain对于这个指南!
:）
我做了这些，但它不起作用:https://support.heroesempires.com/hc/en-us/articles/5260022672665
没有TC节目。
请贴代码，不要贴截图:)
当然了。
安勒:)，进行以下操作:
i).转到document_head。哈佛商学院的文件。
ii).更新cdn序列。
iii).目前，你的TOC CDN高于jQuery-v3.5.1，它应该低于这个版本的jQuery，或者你可以移动你的jQuery-v3.5.1 CDN低于jQuery-v3.6.0。
目前:
在更新:
第二件事是，你没有类名article-body。
类中添加类名减价。
或者,
您可以在脚本代码中更改类名。
现在，测试一下，让我知道。
谢谢你！Ifra Saqlain主题开发人员加载了该文件末尾的js文件。我把它拆了，它还能用。
然而，格式是丑陋的;有什么建议吗?https://support.heroesempires.com/hc/en-us/articles/5260022672665-Tutorials
顺便说一句，你们计划为Zendesk的文章提供原生TOC吗?亚博
Ifra Saqlain我不明白。新代码是干什么用的?你不能分享代码，而不是截图，让我重新输入那些代码吗?
安勒，
我回答了你的问题
然而，格式是丑陋的;有什么建议吗?https://support.heroesempires.com/hc/en-us/articles/5260022672665-Tutorials
移动脚本文件document_head。HBS文件到页脚。哈佛商学院的文件。
将脚本文件移动到页脚。哈佛商学院的文件。
脚本文件:< Script src="//www.ying8.net/support/hc/en-us/community/posts/…" > < > /脚本
模板名称:footer.hbs
并且，将CSS文件保存在document_head中。就像HBS文件一样。
CSS文件:
模板名称:document_head.hbs
我把这些代码从document_head.hbs来footer.hbs:
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js " > < /脚本>
< script src = "{{资产的jquery.toc.min.js}} " > < /脚本>但一切都没有改变。
Anh Le，我认为你不需要做任何其他事情，忘记格式化，移动我们的jquery CDN和TOC到document_head。就像HBS文件一样。
看，你没有把所有的脚本文件移到页脚文件。
你只移动了jquery的CDN和TOC。
现在的误差是:
把jQuery和TOC移到document_head。哈佛商学院的文件。那么最终的结果将是:
您的TOC显示:
请登录留下评论。
38岁的评论