前端项目 --- 博客系统

2022年05月12日 阅读数:3
这篇文章主要向大家介绍前端项目 --- 博客系统,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1. 博客系统

本博客分为四个页面javascript

  • 博客登陆界面
    在这里插入图片描述css

  • 博客主页界面
    在这里插入图片描述html

  • 博客编辑界面
    在这里插入图片描述前端

  • 博客详情界面
    在这里插入图片描述java

1.1 导航栏

能够看出文章界面中都有共同的导航栏.
导航栏的前端代码:jquery

    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">个人博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创做</a>
        <a href="login.html">注销</a>
    </div>

common.cssios

* {
   
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-image: url(../image/1.jpg); */
}
html,body{
   
   
    height: 100%;
    background-image: url(../image/1.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.nav {
   
   
    width: 100%;
    height: 50px;
    background-color: rgba(54, 54, 54,0.36);
    display: flex;
    justify-content: left;
    align-items: center;
}
.nav img {
   
   
    width: 40px;
    height: 40px;
    margin: 0 10px 0 20px;
    border-radius: 50%;
}
.nav .title{
   
   
    width:83%;
    color:white;
}
.nav a{
   
   
    width: 50px;
    color:white;
    text-decoration: none;
}

.parent{
   
   
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.parent .left{
   
   
    height: 100%;
    width: 200px;
}
.parent .right {
   
   
    height: 100%;
    width: 795px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
}
.left .card{
   
   
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 30px;
}
.left .card img {
   
   
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 10px;
}
.left .card .name{
   
   
    display: block;

    font-size: 30px;
    font-weight: 700;
    text-align: center;
    padding: 5px;
}
.left .card a{
   
   
    display: block;
    width: 140px;
    text-decoration: none;
    color: gray;
    text-align: center;
    padding: 5px;
}
.left .card .one {
   
   
    display: flex;
    justify-content:  space-around;
    align-items: center;
    padding: 10px;
}

在这里插入图片描述

1.2 博客主页界面

home.htmlgit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">个人博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创做</a>
        <a href="login.html">注销</a>
    </div>

    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="../image/头像.jpg">
                <span class="name">蜡笔小新</span>
                <a href="#">github 地址</a>
                <div class='one'>
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class='one'>
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="article">
                <h2 class="title">个人第一篇博客</h2>
                <span class="date">2022-4-17</span>
                <div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
                <a href="art.html" class="more">查看全文&gt;&gt;</a>
            </div>
            <div class="article">
                <h2 class="title">个人第二篇博客</h2>
                <span class="date">2022-4-18</span>
                <div class="desc">昨天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
                <a href="art.html" class="more">查看全文&gt;&gt;</a>
            </div>
        </div>
    </div>

</body>
</html>

list.cssgithub

.article  .title{
   
   
    text-align: center;
    margin: 10px;
}

.article .date{
   
   
    display: block;
    color:green;
    text-decoration: none;
    text-align: center;
    margin: 5px;
}

.article .desc {
   
   
    text-indent: 2em; 
    margin: 5px;
}

.article .more{
   
   
    display: block;
    width: 100px;
    height: 30px;

    line-height: 30px;
    text-align: center;

    margin: 0 auto;
    text-decoration: none;
    border: 1px solid black;
    color:black;
}

.article .more:active{
   
   
    background-color: black;
    color:white;
}

1.3 博客详情界面

art.htmlweb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/moreList.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">个人博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创做</a>
        <a href="login.html">注销</a>
    </div>
    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="../image/头像.jpg">
                <span class="name">蜡笔小新</span>
                <a href="#">github 地址</a>
                <div class='one'>
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class='one'>
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="article">
                <h2 class="title">个人第一篇博客</h2>
                <span class="date">2022-4-17</span>
                <div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque eveniet alias aperiam explicabo rerum odit, voluptatibus nesciunt ducimus nihil officia excepturi possimus, quos incidunt est quidem ad iure dolor adipisci.
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto laborum nemo quasi, rem, ab totam temporibus sapiente commodi beatae deleniti cum? Quos, ipsam dolores sit minus voluptatem repellendus maiores est?</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint amet nihil odit obcaecati aspernatur, totam quas dolores reprehenderit quam officiis tempore explicabo laboriosam aut sit sunt, possimus culpa expedita quis?</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

moreList.css

.article  .title{
   
   
    text-align: center;
    margin: 10px;
}

.article .date{
   
   
    display: block;
    color:green;
    text-decoration: none;
    text-align: center;
    margin: 5px;
}

.article .desc {
   
   
    text-indent: 2em; 
    margin: 5px;
}

.article p{
   
   
    margin-top: 15px;
}

1.4 博客登录界面

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">个人博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创做</a>
        <a href="login.html" style="display: none;">注销</a>
    </div>
    <div id="one">
        <div class="login">
            <div class="text">登陆</div>
            <div class="one"><span class="name">用户名</span><input type="text" class="user"></div>
            <div class="one"><span class="name">密码</span><input type="password" class="password"></div>
            <div class="submit"><button>提交</button></div>
        </div>
    </div>
</body>
</html>

login.css

#one {
   
   
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
   
   
    background-color: rgba(255,255,255,0.8);
    width: 400px;
    padding: 25px;
    border-radius: 10px;
    padding-bottom: 50px;
}

.login .text {
   
   
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    margin: 25px;
}

.login .one{
   
   
    display: flex;
    justify-content: center;
    align-items: center;
}

.login .one .name {
   
   
    
    width: 100px;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
}

.login .one input{
   
   
        width: 200px;
        height: 30px;
        border-radius: 5px;
        padding: 3px;
        border:none;
}

.login .submit button{
   
   
    display: block;
    width: 300px;
    height: 40px;
    background-color: rgb(41, 128, 0);
    margin: 0 auto;
    color: white;
    border: none;
    border-radius: 5px;
}

.login .submit button:hover{
   
   
    background-color: rgba(41,128,0,0.8);
}

.login .submit button:active{
   
   
    background-color: white;
    color:rgb(41, 128, 0);
}

1.5 博客编辑界面

这里咱们采用的是别人实现好的markdown编辑器
https://pandao.github.io/editor.md/
下载以后放到项目目录里
在这里插入图片描述
在edit.html中映入依赖

    <!-- 引入 editor.md 的依赖 -->
    <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>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/edit.css">
    <!-- 引入 editor.md 的依赖 -->
    <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>
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">个人博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创做</a>
        <a href="login.html">注销</a>
    </div>
    <div class="leader">
        <div class="empOne">
            <input type="text" class="title" value="在这里写下文章标题"> 
            <input type="button" value="发布文章" class="publish">
        </div>
        <div id="editor">
            
        </div>
    </div>

    <script>
        // 初始化编辑器
        var editor = editormd("editor", {
     
     
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
            width: "100%",
            // 高度 100% 意思是和父元素同样高. 要在父元素的基础上去掉标题编辑区的高度
            height: "calc(100% - 60px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "../editor.md/lib/"
        });
    </script>
</body>
</html>

edit.css

.leader{
   
   
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}
.leader .empOne{
   
   
    display: flex;
    justify-content: center;
    align-items: center;
}
.leader .empOne .title{
   
   
    width: 800px;
    height: 40px;
    border-radius: 8px;
    outline: none;
    border:1px solid rgba(0,0,0,0.2);
    padding-left: 5px;
    background-color: rgba(255,255,255,0.8);
}
.leader .empOne .publish {
   
   
    margin: 10px;
    width: 180px;
    height: 40px;
    border-radius: 8px;
    border: none;
    color:white;
    background-color: rgb(255,127,39);
}
.leader .empOne .publish:hover{
   
   
    background-color: rgb(255,127,39,0.6);
}
.leader .empOne .publish:active{
   
   
    background-color: #fff;
}

#editor{
   
   
    border-radius: 8px;
    opacity: 80%;
}

这是用来设置编辑页面的属性
在这里插入图片描述