对文章显示进行优化，列表增加个性化图标-七弈国象-七弈国象-连接七弈智慧人生

对文章显示进行优化，列表增加个性化图标

2025-04-06 16:46:47 阅读（231）

文章显示进行了优化：

希望增加相应的列表图标，符合国际象棋网站的文化特点

效果如下

一级列表
- 二级列表
  - 三级列表
  - 三级列表
  - 三级列表
- 二级列表
一级列表

对应的css如下：

/* 一级列表项 */
.article-cont ul li::before {
  content: "\265B"; /* 使用Unicode字符表示国象后 */
  margin-right: 5px; /* 可以根据需要调整图标与文本之间的间距 */
}

/* 二级列表项 */
.article-cont ul ul li::before {
  content: "\265E"; /* 使用Unicode字符表示国象马 */
  margin-right: 5px;
}

/* 三级列表项 */
.article-cont ul ul ul li::before {
  content: "\265F"; /* 使用Unicode字符表示国象兵 */
  margin-right: 5px;
}

另外：将文章内容的css从main.css拆出来，方便以后扩展修改，名字为artice.css ，就放在模板库里，artice.html模板文件单独加载，把昨天修改的代码显示对应的css文件以及js文件也只在artice.html中加载，对应的artice.html文件如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> {{article.title}}-{{site.name}}-{{site.title}}</title>
    {{include './common/meta.html'}}
    <link rel="stylesheet" href="{{base_url}}/css/article.css" />
    <link rel="stylesheet" href="{{base_url}}/css/clearPeCode.css" />
    <link rel="stylesheet" href="{{base_url}}/css/prism.css" />

<body class="bg-f8f8f8">
    <!-- 头部 -->
    {{include './common/header.html'}}

    <!-- 头条文章 -->
    <main class="bg-primary pt-10 pb-20 row">

        <div class="main center mt-10 row gap-20">
            <!-- 最新文章 -->
            <article class="article-index">
                <div class="bg-fff radius-6 pd-15 mb-1 f-14 c-999">
                    <i class="ico-20 ico-home pos-r t-3"></i>
                    <a class="" href="/">首页</a> /
                    {{each position}}
                    {{if $index < position.length-1}} <a href="{{$value.path}}/index.html">{{$value.name}}</a> /
                        {{else}}
                        <a class="c-666" href="{{$value.path}}/index.html">{{$value.name}}</a>
                        {{/if}}
                        {{/each}}
                </div>

                <div class="bg-fff radius-6 pd-25">
                    <header class="border-b pos-r">
                        <h2 class="f-26 c-252933  bold mt-10"> <i class="ico-20 ico-speech pos-r t-4 ml-4 mr-4"
                                id="audio"></i> {{article.title}}</h2>
                        <p class="f-12 mt-5 mb-26">
                            <span class="c-999 ">
                                <i class="ico-20 ico-time pos-r t-4"></i> {{article.updatedAt}}
                                <i class="ico-20 ico-admin pos-r t-4 ml-4"></i> {{article.author}}
                                <i class="ico-20 ico-view pos-r t-5 ml-4"></i> 阅读（{{article.pv}}）
                                <!-- <i class="ico-20 ico-zan pos-r t-4 ml-4"></i>点赞（95） -->

                            </span>

                            {{each article.tags}}
                            <a class="el-tag mr-5 mb-5" href="/tags/{{$value.path}}.html"
                                title="{{$value.name}}">{{$value.name}}</a>
                            {{/each}}
                        </p>
                    </header>

                    {{if article.description}}
                    <section class="introduction pd-10 border-6 mb-20 mt-20 lh-25 f-14 bg-primary">
                        「导读」{{@ article.description}}
                    </section>
                    {{/if}}
                    <article id="article" class="article-cont f-17 lh-35">
                        {{@ article.content}}
                    </article>

                </div>

                <footer class="pd-25 bg-fff radius-6 mt-1 f-14 c-333">
                    <p>上一篇：
                        {{if pre}}
                        <a href="{{pre.path}}/article-{{pre.id}}.html" class="c-666">
                            {{pre.title}}
                        </a>
                        {{else}}
                        真的没有了
                        {{/if}}
                    </p>
                    <p class="mt-14">下一篇：
                        {{if next}}
                        <a href="{{next.path}}/article-{{next.id}}.html" class="c-666">
                            {{next.title}}
                        </a>
                        {{else}}
                        真的没有了
                        {{/if}}
                    </p>
                </footer>

            </article>

            <aside class="flex-1">

                <!-- 最新 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 row justify-between">最新文章<span class="more">more</span>
                    </h3>
                    <ul class="mt-10">
                        {{each news}}
                        <li class="f-14 pt-4 pb-4 row justify-between">
                            <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}">
                                {{$value.title}}
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                </section>


                <!-- 图文 热门 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 row justify-between">推荐图文</h3>
                    {{each imgs}}
                    <figure class="row justify-between mt-10">
                        {{if $value.img}}
                        <div class="thumb mb-10">
                            <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}">
                                <img class="w-p100" src="{{$value.img}}" alt="{{$value.title}}"
                                    title="{{$value.title}}">
                            </a>
                        </div>
                        {{/if}}
                        <div class="flex-1">
                            <figcaption class="f-18 ellips-2 bold mt-4">
                                <a href="{{$value.path}}/article-{{$value.id}}.html"
                                    title="{{$value.title}}">{{$value.title}}</a>
                            </figcaption>
                            <p class="f-14 ellips-3">
                                <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}">
                                    <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}">详情
                                    </a>
                            </p>
                        </div>
                    </figure>
                    {{/each}}
                </section>


                <!-- 广告 -->
                <section class="ad mb-20 bg-fff">
                    <!-- {{frag.ad.name}} -->
                    {{@ frag.ad.content}}
                </section>

                <!-- tag标签 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 row justify-between">专题</h3>
                    <p class="mt-10">
                        {{each tag}}
                        <a class="el-tag mr-5 mb-5" href="/tags/{{$value.path}}.html"
                            title="{{$value.name}}">{{$value.name}}</a>
                        {{/each}}
                    </p>
                </section>

                <section class="notices pd-20 mb-20 bg-fff pos-s" style="top:80px;z-index: 2;">
                    <h3 class="m-title border-dashed f-16 row justify-between">目录</h3>
                    <div class="mt-10" id="article-outline">
                    </div>
                </section>
            </aside>

        </div>
    </main>

    <!-- footer -->
    {{include './common/footer.html'}}

    <!-- 移动端导航 -->
    {{include './common/wap-nav.html'}}

    <div class="api mb-20 mt-20 pd-20 bg-primary">
        <h1>接口页面--全局数据：</h1>
        <p class="mb-20">site-> {{site}} </p>
        <p class="mb-20">111-->{{site.json.siteSubtitle}}</p>
        <p class="mb-20">nav-> {{nav}} </p>
        <p class="mb-20">category-> {{category}}</p>
        <p class="mb-20">friendlink-> {{friendlink}}</p>
        <p class="mb-20">base_url-> {{base_url}}</p>
        <p class="mb-20">frag--->{{frag}}</p>
        <p class="mb-20">tag--->{{tag}}</p>

        <p class="mb-20">-----------</p>
        <p class="mb-20">position------>{{position}}</p>
        <p class="mb-20">navSub------>{{navSub}}</p>
        <p class="mb-20">article------>{{article}}</p>

        <p class="mb-20 bg-fff">article.tags------>{{article.tags}}</p>


        <p class="mb-20">news------>{{news}}</p>
        <p class="mb-20">hot------>{{hot}}</p>
        <p class="mb-20">imgs------>{{imgs}}</p>
        <p class="mb-20">pre------>{{pre}}</p>
        <p class="mb-20">next------>{{next}}</p>

    </div>



    {{include './common/js.html'}}
    <script src="{{base_url}}/js/katelog.min.js"></script>

    <script>


        const katelogIns = new katelog({
            contentEl: 'article',
            catelogEl: 'article-outline',
            linkClass: 'k-catelog-link',
            linkActiveClass: 'k-catelog-link-active',
            selector: ['h2', 'h3', 'h4', 'h5', 'h6'],
            supplyTop: 20,
            active: function (el) {
            }
        });

    // const html = '<h2>动态添加的标题</h2>'
    // katelogIns.contentEl.insertAdjacentHTML('afterBegin', html);
    // katelogIns.rebuild();
    </script>
    <script src="{{base_url}}/js/prism.js"></script>
    <script src="{{base_url}}/js/prism-setup.js"></script>

</body>

</html>

接口页面--全局数据：

site-> {"id":1,"name":"七弈国象","domain":"doc.7yi.link","email":"13346163791@qq.com","wx":null,"icp":"浙ICP备2023022652号-1","code":"","json":{"siteSubtitle":"• 工作室"},"title":"七弈国象-连接七弈智慧人生","keywords":"国际象棋,棋谱,pgn,","description":"国际象棋站","createdAt":null,"updatedAt":"2023-11-09T03:50:55.000Z","template":null,"appid":null,"secret":null}

111-->• 工作室

nav-> [{"id":13,"pid":0,"name":"日常工作杂记","pinyin":"richanggongzuozaji","path":"/richanggongzuozaji","sort":4,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/richanggongzuozaji/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/kaifariji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":18,"pid":0,"name":"国象练习","pinyin":"guoxianglianxi","path":"/guoxianglianxi","sort":3,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":19,"pid":0,"name":"信息公布","pinyin":"xinxigongbu","path":"/xinxigongbu","sort":6,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":20,"pid":19,"name":"业界消息","pinyin":"yejiexiaoxi","path":"/qiyiguoxiang/yejiexiaoxi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":21,"pid":19,"name":"七弈动态","pinyin":"qiyidongtai","path":"/xinxigongbu/qiyidongtai","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]}]

category-> [{"id":13,"pid":0,"name":"日常工作杂记","pinyin":"richanggongzuozaji","path":"/richanggongzuozaji","sort":4,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/richanggongzuozaji/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/kaifariji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/richanggongzuozaji/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/kaifariji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":18,"pid":0,"name":"国象练习","pinyin":"guoxianglianxi","path":"/guoxianglianxi","sort":3,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":19,"pid":0,"name":"信息公布","pinyin":"xinxigongbu","path":"/xinxigongbu","sort":6,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":20,"pid":19,"name":"业界消息","pinyin":"yejiexiaoxi","path":"/qiyiguoxiang/yejiexiaoxi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":21,"pid":19,"name":"七弈动态","pinyin":"qiyidongtai","path":"/xinxigongbu/qiyidongtai","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":20,"pid":19,"name":"业界消息","pinyin":"yejiexiaoxi","path":"/qiyiguoxiang/yejiexiaoxi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":21,"pid":19,"name":"七弈动态","pinyin":"qiyidongtai","path":"/xinxigongbu/qiyidongtai","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]

friendlink-> [{"id":1,"title":"七弈国象首页","link":"https://www.7yi.link","sort":0,"createdAt":"2023-07-22T14:59:55.000Z"}]

base_url-> /public/template/default

frag--->{"record":"<p style=\"text-align: center;\"><a href=\"http://beian.miit.gov.cn/\" target=\"_blank\" rel=\"noopener\">浙ICP备2023022652号-1</a></p>","footer-guanyu":"","footer-7yi":"","footer-chess":"","footer-fe":"","chanyue-introduce":"<p>七弈国象：专注于国际象棋开局与战术学习的网站</p>\n<ul>\n<li>国际象棋相关工具开发：<br>\n<ul>\n<li>记谱训练</li>\n<li>识谱工具</li>\n</ul>\n</li>\n<li>国象相关产品\n<ul>\n<li>记录本</li>\n</ul>\n</li>\n<li>电商网站\n<ul>\n<li>畅享一三</li>\n</ul>\n</li>\n<li>通用后台<br>\n<ul>\n<li>7Link通用后台开发系统                                   </li>\n</ul>\n</li>\n</ul>","copyright":"<p style=\"text-align: center;\">杭州七弈智慧科技有限公司版权所有</p>","ad":"<p style=\"text-align: center;\"><a href=\"https://7yi.link/stock/chess/web-mobile/\" target=\"_blank\" rel=\"noopener\"> <img style=\"display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto;\" src=\"/public/uploads/default/2023/09/21/1695286791855_mceu_83563456911695286788809.png.png\"> </a></p>\n<p style=\"text-align: center;\"><a href=\"https://7yi.link/stock/chess/web-mobile/\" target=\"_blank\" rel=\"noopener\">开局树学习</a></p>"}

tag--->[{"id":8,"name":"双马防御","path":"shuangmafangyu"},{"id":7,"name":"开发","path":"kaifa"},{"id":6,"name":"伦敦体系","path":"lunduntixi"},{"id":5,"name":"俄罗斯防御","path":"eluosifangyu"},{"id":1,"name":"cms","path":"cms"}]

-----------

position------>[{"id":13,"pid":0,"name":"日常工作杂记","pinyin":"richanggongzuozaji","path":"/richanggongzuozaji","sort":4,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/richanggongzuozaji/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/kaifariji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/richanggongzuozaji/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]

navSub------>{"cate":{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/richanggongzuozaji/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},"id":14}

article------>{"id":69,"cid":14,"sub_cid":"","title":"对文章显示进行优化，列表增加个性化图标","short_title":"","tag_id":"","attr":"","seo_title":"","seo_keywords":"","seo_description":"","source":"","author":"","description":"文章显示进行了优化：","img":null,"content":"<p>文章显示进行了优化：</p>\n<p>希望增加相应的列表图标，符合国际象棋网站的文化特点</p>\n<p>效果如下<br><br></p>\n<ul>\n<li>一级列表\n<ul>\n<li>二级列表\n<ul>\n<li>三级列表</li>\n<li>三级列表</li>\n<li>三级列表</li>\n</ul>\n</li>\n<li>二级列表</li>\n</ul>\n</li>\n<li>一级列表</li>\n</ul>\n<p>对应的css如下：</p>\n<pre class=\"language-css\"><code>/* 一级列表项 */\n.article-cont ul li::before {\n content: \"\\265B\"; /* 使用Unicode字符表示国象后 */\n margin-right: 5px; /* 可以根据需要调整图标与文本之间的间距 */\n}\n\n/* 二级列表项 */\n.article-cont ul ul li::before {\n content: \"\\265E\"; /* 使用Unicode字符表示国象马 */\n margin-right: 5px;\n}\n\n/* 三级列表项 */\n.article-cont ul ul ul li::before {\n content: \"\\265F\"; /* 使用Unicode字符表示国象兵 */\n margin-right: 5px;\n}\n</code></pre>\n<p> </p>\n<p> </p>\n<p> </p>\n<p>另外：将文章内容的css从main.css拆出来，方便以后扩展修改，名字为artice.css ，就放在模板库里，artice.html模板文件单独加载，把昨天修改的代码显示对应的css文件以及js文件也只在artice.html中加载，对应的artice.html文件如下：</p>\n<pre class=\"language-markup\"><code><!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <title> {{article.title}}-{{site.name}}-{{site.title}}</title>\n {{include './common/meta.html'}}\n <link rel=\"stylesheet\" href=\"{{base_url}}/css/article.css\" />\n <link rel=\"stylesheet\" href=\"{{base_url}}/css/clearPeCode.css\" />\n <link rel=\"stylesheet\" href=\"{{base_url}}/css/prism.css\" />\n\n<body class=\"bg-f8f8f8\">\n \n {{include './common/header.html'}}\n\n \n <main class=\"bg-primary pt-10 pb-20 row\">\n\n <div class=\"main center mt-10 row gap-20\">\n \n <article class=\"article-index\">\n <div class=\"bg-fff radius-6 pd-15 mb-1 f-14 c-999\">\n <i class=\"ico-20 ico-home pos-r t-3\"></i>\n <a class=\"\" href=\"/\">首页</a> /\n {{each position}}\n {{if $index < position.length-1}} <a href=\"{{$value.path}}/index.html\">{{$value.name}}</a> /\n {{else}}\n <a class=\"c-666\" href=\"{{$value.path}}/index.html\">{{$value.name}}</a>\n {{/if}}\n {{/each}}\n </div>\n\n <div class=\"bg-fff radius-6 pd-25\">\n <header class=\"border-b pos-r\">\n <h2 class=\"f-26 c-252933 bold mt-10\"> <i class=\"ico-20 ico-speech pos-r t-4 ml-4 mr-4\"\n id=\"audio\"></i> {{article.title}}</h2>\n <p class=\"f-12 mt-5 mb-26\">\n <span class=\"c-999 \">\n <i class=\"ico-20 ico-time pos-r t-4\"></i> {{article.updatedAt}}\n <i class=\"ico-20 ico-admin pos-r t-4 ml-4\"></i> {{article.author}}\n <i class=\"ico-20 ico-view pos-r t-5 ml-4\"></i> 阅读（{{article.pv}}）\n \n\n </span>\n\n {{each article.tags}}\n <a class=\"el-tag mr-5 mb-5\" href=\"/tags/{{$value.path}}.html\"\n title=\"{{$value.name}}\">{{$value.name}}</a>\n {{/each}}\n </p>\n </header>\n\n {{if article.description}}\n <section class=\"introduction pd-10 border-6 mb-20 mt-20 lh-25 f-14 bg-primary\">\n 「导读」{{@ article.description}}\n </section>\n {{/if}}\n <article id=\"article\" class=\"article-cont f-17 lh-35\">\n {{@ article.content}}\n </article>\n\n </div>\n\n <footer class=\"pd-25 bg-fff radius-6 mt-1 f-14 c-333\">\n <p>上一篇：\n {{if pre}}\n <a href=\"{{pre.path}}/article-{{pre.id}}.html\" class=\"c-666\">\n {{pre.title}}\n </a>\n {{else}}\n 真的没有了\n {{/if}}\n </p>\n <p class=\"mt-14\">下一篇：\n {{if next}}\n <a href=\"{{next.path}}/article-{{next.id}}.html\" class=\"c-666\">\n {{next.title}}\n </a>\n {{else}}\n 真的没有了\n {{/if}}\n </p>\n </footer>\n\n </article>\n\n <aside class=\"flex-1\">\n\n \n <section class=\"notices pd-20 mb-20 bg-fff\">\n <h3 class=\"m-title border-dashed f-16 row justify-between\">最新文章<span class=\"more\">more</span>\n </h3>\n <ul class=\"mt-10\">\n {{each news}}\n <li class=\"f-14 pt-4 pb-4 row justify-between\">\n <a href=\"{{$value.path}}/article-{{$value.id}}.html\" title=\"{{$value.title}}\">\n {{$value.title}}\n </a>\n </li>\n {{/each}}\n </ul>\n </section>\n\n\n \n <section class=\"notices pd-20 mb-20 bg-fff\">\n <h3 class=\"m-title border-dashed f-16 row justify-between\">推荐图文</h3>\n {{each imgs}}\n <figure class=\"row justify-between mt-10\">\n {{if $value.img}}\n <div class=\"thumb mb-10\">\n <a href=\"{{$value.path}}/article-{{$value.id}}.html\" title=\"{{$value.title}}\">\n <img class=\"w-p100\" src=\"{{$value.img}}\" alt=\"{{$value.title}}\"\n title=\"{{$value.title}}\">\n </a>\n </div>\n {{/if}}\n <div class=\"flex-1\">\n <figcaption class=\"f-18 ellips-2 bold mt-4\">\n <a href=\"{{$value.path}}/article-{{$value.id}}.html\"\n title=\"{{$value.title}}\">{{$value.title}}</a>\n </figcaption>\n <p class=\"f-14 ellips-3\">\n <a href=\"{{$value.path}}/article-{{$value.id}}.html\" title=\"{{$value.title}}\">\n <a href=\"{{$value.path}}/article-{{$value.id}}.html\" title=\"{{$value.title}}\">详情\n </a>\n </p>\n </div>\n </figure>\n {{/each}}\n </section>\n\n\n \n <section class=\"ad mb-20 bg-fff\">\n \n {{@ frag.ad.content}}\n </section>\n\n \n <section class=\"notices pd-20 mb-20 bg-fff\">\n <h3 class=\"m-title border-dashed f-16 row justify-between\">专题</h3>\n <p class=\"mt-10\">\n {{each tag}}\n <a class=\"el-tag mr-5 mb-5\" href=\"/tags/{{$value.path}}.html\"\n title=\"{{$value.name}}\">{{$value.name}}</a>\n {{/each}}\n </p>\n </section>\n\n <section class=\"notices pd-20 mb-20 bg-fff pos-s\" style=\"top:80px;z-index: 2;\">\n <h3 class=\"m-title border-dashed f-16 row justify-between\">目录</h3>\n <div class=\"mt-10\" id=\"article-outline\">\n </div>\n </section>\n </aside>\n\n </div>\n </main>\n\n \n {{include './common/footer.html'}}\n\n \n {{include './common/wap-nav.html'}}\n\n <div class=\"api mb-20 mt-20 pd-20 bg-primary\">\n <h1>接口页面--全局数据：</h1>\n <p class=\"mb-20\">site-> {{site}} </p>\n <p class=\"mb-20\">111-->{{site.json.siteSubtitle}}</p>\n <p class=\"mb-20\">nav-> {{nav}} </p>\n <p class=\"mb-20\">category-> {{category}}</p>\n <p class=\"mb-20\">friendlink-> {{friendlink}}</p>\n <p class=\"mb-20\">base_url-> {{base_url}}</p>\n <p class=\"mb-20\">frag--->{{frag}}</p>\n <p class=\"mb-20\">tag--->{{tag}}</p>\n\n <p class=\"mb-20\">-----------</p>\n <p class=\"mb-20\">position------>{{position}}</p>\n <p class=\"mb-20\">navSub------>{{navSub}}</p>\n <p class=\"mb-20\">article------>{{article}}</p>\n\n <p class=\"mb-20 bg-fff\">article.tags------>{{article.tags}}</p>\n\n\n <p class=\"mb-20\">news------>{{news}}</p>\n <p class=\"mb-20\">hot------>{{hot}}</p>\n <p class=\"mb-20\">imgs------>{{imgs}}</p>\n <p class=\"mb-20\">pre------>{{pre}}</p>\n <p class=\"mb-20\">next------>{{next}}</p>\n\n </div>\n\n\n\n {{include './common/js.html'}}\n <script src=\"{{base_url}}/js/katelog.min.js\"></script>\n\n <script>\n\n\n const katelogIns = new katelog({\n contentEl: 'article',\n catelogEl: 'article-outline',\n linkClass: 'k-catelog-link',\n linkActiveClass: 'k-catelog-link-active',\n selector: ['h2', 'h3', 'h4', 'h5', 'h6'],\n supplyTop: 20,\n active: function (el) {\n }\n });\n\n // const html = '<h2>动态添加的标题</h2>'\n // katelogIns.contentEl.insertAdjacentHTML('afterBegin', html);\n // katelogIns.rebuild();\n </script>\n <script src=\"{{base_url}}/js/prism.js\"></script>\n <script src=\"{{base_url}}/js/prism-setup.js\"></script>\n\n</body>\n\n</html></code></pre>\n<p> </p>","status":0,"pv":231,"link":"","createdAt":"2023-10-16 05:01:44","updatedAt":"2025-04-06 16:46:47","field":{},"tags":[]}

article.tags------>[]

news------>[{"id":252,"title":"ollama运行命令","short_title":"","img":"","createdAt":"2024-11-23T07:55:32.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":173,"title":"新网站上线的后续工作预告","short_title":"","img":"","createdAt":"2024-04-11T07:03:05.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":154,"title":"Bootstrap框架的css定义说明 ","short_title":"","img":"","createdAt":"2024-01-28T05:11:47.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":125,"title":"界面设计要求","short_title":"","img":"/public/uploads/default/2023/12/30/1703937436442_origin-mceclip0png","createdAt":"2023-12-30T08:21:24.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":122,"title":"行棋记录验证正则表达式详解","short_title":"","img":"","createdAt":"2023-12-08T12:36:00.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":121,"title":"表格数据清洗","short_title":"","img":"","createdAt":"2023-12-07T02:46:21.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":114,"title":"开发依赖库说明以及项目配置信息说明","short_title":"","img":"","createdAt":"2023-11-29T01:23:34.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":113,"title":"编辑前端项目问题","short_title":"","img":"","createdAt":"2023-11-28T04:57:00.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":112,"title":"在线编辑excel","short_title":"","img":"","createdAt":"2023-11-27T09:15:03.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":103,"title":"表格结构识别结果说明文档","short_title":"","img":"","createdAt":"2023-11-10T10:00:26.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"}]

hot------>[{"id":46,"title":"Cocos Creator自适应宽度组件教程：ScaleWithParentWidth","path":"/cmsgaijin/qianduan"},{"id":74,"title":"微信小程序的一些问题","path":"/cmsgaijin/qianduan"},{"id":100,"title":"CMS系统升级到最新版","path":"/cmsgaijin/qianduan"},{"id":72,"title":"棋谱识别开发记录","path":"/cmsgaijin/qianduan"},{"id":50,"title":"cocos creator发布成微信小程序（非小游戏）","path":"/cmsgaijin/qianduan"},{"id":112,"title":"在线编辑excel","path":"/cmsgaijin/qianduan"},{"id":17,"title":"七弈国象-研发记录（https://doc.7yi.link)上线","path":"/cmsgaijin/qianduan"},{"id":122,"title":"行棋记录验证正则表达式详解","path":"/cmsgaijin/qianduan"},{"id":67,"title":"对禅悦CMS的代码显示功能进行个性化，让它变成自己习惯的风格","path":"/cmsgaijin/qianduan"},{"id":121,"title":"表格数据清洗","path":"/cmsgaijin/qianduan"}]

imgs------>[{"id":125,"title":"界面设计要求","short_title":"","img":"/public/uploads/default/2023/12/30/1703937436442_origin-mceclip0png","createdAt":"2023-12-30T08:21:24.000Z","description":"","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":100,"title":"CMS系统升级到最新版","short_title":"","img":"/public/uploads/default/2023/11/09/1699532940524_origin-mceclip0png","createdAt":"2023-11-09T12:02:37.000Z","description":"明空的版本更新很快，所以抽时间把版本更新到最新版","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":78,"title":"一次快乐的bug修改","short_title":"","img":"/public/uploads/default/2023/11/01/1698823694419_mceclip0.png.png","createdAt":"2023-10-31T23:26:39.000Z","description":"根据标识的位置直接进行了修正。非常感谢","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":75,"title":"首个用户反馈-来自Mr.上官","short_title":"","img":"/public/uploads/default/2023/10/29/1698545436900_mceclip0.jpg.jpg","createdAt":"2023-10-28T18:09:35.000Z","description":"进来以后，并没有感到自己注册成功，","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":74,"title":"微信小程序的一些问题","short_title":"","img":"/public/uploads/default/2023/10/27/1698441878047_mceclip0.jpg.jpg","createdAt":"2023-10-27T13:19:45.000Z","description":"\ndoc网站\n\ndoc网站中的导语不要展现出来了，对于现在快阅读的时代，已经不实用了\n广告宽度没有限制，影响页面内容页面的宽度\n\n\n小程序\n\n微信用户原有接口小程序不许再读取了，提供了让用户修改资料的方式来读取\n用户金币显示先取消，相关逻辑还没上线\n修改资料有问题，会错误判断资料没有修改\n按钮要配上声音\n\n上面这个只盖住了一半\n\n这个需要把动画加上\n完成开局以后在小程序中数据无法提交\nipad界面我的文字显示太小\n用户进入就注册，做到无感注册\n用户资料修改的web小程序内置版\n\n\n \n","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":72,"title":"棋谱识别开发记录","short_title":"","img":"/public/uploads/default/2023/10/25/1698207506409_mceclip0.png.png","createdAt":"2023-10-24T18:22:22.000Z","description":"一准备工作\n\n安装Python\n安装OpenCV\n//更新一下pip 在不翻的情况下，更新不成功\n\npython.exe -m pip install --upgrade pip\n\n//安装一下openCV python版本\npip install opencv-python\n\n安装Tesseract\n\n\n// 安装地址\nhttps://github.com/UB-Mannheim/tesseract/wiki\n\n//安装的时候，注意要选择复选中文的相关库\n\n//在系统环境变量里添加路径\n\nC:\\Pr","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":67,"title":"对禅悦CMS的代码显示功能进行个性化，让它变成自己习惯的风格","short_title":"","img":"/public/uploads/default/2023/10/13/1697179493540_mceclip1.png.png","createdAt":"2023-10-12T22:41:43.000Z","description":"1 要显示行号2 要显示代码复制按钮3 要背景黑色","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":61,"title":"如何在文章里插入其它网站的信息","short_title":"","img":"/public/uploads/default/2023/10/11/1696985332888_mceclip0.png.png","createdAt":"2023-10-10T16:46:42.000Z","description":" ","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":58,"title":"在微信开发工具调试小程序，一直拿不到用户信息","short_title":"","img":"https://res.wx.qq.com/op_res/rm8CjueDGoqfBrYaFIm5tNS8j1LciYO0i-XLEbXGAayNvR1VI_TVu62YeNPLSHICbMP6cmjX_dWagWQdRjXY8w","createdAt":"2023-10-09T19:21:44.000Z","description":"读取到的用户信息一直是微信用户，女原因：2023年8月，在用户隐私协议中没有设置相关信息读取","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"},{"id":47,"title":"cocos creator使用免费的图片打包工具 free texture packer","short_title":"","img":"/public/uploads/default/2023/10/04/1696407725293_mceclip0.png.png","createdAt":"2023-10-04T00:16:52.000Z","description":"简介：\ncocos creator的图集功能很不错，打包的软件一般都是收费的，找到一个网页版的打包网站 free textrue packer网站地址：http://free-tex-packer.com/app/","pinyin":"qianduan","name":"前端","path":"/cmsgaijin/qianduan"}]

pre------>{"id":68,"title":"增加一个不错的免费icon下载的地址","name":"前端","path":"/cmsgaijin/qianduan"}

next------>{"id":70,"title":"小程序上线审核进行中","name":"前端","path":"/cmsgaijin/qianduan"}