目录
实现一个简单的博客系统，有四个页面：
博客列表页、博客正文页、博客登录页、博客编辑页
博客列表页
<!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_edit.css">
<script src="js/jquery.min.js"></script>
<!-- 也可以不复制源码进来，直接写源码的网址 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> -->
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<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/csdn.webp" alt="">
<span class="title">我的博客系统</span>
<!-- 这个标签仅用来占位，把a标签挤到导航栏最右边 -->
<div class="spacer"></div>
<a href="#">主页</a>
<a href="#">写博客</a>
<a href="#">注销</a>
</div>
<!-- 编辑区的容器 -->
<div class="blog-edit-container">
<!-- 博客标题编辑区 -->
<div class="blog-edit-title">
<input type="text" id="title-edit" placeholder="请输入文章标题">
<button id="submit">发布文章</button>
</div>
<!-- 这里用id为了和markdown编辑器对接 -->
<div id="editor">
</div>
</div>
<script>
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 设定编辑器高度
// height: "calc(100% - 50px)",
height:"450px",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>
</body>
</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/csdn.webp" alt="">
<span class="title">我的博客系统</span>
<!-- 这个标签仅用来占位，把a标签挤到导航栏最右边 -->
<div class="spacer"></div>
<a href="#">主页</a>
<a href="#">写博客</a>
<a href="#">注销</a>
</div>
<!-- 页面主体部分 -->
<div class="container">
<!-- 左侧信息 -->
<div class="container-left">
<!-- card是用户信息 -->
<div class="card">
<!-- 用户头像 -->
<img src="image/touxiang.png" alt="">
<!-- 用户名 -->
<h3>丸圆圆</h3>
<a href="#">github地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>33</span>
<span>3</span>
</div>
</div>
</div>
<!-- 右侧信息 -->
<div class="container-right">
<!-- 博客标题 -->
<h3 class="detail-title">我的第一篇博客</h3>
<!-- 博客发布时间 -->
<div class="date">2023-10-01</div>
<!-- 博客正文 -->
<div class="content">
<p class="content-p">
从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
</p>
<p class="content-p">
从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
</p>
<p class="content-p">
从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
</p>
</div>
</div>
</div>
</body>
</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/login.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<img src="image/csdn.webp" alt="">
<span class="title">我的博客系统</span>
<!-- 这个标签仅用来占位，把a标签挤到导航栏最右边 -->
<div class="spacer"></div>
<a href="#">主页</a>
<a href="#">写博客</a>
</div>
<!-- 正文部分 -->
<!-- 贯穿整个页面的容器 -->
<div class="login-container">
<!-- 垂直水平居中的对话框 -->
<div class="login-dialog">
<h3>登录</h3>
<div class="login-dialog-row">
<span>用户名</span>
<input type="text" id="username" placeholder="手机号/邮箱">
</div>
<div class="login-dialog-row">
<span>密码</span>
<input type="password" id="password">
</div>
<div class="login-dialog-row">
<button id="submit">登录</button>
</div>
</div>
</body>
</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_edit.css">
<script src="js/jquery.min.js"></script>
<!-- 也可以不复制源码进来，直接写源码的网址 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> -->
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<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/csdn.webp" alt="">
<span class="title">我的博客系统</span>
<!-- 这个标签仅用来占位，把a标签挤到导航栏最右边 -->
<div class="spacer"></div>
<a href="#">主页</a>
<a href="#">写博客</a>
<a href="#">注销</a>
</div>
<!-- 编辑区的容器 -->
<div class="blog-edit-container">
<!-- 博客标题编辑区 -->
<div class="blog-edit-title">
<input type="text" id="title-edit" placeholder="请输入文章标题">
<button id="submit">发布文章</button>
</div>
<!-- 这里用id为了和markdown编辑器对接 -->
<div id="editor">
</div>
</div>
<script>
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 设定编辑器高度
// height: "calc(100% - 50px)",
height:"450px",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>
</body>
</html>这里没有提交css的代码，在编辑页需要引入一个editor编辑器，可以在GitHub上获取源代码，编辑页的启用editor编辑器的方式在官方文档中也有具体写法。
成果展示：
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
