百度编辑器的锚点用法教程

image.png

百度编辑器的锚点用途分两种:

内部关联

    最普通的锚点,最简单最直接的浏览器效果,在内容指定处放置锚点,给文本加上锚点链接,点击链接会跳到锚点位置。

    image.png


    操作方法

        设定锚点

        image.png

        给文本加上锚点超链接

        image.png

        设定完后要确认提交保存内容


目录大纲

    在文档手册的右侧有个浮动的目录大纲,点击每一个文本链接会跳到锚点位置。(制作时繁琐一点)

    image.png

    操作方法

        先设定一级锚点

        image.png

        设置二级锚点

        image.png

        依次设定了其他锚点

        image.png

        设定完后要确认提交保存内容

        

    模板改动(只改动内容详情页模板)

        1. 查看确认模板里有没引入了jquery,大部分网站基本都有引入,没有引入的自己先引入(不懂就百度)

        2. 在模板的最底部</body>前加上目录结构浮动和展示的代码:

        <div id="ey_outline_toc">
            <h4>目录</h4>
        </div>
        <style type="text/css">
            #ey_outline_toc {
                display: none;
                position: fixed;
                right: 0;
                top: 100px;
                bottom: 0;
                width: 300px;  /* 或者你需要的任何宽度 */
                text-align: center;  /* 或者你需要的任何对齐方式 */
                padding: 20px;  /* 根据需要添加一些内边距 */
            }
        </style>
        <script type="text/javascript">
            ey_outline_toc('article_content_41_v061972', 'ey_outline_toc');
        </script>

        3. 在模板里找到内容标签 {$eyou.field.content} ,用 <div id="article_content_41_v061972"></div> 包住,比如:

        <div id="article_content_41_v061972">
            {$eyou.field.content}
        </div>

        4. 清除后台缓存,强制刷新浏览器查看页面的目录大纲效果了

文档最后更新时间:2023-10-23 11:12:53

文档
目录

深色
模式

切换
宽度