百度編輯器的錨點(diǎn)用法教程

image.png

百度編輯器的錨點(diǎn)用途分兩種:

內(nèi)部關(guān)聯(lián)

    最普通的錨點(diǎn),最簡(jiǎn)單最直接的瀏覽器效果,在內(nèi)容指定處放置錨點(diǎn),給文本加上錨點(diǎn)鏈接,點(diǎn)擊鏈接會(huì)跳到錨點(diǎn)位置。

    image.png


    操作方法

        設(shè)定錨點(diǎn)

        image.png

        給文本加上錨點(diǎn)超鏈接

        image.png

        設(shè)定完后要確認(rèn)提交保存內(nèi)容


目錄大綱

    在文檔手冊(cè)的右側(cè)有個(gè)浮動(dòng)的目錄大綱,點(diǎn)擊每一個(gè)文本鏈接會(huì)跳到錨點(diǎn)位置。(制作時(shí)繁瑣一點(diǎn))

    image.png

    操作方法

        先設(shè)定一級(jí)錨點(diǎn)

        image.png

        設(shè)置二級(jí)錨點(diǎn)

        image.png

        依次設(shè)定了其他錨點(diǎn)

        image.png

        設(shè)定完后要確認(rèn)提交保存內(nèi)容

        

    模板改動(dòng)(只改動(dòng)內(nèi)容詳情頁(yè)模板)

        1. 查看確認(rèn)模板里有沒(méi)引入了jquery,大部分網(wǎng)站基本都有引入,沒(méi)有引入的自己先引入(不懂就百度)

        2. 在模板的最底部</body>前加上目錄結(jié)構(gòu)浮動(dòng)和展示的代碼:

        <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;  /* 或者你需要的任何對(duì)齊方式 */
                padding: 20px;  /* 根據(jù)需要添加一些內(nèi)邊距 */
            }
        </style>
        <script type="text/javascript">
            ey_outline_toc('article_content_41_v061972', 'ey_outline_toc');
        </script>

        3. 在模板里找到內(nèi)容標(biāo)簽 {$eyou.field.content} ,用 <div id="article_content_41_v061972"></div> 包住,比如:

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

        4. 清除后臺(tái)緩存,強(qiáng)制刷新瀏覽器查看頁(yè)面的目錄大綱效果了

文檔最后更新時(shí)間:2023-10-23 11:12:53

文檔
目錄

深色
模式

切換
寬度