Table of contents
2.3 Realization of personal information
3. Implement the blog text page
3.1Introducing the navigation bar
3.2 Introduction of version center
3.3 Introducing personal information
4. Implement blog landing page
4.1Introducing the navigation bar
5. Implement blog editing page
5.1Introducing the navigation bar
Preface
Implement a simple blog system.
Currently, the page design part is completed. Build the web page through the front-end knowledge learned previously.
Mainly Divided into four pages:
Blog list page
Blog text page
Blog landing page
Blog edit page
1. Expected effects
1.1 Blog list page effect
1.2 Blog details page effect
1.3 Blog landing page effect
2. Implement blog list page
Create blog_list.html and write the blog list page.
2.1 Implement navigation bar
Edit blog_list.html and create the html code of the navigation bar.
The navigation bar contains the logo, title, and some buttons (jump links).
In order to achieve left and right arrangement, add a spacer as a placeholder between the logo and the button.
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>Prepare a logo2.jpg and put it in the img directory.
Create common.css.
For the navigation bar, every page needs it, so extract the style.
Clear the browser first Default style
Prepare a cat.jpg as the background image.
You need to set both the html and body height to 100% so that the background height is the same as the browser window height. Same.
The navigation bar nav uses flex layout internally to arrange the logo and some buttons.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置整体页面高度 */
html, body {
height: 100%;
background-image: url(../img/cat.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* 上方导航栏 */
.nav {
width: 100%;
height: 50px;
background-color: rgba(51, 51, 51, 0.4);
color: #fff;
display: flex;
justify-content: left;
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: #fff;
text-decoration: none;
padding: 0 10px;
}Introduce common.css
<link rel="stylesheet" href="css/conmmon.css">2.2 Achieve version center
Edit blog_list.html
The container is used as the center of the page to achieve the effect of center alignment.
Put user information on the left side
Put the blog list on the right
<!-- 版心 -->
<div class="container">
<!-- 左侧个人信息 -->
<div class="container-left">
</div>
<!-- 右侧内容详情 -->
<div class="container-right">
</div>
</div>Edit common.css
/* 页面内容容器, 版心 */
.container {
/* 使用 calc 计算高度 */
height: calc(100% - 50px);
/* 设置版心宽度 */
width: 1000px;
/* 水平居中 */
margin: 0 auto;
/* 使用弹性布局 */
display: flex;
justify-content: space-between;
align-items: center;
}
/* 左侧部分, 用来放置用户信息 */
.container-left {
height: 100%;
width: 200px;
}
/* 右侧部分, 用来放置正文 */
.container-right {
height: 100%;
/* 和左侧部分中间留出 5px 间隙 */
width: 795px;
/* 如果内容溢出就自动加上滚动条 */
overflow: auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}2.3 Realization of personal information
Edit blog_list.html
Put personal information in a .card div.
Personal information includes avatar (img), username ( h3), the user's github (a), the number of articles and categories of the user.
<!-- 左侧个人信息 -->
<div class="container-left">
<div class="card">
<img src="img/doge.jpg" class="avtar" alt="">
<h3>小林</h3>
<a href="http:www.github.com">github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>Edit common.css
/* 展示用户信息的卡片 */
.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;
}
/* 用户 github 链接 */
.card a {
display: block;
text-align: center;
color: #999;
text-decoration: none;
padding: 10px;
}
/* 展示文章数目的面板 */
.card .counter {
padding: 5px;
display: flex;
justify-content: space-around;
}2.4 Implement blog list
Edit blog_list.html
Each blog is represented by div.blog.
Each blog contains title, publishing time, description, view Full text button.
<div class="container-right">
<div class="blog">
<div class="title">我的第一篇博客</div>
<div class="date">2023-10-15</div>
<div class="desc">
从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Cum distinctio ullam eum ut
veroab laborum numquam tenetur est in dolorum a sint, assumenda
adipisci similique quaerat vel.Facere,et.
</div>
<a href="content.html" class="detail">查看全文>></a>
<div class="title">我的第二篇博客</div>
<div class="date">2023-10-15</div>
<div class="desc">
从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Cum distinctio ullam eum ut
veroab laborum numquam tenetur est in dolorum a sint, assumenda
adipisci similique quaerat vel.Facere,et.
</div>
<a href="content.html" class="detail">查看全文>></a>
</div>
</div>Create blog_list.css
This part of the content is no longer a public part and is placed in a separate css.
Use pseudo-class selectors. blog .detail:hover , implements the function of modifying the style when the cursor is hovering.
Add transition effect transition: all 0.3s; to .blog .detail to make the hover style change more realistic.
/* 表示第一篇博客 */
.blog {
width: 100%;
padding: 10px 20px;
}
/* 博客的标题 */
.blog .title {
color: black;
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 10px 0;
}
/* 博客的摘要 */
.blog .desc {
color: #000;
text-indent: 2em;
margin-top: 10px;
}
/* 博客的日期 */
.blog .date {
color: #008000;
margin-top: 10px;
text-align: center;
}
/* 查看详情按钮 */
.blog .detail {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
color: black;
text-align: center;
text-decoration: none;
margin: 10px auto 0 auto;
border: 2px solid black;
/* 给颜色加上过渡效果 */
transition: all 0.3s;
}
/* 查看详情按钮的鼠标hover效果 */
.blog .detail:hover {
background-color: #000;
color: #fff;
}Introduce blog_list.css
<link rel="stylesheet" href="css/blog_content.css">3. Implement the blog text page
Create blog_content.html
3.1Introducing the navigation bar
Edit blog_content.html
This part of the code is the same as blog_list.html, just copy it directly.
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>Introduce styles common.css
<link rel="stylesheet" href="css/conmmon.css">3.2 Introduction of version center
Edit blog_content.html
This part of the code is the same as blog_list.html, copy it directly
<!-- 版心 -->
<div class="container">
<!-- 左侧个人信息 -->
<div class="container-left">
</div>
<div class="container-right">
</div>
</div>3.3 Introducing personal information
Edit blog_content.html
This part of the code is the same as blog_list.html, copy it directly
<!-- 左侧个人信息 -->
<div class="container-left">
<div class="card">
<img src="img/doge.jpg" class="avtar" alt="">
<h3>小林</h3>
<a href="http:www.github.com">github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>3.4 Implement blog text
Edit blog_content.html
Put the entire blog content into div.blog-content.
The blog content includes the blog title (h3), blog Time (div.date), blog text (p)
<div class="blog-content">
<!-- 博客标题 -->
<h3>我的第一篇博客</h3>
<!-- 博客时间 -->
<div class="date">2021-06-02</div>
<!-- 博客正文 -->
<p>
从今天起我要好好敲代码.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim iste
corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiis
pariatur delectus perferendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim iste
corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiis
pariatur delectus perferendis.
</p>
</div>Create blog_content.css
/* 博客正文容器 */
.blog-content {
padding: 30px;
}
/* 博客标题 */
.blog-content h3 {
text-align: center;
padding: 20px 0;
}
/* 博客日期 */
.blog-content .date {
color: #008000;
padding: 10px 0;
text-align: center;
}
/* 博客内容段落 */
.blog-content p {
text-indent: 2em;
padding: 10px 0;
}Introduce blog_content.css
<link rel="stylesheet" href="css/blog_content.css">4. Implement blog landing page
4.1Introducing the navigation bar
Edit login.html
This part of the code is the same as blog_list.html, just copy it directly.
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>Introduce styles common.css
<link rel="stylesheet" href="css/conmmon.css">4.2 Achieve version center
Edit login.html
Use flex to center the login dialog box horizontally and vertically on the page.
<!-- 版心 -->
<div class="login-container">
</div>Create login.css
.login-container {
width: 100%;
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}Introduce login.css
<link rel="stylesheet" href="css/login.css">4.3 Implement login box
Edit login.html
The entire login box is placed in div.login-dialog.
There are three lines inside, represented by div.row .
Each row contains a username input box, password input box, and submit button.
Edit login.css
Use the #submit:active pseudo-class selector to achieve the effect of style switching when the button is clicked.
.login-dialog {
width: 400px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
.login-dialog h3 {
padding: 50px 0;
text-align: center;
}
.login-dialog .row {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.login-dialog .row span {
display: block;
width: 100px;
font-weight: 700;
}
#username,
#password {
width: 200px;
height: 40px;
line-height: 40px;
font-size: 24px;
border-radius: 10px;
border: none;
outline: none;
text-indent: 10px;
}
#submit {
width: 300px;
height: 50px;
color: white;
background-color: green;
border: none;
border-radius: 10px;
}
#submit:active {
background-color: #666;
}5. Implement blog editing page
Create blog_edit.html
5.1Introducing the navigation bar
Edit blog_edit.html
This part of the code is the same as blog_list.html, just copy it directly.
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>Introduce styles common.css
<link rel="stylesheet" href="css/conmmon.css">5..2 Implement editing area
Edit blog_edit.html
The entire editing area is placed in div.blog-edit-container.
It contains a title editing area and content Editing area.
The title editing area contains an input to fill in the title, and a button for submission.
First create a div in the content editing area# editor, will be initialized later using editor.md.
<!-- 编辑框容器 -->
<div class="blog-edit-container">
<!-- 标题编辑区 -->
<div class="title">
<input type="text" placeholder="在这里写下文章标题" id="title">
<button id="submit">发布文章</button>
</div>
<!-- 创建编辑器标签 -->
<div id="editor"></div>
</div>Create blog_edit.css
#editor needs to use opacity: 80%; to set the transparency. If you use background-color directly, it will be
editor later. md is overwritten.
.blog-edit-container {
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
.blog-edit-container .title {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
#title {
height: 40px;
width: 890px;
text-indent: 10px;
border-radius: 10px;
outline: none;
border: none;
background-color:rgba(255, 255, 255, 0.8);
}
#submit {
height: 40px;
width: 100px;
color: white;
background-color: orange;
border: none;
outline: none;
border-radius: 10px;
}
#editor {
border-radius: 10px;
/* 针对 #editor 用 bgc 属性无法设置半透明了. 里面包含的内容带了背景色 */
/* background-color:rgba(255, 255, 255, 0.8); */
/* 可以使用 opacity 属性实现 */
opacity: 80%;
}5.3 Introduction of editor.md
editor.md is an open source page markdown editor component.
For the official website, see: https://pandao.github.io/editor.md/
For usage, please refer to the examples in the examples directory in the code. Very rich.
1) Download editor.md
Download the compressed package from the official website. Place it in the directory. The directory structure is as follows:
2) Introduce editor.md
<!-- 引入 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>3) Initialize editor.md
Edit blog_edit.html
// 初始化编辑器
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
height: "calc(100% - 50px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});