AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【博客系统】前端页面

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

博客系统

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

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

主要分成四个部分：

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

预期效果

博客列表页效果

博客详情页效果

博客登陆页效果

博客编辑页效果

实现博客列表页

实现导航栏

写一个页面的时候，一定要先确定好页面的结构（页面的结构是十分重要的，会直接影响到后续的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;◇十点半就睡觉
目录
相关文章
代码掌控者
|
25天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
40 1
ZOMI酱
|
15天前
|
人工智能 自然语言处理 前端开发
【AI系统】LLVM 前端和优化层
本文介绍了 LLVM 编译器的核心概念——LLVM IR，并详细讲解了 LLVM 的前端 Clang 如何将 C、C++ 等高级语言代码转换为 LLVM IR。文章还探讨了编译过程中的词法分析、语法分析和语义分析三个关键步骤，以及 LLVM 优化层的 Pass 机制，包括分析 Pass 和转换 Pass 的作用及依赖关系。
ZOMI酱
22 3
gkkkkk
|
1月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
gkkkkk
10 1
.自定义认证前端页面
html的七十二变
|
25天前
|
前端开发 JavaScript 搜索推荐
前端懒加载：提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术，通过延迟加载非首屏内容，减少初始加载时间，提高用户访问体验和页面性能。
html的七十二变
142 6
阿里云计算巢-雲尧
|
1月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息，并通过阿里云计算巢完成了Appsmith的快速部署，使用者不需要自己下载代码，不需要自己安装复杂的依赖，不需要了解底层技术，只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith，非技术同学也能轻松搞定。
阿里云计算巢-雲尧
37 5
刘大猫.
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
38 18
想飞的雪糕
|
2月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇（六）：发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型，详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据，包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据，并使用 MiniMongo 实现实时数据同步。此外，还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组，实现数据的自动更新。
想飞的雪糕
47 2
想飞的雪糕
|
2月前
|
前端开发 安全 API
前端全栈之路Deno篇（三）：一次性搞懂和学会用Deno 2.0 的权限系统详解和多种权限配置权限声明方式
本文深入解析了 Deno 2.0 的权限系统，涵盖主包和第三方包的权限控制机制，探讨了通过命令行参数、权限 API 和配置文件等多种权限授予方式，并提供了代码示例和运行指导，帮助开发者有效管理权限，提升应用安全性。
想飞的雪糕
61 0
想飞的雪糕
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
170 2
你都不懂
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
46 0

热门文章

最新文章

  • 1
    前端分页插件pagination
  • 2
    [前端]jekyll+markdown+github搭建个人博客
  • 3
    未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~
  • 4
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 5
    前端 时间个性化 插件 jquery.timeago.js
  • 6
    前端安全：Vue应用中防范XSS和CSRF攻击
  • 7
    合格前端系列第四弹-如何监听一个数组的变化
  • 8
    微前端之IceStark介绍和基础使用
  • 9
    GitHub Actions自动化部署前端项目指南
  • 10
    你用过的网站前端优化的技术有哪些？
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    86
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    82
  • 3
    使用Vue.js构建交互式前端的技术探索
    87
  • 4
    如何优化前端性能：关键步骤和技巧
    85
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    96
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    115
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    258
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    70
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    84
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    134

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

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