博客系统——前端部分

我就是我 2023-10-14 23:44 36阅读 0赞

![706a0501a50448228a56820eb9b42cb3.png][]

**目录**

一、博客页面介绍

二、实现博客列表页

1、先实现导航栏

2、页面主体

左侧区域的实现：编辑

右侧页面的实现：编辑

博客列表页代码汇总：

三、实现博客详情页

代码实现：

四、实现博客登录页编辑

五、博客编辑页

六、全部代码展示

blog\_detail.html

blog\_edit.html

blog\_list.html

blog\_detail.css

blog\_edit.css

blog\_list.css

common.css

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

## 一、博客页面介绍 ##

要实现一个博客系统，我们得先构造出它的页面：

一共有四个页面:

**1、博客列表页**

![706a0501a50448228a56820eb9b42cb3.png][]

**2、博客详情页：**

显示这一个博客里面的具体内容

![a800269e6c9948789bc420623c0d7947.png][]

**3、登录页**

![2a24c17417e64b82825c2c396ba412e6.png][]

**4、博客编辑页**

发布新博客，在这个博客页面进行编辑

![9224b724e1884dc3b8159f5599a84d2c.png][]

**关于里面的 markdown 编辑器，我们直接使用开源的项目集成进来即可，不需要我们从头实现**

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

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

### **1、先实现导航栏** ###

导航栏各个页面都有

**我们把导航栏的样式给单独放到一个common.css 中，让各个页面来引用**

通过对导航栏进行调整，我们目前的导航栏是这个样子的：![59f2faa55908425291dc2e1b8110b231.png][]

但是我们还缺少一个半透明的效果， 我们可以在设置导航栏颜色的地方加一个数值 a

表示的就是透明度：

![318c9a6ea25740fdad735119df6ab969.png][]

加上透明度后，我们的导航栏是这个样子的：

![9638cf185f71418c863c75f5dfe9e0ca.png][]

<div class="nav">
            <img src="image/logo2.png" alt="">
            <span class = "title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="#">主页</a>
            <a href="#">写博客</a>
            <a href="#">注销</a>
        </div>

**common.css 部分代码：**

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

### 2、页面主体 ###

![61b8266d38df4f8bb2d8ed1da9d9af50.png][]

**设置高度的时候，我们要注意主体页面的高度应该是整个页面的高度减去导航栏的高度**

![5a008e21df354ed1adab2a469bc1fbd7.png][]

这里的 calc 相当于是 CSS 提供的一个函数

**calc可以帮助我们计算页面的尺寸，针对 绝对值 和 百分数 尺寸进行混合运算**

**注意：这里的 - 两侧必须要有一个空格， - 有可能是标识符的一部分，如果 CSS 要想表示减法运算，就得加上空格**

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

#### **左侧区域的实现：**![2007748686554101832c5519f940de6a.png][] ####

![4dee6cfbd00740368fe663fb09340dd2.png][]

我们给图片设置成 140px \* 140px，左右各自留 30px 的间距

同时让图片和上方也有 30px 的间距

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

#### **右侧页面的实现：**![7c8ee8f3b87c4a808c49b613aac0e8ad.png][] ####

先搞定一片，其他的就好办了

**注意：在 html 中，存在一些转义字符： < &lt > &gt**

![12fb53d963284756af3daacbea94540f.png][]

现在有一个问题，那就是当我们多展示几篇博客之后，便会出现这种情况：

![0ef1280a8d054038b39a86aeaef4a0b4.png][]

**针对这个滚动的问题， 我们就可以把滚动条加到 containner-right 上**

**这样滚动的时候，就不会整个页面一起滚动了，而是只滚动一部分**

#### 博客列表页代码汇总： ####

common.css:

/* 写样式的起手：先取出浏览器的公共样式，并且设置 border-box,避免元素盒子被内边距和边框撑大 */
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
    
    html,body{
        /* 
        html 是我们页面的最顶层元素，高度 100% 是相对父元素来说是 100%（和父元素一样高）
        对于 html 标签来说，父元素就是浏览器窗口，浏览器窗口多高，html 就多高
        body 的父亲是 html ，设为 100%，意思是 body 和 html 一样高
        此时，body 和 html 高度和浏览器窗口一样高
        如果不设置高度，此时元素的默认高度取决于内部的内容
         */
        height: 100%;
    
    }
    
    body{
        /* 相对路径的基准路径，就是当前文件所在路径 */
        background-image: url(../image/背景图.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    /* 实现导航栏的样式 */
    
    .nav{
         /* 宽度和父元素一样宽 */
         /* 块级元素来说，样式默认就是100% */
        width:100%;
        height: 50px;
        background-color: rgba(50, 50, 50,0.4);
        color: white;
    
        /* 导航栏里面的元素都是水平排列，弹性布局来设置 */
        display: flex;
        /* 垂直方向子元素居中 */
        align-items: center;
    
    }
    
    .nav img{
        width:40px;
        height: 40px;
        margin-left:30px;
        margin-right: 10px;
        /* 让元素变圆，把内切圆半径设置为宽度的一半，此时就正好是一个圆形 */
        border-radius: 50%;
    }
    
    .nav .spacer{
        width:70%
    }
    
    .nav a{
        color: white;
        /* 去掉下划线 */
        text-decoration: none;
        /* 为了让这几个 a 标签不要贴的这么紧凑，加上个内边距 
        使用 外边距也行，但是内边距更好，内边距也是元素的内容，可以增大用户点击的面积*/
        padding:0 10px;
    
    }
    
    /* 编写页面主体样式 */
    .containner{
        /* 设置主体部分宽度 1000px */
        width: 1000px;
        /* 高度能够填充整个页面*/
        height: calc(100% - 50px);
        /* 水平居中 */
        margin:0 auto;
    
    
        /* 弹性布局 */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .containner-left{
        /* 尺寸写百分数是相对于父元素为基准的 ，这里的父元素是 containner */
        height:100%;
        width:200px;
    
    
    }
    
    .containner-right{
        height:100%;
        /* 此处不设置为800，而是留了 5px,作为中缝 */
        width:795px;
    
        background-color: rgba(255, 255, 255,0.8);
        border-radius: 10px;
    
        /* 让这个元素自己能带上滚动条 */
        /* 这个属性表示如果内容没有溢出，就没有滚动条，如果溢出，就有滚动条 */
        overflow: auto;
    }
    
    /* 左侧用户信息 */
    .card{
        background-color: rgba(255, 255, 255,0.8);
        border-radius: 10px;
        /* 设置内间距，让内容和边框之间有点距离 */
        padding:30px;
    }
    
    /* 用户头像 */
    .card img{
        width:140px;
        height:140px;
        border-radius: 50%;
    }
    
    /* 用户名字 */
    .card h3{
        /* 让文字水平居中 */
        text-align: center;
        /* 让文字和上下都有边距 */
        /* 此处使用内边距和外边距都可，但是会更倾向于 内边距 */
        padding:10px;
    }
    
    /* 用户的 blog 链接 */
    .card a{
        /* a 标签是行内标签 */
        text-align: center;
        /* 为了配合上述样式，设置成块级元素 */
        display: block;
        color: #666;
        text-decoration: none;
        padding:10px;
    }
    
    .card .counter{
        /* 为了让里面的元素水平排列，使用弹性布局 */
        display: flex;
        justify-content: space-around;
        padding:5px;
    }

blog\_list.css

/* 这个文件是给博客列表页实现的样式 */
    
    /* 设置整个博客的容易样式 */
    .blog{
        width:100%;
        padding: 20px;
    }
    
    .blog .title{
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        padding: 10px;
    }
    
    .blog .date{
        text-align: center;
        color: rgb(15,189,114);
        padding:10px;
    }
    
    .blog .desc{
        text-indent: 2em;
    }
    
    .blog a{
        /* a 标签不方便设置样式，所以设置成块级元素 */
        display: block;
        width:120px;
        height:40px;
        /* 设置水平居中 */
        margin-top: 20px auto;
        margin-left: auto;
        margin-right: auto;
        /* 设置一个边框 */
        border: 2px solid black;
        /* 让文字水平居中 */
        text-align: center;
        /* 让文字垂直居中 */
        line-height: 35px;
        /* 去掉下划线*/
        text-decoration: none;
        /* 文字改成黑色 */
        color: black;
        /* 圆角矩形 */
        border-radius: 10px;
        /* 给鼠标悬停加一个过度效果 */
        transition:all 0.8s;
    }
    
    /* 设置一下，让鼠标滑倒按钮上有一个变化 */
    .blog a:hover{
        color:white;
        background-color: #666;
    }

blog\_list.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客列表页</title>
        <link rel="stylesheet" href="CSS/common.css">
        <link rel="stylesheet" href="CSS/blog_list.css">
    </head>
    <body>
        
        <div class="nav">
            <img src="image/logo2.png" alt="">
            <span class = "title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="#">主页</a>
            <a href="#">写博客</a>
            <a href="#">注销</a>
        </div>
        
        <div class="containner">
            
            <div class="containner-left">
                
                <div class="card">
                    
                    <img src="image/logo.jpg" alt="">
                    
                    <h3>馒头警告</h3>
                    <a href="#">blog 地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
    
    
            
        <div class="containner-right">
            
            <div class="blog">
                
                <div class="title">第一篇博客</div>
                
                <div class="date">2023-08-20</div>
                
                <div class="desc">好好学习，天天向上 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam blanditiis iure cum rerum. Libero iusto commodi tempora dolore asperiores, nobis earum officia neque, reprehenderit consectetur minima dolor minus corrupti voluptate.</div>
                
                <a href="#">查看全文 >> </a>
            </div>
                    
                    <div class="blog">
                        
                        <div class="title">第一篇博客</div>
                        
                        <div class="date">2023-08-20</div>
                        
                        <div class="desc">好好学习，天天向上 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam blanditiis iure cum rerum. Libero iusto commodi tempora dolore asperiores, nobis earum officia neque, reprehenderit consectetur minima dolor minus corrupti voluptate.</div>
                        
                        <a href="#">查看全文 >> </a>
                    </div>
                    
                     <div class="blog">
                         
                        <div class="title">第一篇博客</div>
                        
                         <div class="date">2023-08-20</div>
                          
                         <div class="desc">好好学习，天天向上 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam blanditiis iure cum rerum. Libero iusto commodi tempora dolore asperiores, nobis earum officia neque, reprehenderit consectetur minima dolor minus corrupti voluptate.</div>
                         
                         <a href="#">查看全文 >> </a>
                     </div>
         </div>

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

## 三、实现博客详情页 ##

![a21a0580d5a8464fa1228ed15f38eb6b.png][]

导航栏和左侧部分代码，我们可以直接将之前博客列表页相关部分的复制过来

此时，只需要对右侧主体部分进行编写即可

#### 代码实现： ####

blog\_detail.css

/* 这个样式给多个详情页使用 */
    
    .containner-right .title{
        text-align: center;
        padding: 30px;
    
    }
    
    .containner-right .date{
        color: rgb(15,189,114);
        text-align:  center;
        padding:10px;
    
    }
    
    .containner-right .content p{
        text-indent: 2em;
        padding :10px;
    }

blog\_detail.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客详情页</title>
        <link rel="stylesheet" href="CSS/common.css">
        <link rel="stylesheet" href="CSS/blog_detail.css">
    </head>
    <body>
         
         <div class="nav">
            <img src="image/logo2.png" alt="">
            <span class = "title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="#">主页</a>
            <a href="#">写博客</a>
            <a href="#">注销</a>
        </div>
        <div class="containner">
            
            <div class="containner-left">
                
                <div class="card">
                    
                    <img src="image/logo.jpg" alt="">
                    
                    <h3>馒头警告</h3>
                    <a href="#">blog 地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
            
            <div class="containner-right">
                
                <h3 class="title">我的第一篇博客</h3>
                
                <div class="date">2023-08-20</div>
                
                <div class="content">
                    <p>
                        好好学习，天天向上 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto ab ullam suscipit aut illum nostrum accusamus laboriosam id, temporibus amet enim! Alias libero porro officia veritatis aliquam voluptas eveniet quod?
                    </p>
                    <p>
                        第二段内容 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nam obcaecati est quia et, minima impedit culpa nulla asperiores velit praesentium voluptatum similique commodi eum, numquam, saepe modi aliquam porro.
                    </p>
                    <p>
                        第三段内容 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nam obcaecati est quia et, minima impedit culpa nulla asperiores velit praesentium voluptatum similique commodi eum, numquam, saepe modi aliquam porro.
                    </p>
                </div>
            </div>
        </div>
    </body>
    </html>

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

## 四、实现博客登录页![e3e303cb560842bc98d7ce2a54482e99.png][] ##

**注意：登录页面是没有登录按钮的**

注销指的是登录状态，在登录页面还没有进行登录，所以不应该提供注销按钮

在 CSS 中，实现垂直水平居中，有很多的写法

我们可以使用前面学过的弹性布局

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录页面</title>
        <link rel="stylesheet" href="CSS/common.css">
        <link rel="stylesheet" href="CSS/login.css">
    </head>
    <body>
         
         <div class="nav">
            <img src="image/logo2.png" alt="">
            <span class = "title">我的博客系统</span>
            
            <div class="spacer"></div>
            <a href="#">主页</a>
            <a href="#">写博客</a>
        </div>
        
        
        <div class="login-container">
            
            <div class="login-dialog">
                <h3>登录</h3>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id = "username" placeholder="手机号 / 邮箱">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id = "password">
                </div>
                <div class="row">
                    <button id = "submit">登录</button>
                </div>
            </div>
        </div>
    
    </body>
    </html>

/* 这个文件专门放登录页面的样式 */
    .login-container{
        width:100%;
        height:calc(100% - 50px);
        /* 为了让对话框能垂直水平居中，使用弹性布局 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .login-dialog{
        width:400px;
        height:330px;
        background-color: rgba(255,255,255,0.8);
        border-radius: 10px;
    }
    
    .login-dialog h3{
        text-align: center;
        padding:50px 0;
    }
    
    .login-dialog .row{
        display: flex;
        height: 50px;
        justify-content: center;
        align-items: center;
    }
    
    .login-dialog .row span{
        width: 100px;
    }
    
    #username,#password{
        width:200px;
        height: 40px;
        border-radius: 10px;
        /* 去掉边框 */
        border: none;
        /* 放大字体 */
        font-size: 18px;
        padding-left:5px;
    }
    
    #submit{
        width:300px;
        height: 40px;
        color: white;
        background-color: orange;
        border: none;
        border-radius: 10px;
    }
    
    #submit:active{
        background-color: #666;
    }

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

## 五、博客编辑页 ##

editor.md

我们要做的工作：

> 1、把项目下载下来
> 
> 2、把项目引入到我们的代码中
> 
> 3、编写少量代码进行初始化

editor.md 还依赖了另外一个 js 库 ： jquery

**如何引入 jquery？**

**1、网上找到 jquery 源码**

打开浏览器，在搜索框中输入 jquery cdn

![a9ad72b87ff64b918a4e0c8b141793e5.png][]

然后找到这个链接，点开![34a94529a577448c9aa2d4f03346370a.png][]

我们在其中选择这个版本的 jquery：![5a2c06663f69418fbf4e5c1ca83af534.png][]

然后直接复制链接，在新的浏览器页打开

打开链接后，我们所看到的这些东西就是源码：![4abb6bd11efc4c6bb5f3dc4a0db63b32.png][]

在这里，我们有两种做法：

> 1、直接全选这个页面里面的代码，新建一个 js 文件，粘贴进去就行了
> 
> 2、 直接把 cdn 的地址，直接写到 src 的属性中，就不需要手动粘贴了

**2、引入 editor.md**

这个东西需要在 github 中查找

如果 github 打不开，可以尝试使用 steam ++ 作为加速器

在 guthub 中搜索 editor.md

![5ea0d7289d7a4c3e807ace71f38dd518.png][]

然后把源码下载下来![a11bc0cf72804633ba5c924d762c1b01.png][]

然后将文件拷贝到博客页面目录中，并且把这个目录名改成 editor.md

**当前，我们已经把库下载下来了，就需要把这个库引入到项目代码中，也就是让 html 引入库里的文件（引入 css 和 js 文件）**

**如何引入 editor.md?**

**1、先保证页面中有一个 id 为 editor 的 div**

![779f48b85c7b4c53a64c4da3124ec219.png][]

**2、引入 editor.md 对应的 css 和 js ，这些引入代码，必须放到 jquery 引入代码的下面**

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
        <script src="js/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>

**注意：此处代码中的路径必须要和磁盘中的路径一致**

**3、编写初始化代码（官方文档上有，直接复制粘贴即可）**

// 初始化编辑器
            let editor = editormd("editor", {
                // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                width: "100%",
                // 设定编辑器高度
                height: "calc(100% - 50px)",
                // 编辑器中的初始内容
                markdown: "# 在这里写下一篇博客",
                // 指定 editor.md 依赖的插件路径
                path: "editor.md/lib/"
            });

![40947aee43794161b2d7e2788f6336a8.png][]

此时，markdown 编译器就引入完毕了

**当我们给 \#editor 设置背景半透明，但是没有生效**

**这是因为， \#editor 自身半透明，但是这里面的元素不是透明的，导致仍然看不到背景**

我们可以通过 opacity 设置半透明

这个会使所有的子元素都变成半透明

## 六、全部代码展示 ##

### blog\_detail.html ###

### blog\_edit.html ###

### blog\_list.html ###

### login.html ###

### blog\_detail.css ###

### blog\_edit.css ###

/* 这个文件用来写博客编辑页的样式 */
    
    .blog-edit-container{
        width: 1000px;
        height: calc(100% - 50px);
        margin:0 auto;
    }
    
    .blog-edit-container .title{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    #title{
        height: 40px;
        width: 895px;
        border: none;
        padding-left: 5px;
        font-size: 20px;
        border-radius: 10px;
        /* 去掉轮廓线（鼠标选中后的黑圈） */
        outline: none;
        /* 设置背景半透明 */
        background-color: rgba(255,255,255,0.7);
    }
    /*  获取到焦点*/
    #title:focus{
        background-color: white;
    }
    #submit{
        height: 40px;
        width: 100px;
        color:white;
        background-color: orange;
        border-radius: 10px;
        border: none;
    }
    
    #submit:active{
        background-color: #666;
    }
    
    #editor{
        border-radius: 10px;
        opacity: 80%;
    
    }

### blog\_list.css ###

### common.css ###

### login.css ###

[706a0501a50448228a56820eb9b42cb3.png]: https://img-blog.csdnimg.cn/706a0501a50448228a56820eb9b42cb3.png
[a800269e6c9948789bc420623c0d7947.png]: https://img-blog.csdnimg.cn/a800269e6c9948789bc420623c0d7947.png
[2a24c17417e64b82825c2c396ba412e6.png]: https://img-blog.csdnimg.cn/2a24c17417e64b82825c2c396ba412e6.png
[9224b724e1884dc3b8159f5599a84d2c.png]: https://img-blog.csdnimg.cn/9224b724e1884dc3b8159f5599a84d2c.png
[59f2faa55908425291dc2e1b8110b231.png]: https://img-blog.csdnimg.cn/59f2faa55908425291dc2e1b8110b231.png
[318c9a6ea25740fdad735119df6ab969.png]: https://img-blog.csdnimg.cn/318c9a6ea25740fdad735119df6ab969.png
[9638cf185f71418c863c75f5dfe9e0ca.png]: https://img-blog.csdnimg.cn/9638cf185f71418c863c75f5dfe9e0ca.png
[61b8266d38df4f8bb2d8ed1da9d9af50.png]: https://img-blog.csdnimg.cn/61b8266d38df4f8bb2d8ed1da9d9af50.png
[5a008e21df354ed1adab2a469bc1fbd7.png]: https://img-blog.csdnimg.cn/5a008e21df354ed1adab2a469bc1fbd7.png
[2007748686554101832c5519f940de6a.png]: https://img-blog.csdnimg.cn/2007748686554101832c5519f940de6a.png
[4dee6cfbd00740368fe663fb09340dd2.png]: https://img-blog.csdnimg.cn/4dee6cfbd00740368fe663fb09340dd2.png
[7c8ee8f3b87c4a808c49b613aac0e8ad.png]: https://img-blog.csdnimg.cn/7c8ee8f3b87c4a808c49b613aac0e8ad.png
[12fb53d963284756af3daacbea94540f.png]: https://img-blog.csdnimg.cn/12fb53d963284756af3daacbea94540f.png
[0ef1280a8d054038b39a86aeaef4a0b4.png]: https://img-blog.csdnimg.cn/0ef1280a8d054038b39a86aeaef4a0b4.png
[a21a0580d5a8464fa1228ed15f38eb6b.png]: https://img-blog.csdnimg.cn/a21a0580d5a8464fa1228ed15f38eb6b.png
[e3e303cb560842bc98d7ce2a54482e99.png]: https://img-blog.csdnimg.cn/e3e303cb560842bc98d7ce2a54482e99.png
[a9ad72b87ff64b918a4e0c8b141793e5.png]: https://img-blog.csdnimg.cn/a9ad72b87ff64b918a4e0c8b141793e5.png
[34a94529a577448c9aa2d4f03346370a.png]: https://img-blog.csdnimg.cn/34a94529a577448c9aa2d4f03346370a.png
[5a2c06663f69418fbf4e5c1ca83af534.png]: https://img-blog.csdnimg.cn/5a2c06663f69418fbf4e5c1ca83af534.png
[4abb6bd11efc4c6bb5f3dc4a0db63b32.png]: https://img-blog.csdnimg.cn/4abb6bd11efc4c6bb5f3dc4a0db63b32.png
[5ea0d7289d7a4c3e807ace71f38dd518.png]: https://img-blog.csdnimg.cn/5ea0d7289d7a4c3e807ace71f38dd518.png
[a11bc0cf72804633ba5c924d762c1b01.png]: https://img-blog.csdnimg.cn/a11bc0cf72804633ba5c924d762c1b01.png
[779f48b85c7b4c53a64c4da3124ec219.png]: https://img-blog.csdnimg.cn/779f48b85c7b4c53a64c4da3124ec219.png
[40947aee43794161b2d7e2788f6336a8.png]: https://img-blog.csdnimg.cn/40947aee43794161b2d7e2788f6336a8.png