Shopify、Shopify SEO 优化、Shopify 一般探讨

Shopify 博客如何插入目录？-免费，无需插件

作者onenightrich，发布于 。

Shopify一直坚持能用就好，能不加的功能就不加。这导致了shopify的博客功能十分单调，如果你想在你的博客里插入一个目录，对不起你得下载插件。有免费的也有付费的，但是为了一个博客目录去下载一个插件总感觉很亏。下面让我们一起来研究一下。

内容 隐藏
1 1、首先在shopify里将博客写完，格式要有标题
2 2、修改HMTL代码，并将他们粘贴到博客
3 3、一些说明

1、首先在shopify里将博客写完，格式要有标题

在shopify里将博客写完，要有标题格式，然后点击显示HTML。

得到下面的HTML代码。H2就是2级目录，我们要将这些提出来列在博客开头方便观众老爷来阅读。

<p>shopify目录插入</p>
<h2>标题1</h2>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1</p>
<h2>标题2</h2>
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<h2>标题3</h2>
<p>段落3段落3段落3段落3段落3段落3段落3段落3段落3</p>
<h2>标题4</h2>
<p>段落4段落4段落4段落4段落4段落4段落4段落4段落4</p>

2、修改HMTL代码，并将他们粘贴到博客

<div id="table_of_contents" style="border: 2px solid rgb(212, 132, 75); background: rgb(255, 255, 255); padding: 18px; color: rgb(51, 51, 51); margin-bottom: 35px; border-radius: 20px;">
    <h3>Table of Contents:<span style="margin-left: 20px;">[<a href="#" id="TocToggle" onclick="var elemento=document.getElementById('TocToggle');var toc=document.getElementById('toc');if(elemento.innerHTML=='hide'){elemento.innerHTML='show';toc.style.display='none';toc.style.transition='visibility 0s linear 0.33s, opacity 0.33s linear';}else{elemento.innerHTML='hide';toc.style.display='block';toc.style.transitionDelay='0s';}">hide</a>]</span></h3>
    <ul id="toc" style="list-style-type: none;">
        <ul style="list-style-type: none; padding: 0px 0px 0px 1em;">
            <li><a href="#标题1" style="color: rgb(0, 0, 0); text-decoration: none;">标题1</a></li>
        </ul>
        <ul style="list-style-type: none; padding: 0px 0px 0px 1em;">
            <li><a href="#标题2" style="color: rgb(0, 0, 0); text-decoration: none;">标题2</a></li>
        </ul>
        <ul style="list-style-type: none; padding: 0px 0px 0px 1em;">
            <li><a href="#标题3" style="color: rgb(0, 0, 0); text-decoration: none;">标题3</a></li>
        </ul>
        <ul style="list-style-type: none; padding: 0px 0px 0px 1em;">
            <li><a href="#标题4" style="color: rgb(0, 0, 0); text-decoration: none;">标题4</a></li>
        </ul>
    </ul>
</div>

<body>
    <p>shopify目录插入</p>
    <h2 id="标题1">标题1</h2>
    <p>段落1段落1段落1段落1段落1段落1段落1段落1段落1</p>
    <h2 id="标题2">标题2</h2>
    <p>段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
    <h2 id="标题3">标题3</h2>
    <p>段落3段落3段落3段落3段落3段落3段落3段落3段落3</p>
    <h2 id="标题4">标题4</h2>
    <p>段落4段落4段落4段落4段落4段落4段落4段落4段落4</p>
</body>

通过观察这两个代码你可以发现就是加了一些代码进去，其余的还是文章内容。

将修改后的代码整个复制到shopify。

保存以后你就会发现，现在你的文章已经有了目录，可以点击目录跳转正文，而且还是可以隐藏的哦！

3、一些说明

不懂代码也没有关系，只要对照着修改标题和段落就好了。基础的HTML代码可以去一些教程网看看，比如下面的这个网站。

https://www.runoob.com/html/html-tutorial.html

有了目录会让观众姥爷一进来就能了解你的文章在说啥，大大方便了阅读，提高了文章的丰富性和可读性。

目录在SEO方面更能体现出价值，因为搜索引擎抓取您目录中的链接并可以从中索引关键字！

所以博客爱好者们，行动起来，为shopify博客做点事情。