Java实战项目-博客系统
前言
本文主要介绍博客系统的编辑页具体编码实现
实现编辑页
编辑页.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>博客编辑页</title>
<link rel="stylesheet" href="../css/导航栏.css">
<link rel="stylesheet" href="../css/编辑页.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="吴磊啊隼.png" alt="">
<span class="title">大饼的博客系统</span>
<span class="spacer"></span>
<a href="博客详情页.html">详情</a>
<a href="博客列表页.html">列表</a>
<a href="博客登陆页.html">登陆</a>
</div>
<!-- 导航栏下方容器 -->
<div class="container">
<!--设置左边栏(个人信息栏)-->
<div class="container-left">
<!--用户信息-->
<div class="card">
<img src="头像.jpg" alt="">
<h1>一口一个大饼</h1>
<a href="https://gitee.com/">gitee地址</a>
<div class="counter">
<span>关注</span>
<span>粉丝</span>
</div>
<div class="counter">
<span>34</span>
<span>59</span>
</div>
</div>
</div>
<!--编辑框容器-->
<div class="blog-edit-container">
<!--创建编辑区域-->
<div class="title">
<input type="text" placeholder="在这里写下文章标题" id="title">
<button id="subumit">发布文章</button>
</div>
<!--创建编辑标签,为了和 markdown编辑器对接-->
<div id="editor"></div>
</div>
</div>
<script>
// 初始化编辑器
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
height: "500px",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>
</body>
</html>
编辑页.css
/* 编辑区整体页面设计 */
.blog-edit-container{
width: 1000px;/*宽度 */
height: calc(100% - 50px);/* 高度*/
margin: 0 auto;/* 上下边距和左右距离*/
}
/* 编辑区中title样式 */
.blog-edit-container .title{
width: 100%;
height: 50px;
display: flex;/* 弹性布局 */
justify-content: space-between;
/* 项目在主轴上的对齐方式:两端对齐,项目之间的间隔都相等 */
align-items: center;/* 弹性布局中默认对齐方式:居中对齐 */
}
/* 设置文字“ 在这里写下文章标题 ”的样式 */
#title{
width: 850px;
height: 40px;
text-indent: 10px;/*设置文本缩进*/
border-radius: 10px;/* 设置边角弧度 */
outline: none;/* 取消元素轮廓 */
border: none;/* 不要边框 */
background-color: rgba(255, 255, 255, 0.5);
}
/* 设置文字“ 发布文章 ”的样式 */
#subumit{
width: 148px;
height: 40px;
text-indent: 10px;/*设置文本缩进*/
border-radius: 10px;/* 设置边角弧度 */
outline: none;/* 取消元素轮廓 */
border: none;/* 不要边框 */
background-color: rgba(255, 255, 255, 0.5);
color: #000;
}
#editor{
border-radius: 10px;
opacity: 80%;/* 设置半透明(可以让子元素也半透明) */
}
/* 实现鼠标停留变化效果*/
#title:active{
background-color: rgba(255, 255, 255, 0.3);
}
#subumit:active{
background-color: rgba(255, 255, 255, 0.3);
}
注意事项:
此处需要注意引用Markdown编辑器
引用Markdown编辑器
editor.md 是一个开源的页面 markdown 编辑器组件.
官网链接: 官网链接
1、下载压缩包
从官网上下载到压缩包. 放到目录中. 目录结构如下
2、引入 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.初始化 editor.md
<script>
// 初始化编辑器
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
height: "500px",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>