【前端项目】博客系统(页面设计)

谁践踏了优雅 2024-04-27 07:39 66阅读 0赞

#### 文章目录 ####

*  一、预期效果
 *  二、实现博客列表页
 *  三、实现博客正文页
 *  四、实现博客登录页
 *  五、实现博客编辑页

--------------------

## 一、预期效果 ##

代码详情见：[gitee链接][gitee]

? **博客列表页效果**

![在这里插入图片描述][385a28cc2723434090af488173164148.png]

? **博客详情页效果**

![在这里插入图片描述][169526394d5b4813860ce17060d3747b.png]

? **博客登录页效果**

![在这里插入图片描述][f792503adcae4fe0a640b061bc2157d4.png]

? **博客编辑页效果**

![在这里插入图片描述][c61f451fde4242d4a7427022be1addb9.png]

--------------------

## 二、实现博客列表页 ##

? **blog\_list.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>博客列表</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/blog_list.css">
    </head>
    <body>
    <div class="nav">
        <img src="img/1000.webp" alt="">
        <span class="title">我的博客系统</span>
       <div class="spacer" ></div>
        <a href="blog_list.html">主页</a>
        <a href="bolg_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
        <div class="container">
            <div class="container-left">
                <div class="card">
    <img src="img/3.webp" alt="">
                    <h3>星河万里ベ</h3>
                 <a href="https://gitee.com/">gitee 地址</a>
                    <div class="counter">
                       <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
    
            <div class="cntainer-right">
    
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2023-9-12 9:00:00</div>
                    <div class="desc">
                        在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                        我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                    </div>
                    <a href="blog_detail.html">查看全文 >> </a>
                </div>
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2023-9-12 9:00:00</div>
                    <div class="desc">
                        在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                        我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                    </div>
                    <a href="blog_detail.html">查看全文 >> </a>
                </div>
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2023-9-12 9:00:00</div>
                    <div class="desc">
                        在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                        我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                    </div>
                    <a href="blog_detail.html">查看全文 >> </a>
                </div>
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2023-9-12 9:00:00</div>
                    <div class="desc">
                        在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                        我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                    </div>
                    <a href="blog_detail.html">查看全文 >> </a>
                </div>
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2023-9-12 9:00:00</div>
                    <div class="desc">
                        在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                        我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                    </div>
                    <a href="blog_detail.html">查看全文 >> </a>
                </div>
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2023-9-12 9:00:00</div>
                    <div class="desc">
                        在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                        我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                    </div>
                    <a href="blog_detail.html">查看全文 >> </a>
                </div>
            </div>
        </div>
    </body>
    </html>

? **common.css**

/*  清除浏览器的默认样式*/
    *{
        
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html{
        
        height: 100%;
    }
    
    body{
        
        height: 100%;
        background-image:url("../img/back.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    
    
    }
    .nav{
        
        /*导航栏高度大多数都是50px*/
        height: 50px;
        background-color: rgba(50,50,50,0.4);
        color: white;
       display: flex;
        justify-content: flex-start;
        align-items: center;
        /*开启弹性布局 加上这个属性的元素 子元素就会按照弹性布局来排列*/
        /*子元素就不在按照 “块级元素” “行内元素”*/
        /*    !*flex布局可以让内边距里的元素更大（点击区域更大）*!*/
    
        /*flex-start 按照左排列*/
        /*子类元素可以使用justify-content来控制元素在水平方向如何排列*/
        /*子元素还可以使用align-items控制元素在垂直方向如何排列*/
    
    }
    
    .nav img{
        
        width:40px;
        height: 40px;
        margin-left: 30px;
        margin-right: 10px;
        border-radius:20px;
    }
    
    .nav .spacer{
        
        /*宽度设置成百分比的形式，以父元素为基准，设置为当前的尺寸*/
        width: 70%;
        height: 40px;
    }
    
    .nav a{
        
        color: white;
        text-decoration: none;
        padding: 0 10px;
    
    }
    
    .container{
        
        width: 1000px;
        margin: 0 auto;
    /* 设置高度 */
        height: calc(100% - 50px);
        display: flex;
        justify-content: space-between;
    
     }
    
    .container .container-left{
        
        height: 100%;
        width: 200px;
        /*background-color: rgb(128,0,0);*/
    }
    
    .container .cntainer-right{
        
        height: 100%;
        width: 796px;
        background-color: rgba(255,255,255,0.8);
        /*background-color: rgb(0,128,0);*/
        padding: 20px;
        border-radius: 20px;
        /*如果内容超出范围了 就自动添加滚动条*/
        overflow: auto;
    }
    
    .card{
        
        background-color:rgba(255,255,255,0.8);
    /* 设置内边距 就是让文字和图片不要盯着边界*/
    padding:30px;
        border-radius: 20px;
    }
    
    .card img{
        
        width: 140px;
        height: 140px;
         border-radius: 70px;
    }
    
    .card h3{
        
        text-align: center;
        padding: 10px;
    
    }
    
    .card a{
        
        /*a 默认是行内元素 默认是尺寸和内容*/
        display: block;
        text-align: center;
        color: #999;
        text-decoration: none;
        padding: 10px 0;
    
    }
    .card .counter{
        
        display: flex;
        justify-content: space-around;
        padding: 5px;
    
    }

? **blog\_list.css**

/*这个文件专门放 博客列表页的专用样式*/
    
    .blog .title{
        
    /*写样式 尽量多用后代选择器/子选择器 慎重直接使用类名
    类名可能会重复的！！！*/
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        padding: 10px 0;
    }
    
    .blog .date{
        
        text-align: center;
        color: rgb(0,128,0);
        padding: 10px 0;
    }
    
    .blog .desc{
        
        text-indent: 2em;
    }
    
    .blog a{
        
        /*转成块级元素 才好设置尺寸*/
        display: block;
        width: 120px;
        height: 40px;
        /*元素水平居中*/
        margin: 0 auto;
        text-align: center;
        /*文字水平居中*/
        line-height: 40px;
        /*文字垂直居中*/
        color: black;
        text-decoration: none;
        /*去掉下划线*/
        border: 2px solid silver ;
        transition: all 1s;
        /*加上一个背景的渐变效果*/
    
    }
    
    .blog a:hover{
        
        background-color: lightcoral;
        color: white;
    }

--------------------

## 三、实现博客正文页 ##

? **blog\_detail.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>博客详情</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/blog_detail.css">
    </head>
    <body>
    <div class="nav">
        <img src="img/1000.webp" alt="">
        <span class="title">我的博客系统</span>
        <div class="spacer" ></div>
        <a href="blog_list.html">主页</a>
        <a href="bolg_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
    
    
    <div class="container">
        <div class="container-left">
    
            <div class="card">
    
                <img src="img/3.webp" alt="">
    
                <h3>星河万里ベ</h3>
                <a href="https://gitee.com/">gitee 地址</a>
                <div class="counter">
    
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
    
            </div>
    
        </div>
    
        <div class="cntainer-right">
            <div class="blog_detail">
                <h3>我的第一篇博客</h3>
                <div class="date">2022-11-06 12:00:00</div>
                <p>
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守。你的微笑是我生命的光芒，它照亮了我沉寂的心房。每当我感到困倦和挫
                    折时，你的微笑带给我无尽的坚持和勇气。你的存在是我奋斗的动力，是我不懈追求的目标，我愿意为你做所有的事情，只为了看到你的笑容绽放。
                </p>
                <p>
                    每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
                    你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
                    的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
                    你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
                </p>
                <p>
                    与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
                    你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
                    ，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
                    朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
                </p>
                <p>
                    我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
                    我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
                    承诺，让我们一起创造一个浪漫而幸福的未来。
                </p>
                <p>
                    我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
                    燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
                    丽故事吧。我爱你，永远爱你。
                </p>
                <p>
                    每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
                    你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
                    的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
                    你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
                </p>
                <p>
                    与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
                    你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
                    ，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
                    朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
                </p>
                <p>
                    我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
                    我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
                    承诺，让我们一起创造一个浪漫而幸福的未来。
                </p>
                <p>
                    我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
                    燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
                    丽故事吧。我爱你，永远爱你。
                </p>
                <p>
                    每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
                    你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
                    的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
                    你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
                </p>
                <p>
                    与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
                    你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
                    ，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
                    朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
                </p>
                <p>
                    我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
                    我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
                    承诺，让我们一起创造一个浪漫而幸福的未来。
                </p>
                <p>
                    我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
                    燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
                    丽故事吧。我爱你，永远爱你。
                </p>
            </div>
    
    
            </div>
    </div>
    </body>
    </html>

? **blog\_detail.css**

.blog_detail h3{
        
        font-size: 20px;
        text-align: center;
        padding: 20px 0;
    
    }
    
    .blog_detail .date{
        
        color: darkmagenta;
        text-align: center;
        padding: 10px 0;
    }
    
    .blog_detail p{
        
        text-indent: 2em;
    }

--------------------

## 四、实现博客登录页 ##

? **login.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/login.css">
    
    </head>
    <body>
    <div class="nav">
      <img src="img/1000.webp" alt="">
      <span class="title">我的博客系统</span>
      <div class="spacer" ></div>
      <a href="blog_list.html">主页</a>
      <a href="bolg_edit.html">写博客</a>
    </div>
    
    
    <div class="login-container">
    
        <div class="dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
    
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <button id="login-btn">登录</button>
            </div>
        </div>
    </div>
    </body>
    </html>

? **login.css**

/*这个文件实现login的页面样式*/
    .login-container{
        
        /*这三个样式是为了让 .dialog垂直水平居中*/
        height: calc(100% - 50px);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .dialog{
        
        width: 400px;
        height: 300px;
        background-color: rgba(255,255,255,0.8);
        border-radius: 20px;
    }
    
    .dialog h3{
        
        font-size: 25px;
        text-align: center;
        padding: 40px 0;
    }
    
    .dialog .row{
        
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .dialog .row span{
        
        width: 80px;
    }
    
    #username, #password{
        
        height: 40px;
        width: 180px;
        font-size: 18px;
        padding-left: 5px;
    }
    
    #login-btn{
        
        width: 260px;
        height: 40px;
        border-radius: 5px;
        background-color: lightcoral;
        color: white;
        border: none;
    /*去掉边框*/
    }
    
    #login-btn:active{
        
        background-color: #999999;
    }

--------------------

## 五、实现博客编辑页 ##

? **引入 editor.md**

`editor.md` 是一个开源的页面 markdown 编辑器组件官网参见: [https://pandao.github.io/editor.md/][https_pandao.github.io_editor.md]，用法可以参考代码中的 examples 目录中的示例. 非常丰富。

1.  下载 editor.md  
    从官网上下载到压缩包. 放到目录中. 目录结构如下：  
    ![在这里插入图片描述][37374898d4c64b23b58966ddb25f0b22.png]
2.  引入 editor.md

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    
    
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

1.  初始化 editor.md

var editor = editormd("editor",{
        
            width:"100%",
            height:"calc(100% - 50px)",
            markdown:"# hello world",
            path:"editor.md/lib/"
        });

--------------------

? **bolg\_edit.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>博客编辑</title>
      <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/bolg_edit.css">
    
    
        <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    
    
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="editor.md/lib/marked.min.js"></script>
        <script src="editor.md/lib/prettify.min.js"></script>
        <script src="editor.md/editormd.js"></script>
    </head>
    <body>
    <div class="nav">
      <img src="img/1000.webp" alt="">
      <span class="title">我的博客系统</span>
      <div class="spacer" ></div>
      <a href="blog_list.html">主页</a>
      <a href="bolg_edit.html">写博客</a>
      <a href="login.html">注销</a>
    </div>
    
    <div class="blog-edit-container">
    
      <div class="title">
    
        <input type="text" id="blog-title" placeholder="在这里输入博客标题">
        <button id="submit">发布文章</button>
      </div>
    
      <div id="editor">
    
      </div>
    </div>
    
    <script>
        var editor = editormd("editor",{
          
            width:"100%",
            height:"calc(100% - 50px)",
            markdown:"# hello world",
            path:"editor.md/lib/"
        });
    </script>
    </body>
    </html>

? **blog\_edit.css**

/*针对博客编辑页写的样式*/
    /*版心*/
    .blog-edit-container{
        
        width: 850px;
        height: calc(100% - 40px);
        margin: 0 auto;
    
    
    }
    
    /*设置编辑区的样式*/
    .blog-edit-container .title{
        
        height: 50px;
    /*只要是水平方向排列多个元素，就想到弹性布局*/
        display: flex;
        justify-content: space-between;
        align-items: center;
    
    
    }
    
    /*针对输入框调整*/
    #blog-title{
        
        height: 40px;
        width: 740px;
        font-size: 20px;
        padding-left: 5px;
        /*去掉轮廓线*/
        outline: none;
        border: none;
    /*加上背景半透明效果*/
        background-color: rgba(255,255,255,0.8);
    
    }
    
    #submit{
        
        height: 40px;
        width: 100px;
        border: none;
        border-radius:5px;
        color: white;
        background-color: orange;
    }
    #submit:active{
        
        background-color: gray;
    }
    
    #editor{
        
        border-radius: 10px;
        background-color: rgba(255,255,255,0.8);
        opacity: 80%;
    }

--------------------

[gitee]: https://gitee.com/lege-yyds/blog_system_page
[385a28cc2723434090af488173164148.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/00a0965c0672459584e625a74d677174.png
[169526394d5b4813860ce17060d3747b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6412269807aa4ece8254992caaff5635.png
[f792503adcae4fe0a640b061bc2157d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/946c4570c41c4c7480656dd80aa33cac.png
[c61f451fde4242d4a7427022be1addb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5a28e19b7f854beca2900082ce8f931e.png
[https_pandao.github.io_editor.md]: https://pandao.github.io/editor.md/
[37374898d4c64b23b58966ddb25f0b22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2dc467fb09d1451299342d26e5a787cb.png