备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【博客系统】前端页面

2023-10-16 23
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【博客系统】前端页面

博客系统

实现一个简单的博客系统。

当前先完成页面设计部分，通过学习的前端知识来构建出网页。

主要分成四个部分：

  • 博客列表页
  • 博客正文页
  • 博客登陆页
  • 博客编辑页

预期效果

博客列表页效果

博客详情页效果

博客登陆页效果

博客编辑页效果

实现博客列表页

实现导航栏

写一个页面的时候，一定要先确定好页面的结构（页面的结构是十分重要的，会直接影响到后续的CSS、JS代码）

  • 导航栏里面包含logo， 标题，以及一些按钮（跳转链接）
  • 为实现左右排列，在logo和按钮之间加上一个spacer作为占位器
<!-- 导航栏 -->
<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>

对于导航栏来说，每个页面都需要用到，因此要把样式提取出来

  • 清楚浏览器默认样式
  • 准备一个图片作为背景
  • 需要把html和body高度都设为100%， 使背景高度和浏览器窗口高度一样
  • 导航栏内部使用flex布局，用来排列logo和一些按钮
/*清楚浏览器默认样式*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

其中的0.4是透明度alpha， 是一个0-1之间的小数，越小越透明

/* 设置整体页面高度和页面背景图 */
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;
}

引入common.css

<link rel="stylesheet" href="css/conmmon.css">

实现版心

  • container作为版心，实现居中对齐的效果
  • 左侧放用户信息
  • 右侧放博客列表
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
    </div>
    <!-- 右侧内容详情 -->
    <div class="container-right">
    </div>
</div>

编辑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;
}

实现个人信息

<!-- 左侧个人信息 -->
<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>
编辑common.css
/* 展示

编辑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;
}

实现博客列表页

  • 每个博客用div.blog来表示
  • 每个博客中包含标题，发布时间，描述，查看全文按钮。
<!-- 右侧内容详情 -->
<div class="container-right">
    <!-- 每一篇博客包含标题, 摘要, 时间 -->
    <div class="blog">
        <div class="title">我的第一篇博客</div>
        <div class="date">2021-06-02</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="blog_content.html?blogId=1" class="detail">查看全文 &gt;&gt;</a>
    </div>
    <div class="blog">
        <div class="title">我的第二篇博客</div>
        <div class="date">2021-06-02</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="blog_content.html?blogId=2" class="detail">查看全文 &gt;&gt;</a>
    </div>
</div>

创建 blog_list.css

这部分内容不再是公共部分，放到单独的css当中。

  • 使用伪类选择器.blog .detail:hover，实现光标悬停时修改样式的功能。
  • 给.blog .detail中加上过渡效果transition: all 0.3s是悬停的样式改变更加逼真
.blog {
    padding: 20px;
    width: 100%; 
}
.blog .title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    padding: 10px 0;
}
.blog .date {
    text-align: center;
    color: green;
    padding: 10px 0;
}
.blog .desc {
    text-indent: 2em;
}
/*查看全文按钮*/
.blog a {
    display: block;
    width: 140px;
    height: 40px;
    margin: 10px auto;
    border: 2px black solid;/*加上边框*/
    color: black;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s;
}
.blog a:hover {
    background-color: #333;
    color: white;
}

实现博客正文页

引入导航栏

这部分代码和blog_list.html中相同，直接复制即可

<!-- 导航栏 -->
<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>

引入common.css样式

<link rel="stylesheet" href="css/conmmon.css">

引入版心

这部分代码和blog_list.html相同，直接复制即可

<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
    </div>
    <div class="container-right">
    </div>
</div>

引入个人信息

直接复制

<!-- 左侧个人信息 -->
<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>

引入个人信息样式:

<link rel="stylesheet" href="CSS/blog_detail.css">

实现博客正文

  • 博客内容整体放到div.blog-content当中
  • 博客内容中包含博客标题（h3）,博客时间（div.date)，博客正文（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>

创建博客正文的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;
}

最后引入即可。

实现博客登陆页面

引入导航栏

<!-- 导航栏 -->
<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>

引入样式

实现版心

  • 使用flex使登陆对话框能够在页面水平垂直居中
<!-- 版心 -->
<div class="login-container">
</div>

创建login.css

.login-container {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

引入。

实现登录框

  • 登录框整体放到div.login-dialog中
  • 内不包含三行，使用div.row
  • 每个行里分别包含，用户名输入框，密码输入框，提交按钮
<!-- 中间的登陆框 -->
<div class="login-dialog">
    <h3>登陆</h3>
    <div class="row">
        <span>用户名</span>
        <input type="text" id="username">
    </div>
    <div class="row">
        <span>密码</span>
        <input type="password" id="password">
    </div>
    <div class="row">
        <button id="submit">提交</button>
    </div>
</div>

编辑css代码

.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;
}

实现博客编辑页

引入导航栏

<!-- 导航栏 -->
<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>

实现编辑区

  • 整个编辑区放到div.blog-edit-container当中
  • 里面包含一个标题编辑区，和内容编辑区
  • 标题编辑区，包含一个input，用来填写标题，以及一个button按钮用于提交
  • 内容编辑区先创建一个div#editor，后面使用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>

创建blog_edit.css

  • #editor需要使用opacity: 80%设置透明度，如果直接使用background-color后面被editor.md覆盖掉
.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%;
}

引入editor.md

editor.md是一个开源的页面markdown编辑器组件

官网

  1. 下载editor.md

从官网下载到压缩包当中。目录结构如下：

  1. 引入依赖
<!-- 引入 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>
  1. 初始化

编辑blog_edit.html

// 初始化编辑器
let editor = editormd("editor", {
    // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
    width: "100%",
    // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
    height: "calc(100% - 50px)",
    // 编辑器中的初始内容
    markdown: "# 在这里写下一篇博客",
    // 指定 editor.md 依赖的插件路径
    path: "editor.md/lib/"
});
文章标签：
前端开发
JavaScript
容器
数据安全/隐私保护
关键词：
前端页面
博客前端页面
系统前端页面
系统前端
博客前端
&zeta;◇十点半就睡觉
目录
相关文章
游客avlxf7b6fdona
|
3月前
|
缓存 前端开发 JavaScript
如何优化前端页面性能
前端性能优化是网站开发中非常重要的一部分，它直接关系到用户体验和网站的流量以及排名。本文将介绍一些优化前端页面性能的方法，包括减少HTTP请求、压缩代码、使用CDN等。
游客avlxf7b6fdona
25 0
遇事问春风乄
|
2月前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
遇事问春风乄
29 1
Deephub
|
2月前
|
开发框架 前端开发 机器人
从模型到前端，你应该知道的LLM生态系统指南
LLM在在2023年发展的风生水起，一个围绕LLM的庞大生态系统正在形成，本文通过介绍这个生态系统的核心组成部分，来详细整理LLM的发展。
Deephub
171 2
会敲代码的_TT
|
2月前
|
存储 前端开发 安全
无限连接：前端跨页面通信的实现与应用
在前端开发中，有时我们需要在不同的页面之间进行数据传递和交互。这种场景下，前端跨页面通信就显得尤为重要。前端跨页面通信是指在不同的页面之间传递数据、发送消息以及实现页面间的交互操作。本文将详细介绍前端跨页面通信的属性、应用场景以及实现方法，并提供一些代码示例和引用资料，帮助读者深入了解并应用这一重要的技术。
会敲代码的_TT
59 2
前端.火鸡
|
3月前
|
前端开发 JavaScript Java
系统化web前端需要技能所占比（通过图表分析来看您是不是一个合格的前端）
系统化web前端需要技能所占比（通过图表分析来看您是不是一个合格的前端）
前端.火鸡
36 0
陌陌谣
|
3月前
|
移动开发 监控 前端开发
HTML5与CSS3教学：美化员工行为监控软件前端页面的代码技巧
在当今信息时代，企业对员工行为的监控成为了一项必不可少的工作。而员工行为监控软件作为一种高效的管理工具，其前端页面的设计和美化显得尤为重要。本文将介绍如何利用HTML5和CSS3技术，优雅地美化员工行为监控软件前端页面的代码技巧。
陌陌谣
216 0
_揽
|
4月前
|
JSON 前端开发 Java
（简易详细）spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
（简易详细）spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
_揽
109 0
前端歌谣
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端歌谣
95 0
前端歌谣
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端歌谣
65 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端歌谣
|
8月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端歌谣
55 0

热门文章

最新文章

  • 1
    构建高效响应式Web界面：现代前端框架的比较
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 3
    前端开发中的跨域问题及解决方案
  • 4
    前端最常见的JS面试题大全
  • 5
    前端代码整洁与规范之CSS篇
  • 6
    ECS负载问题之前端包加载很慢如何解决
  • 7
    使用机器学习优化前端用户体验
  • 8
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 9
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 10
    Web 前端开发中的最佳实践
  • 1
    构建响应式Web界面：现代前端开发的最佳实践
    42
  • 2
    探索现代Web应用中的微前端架构
    29
  • 3
    构建高效前端项目：模块化与组件化策略
    31
  • 4
    前端发展趋势：WebAssembly、PWA 和响应式设计
    26
  • 5
    前端开发新趋势：Web3、区块链和虚拟现实
    37
  • 6
    架构的未来：微前端与微服务的融合
    63
  • 7
    前端模块规划
    14
  • 8
    调试前端时，在浏览器上修改参数并重新调用接口
    42
  • 9
    构建响应式Web界面：Flutter的跨界前端技术
    64
  • 10
    前端的CSS选择器
    23

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • WEB网页编程实战
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）