博客系统(页面设计)

不念不忘少年蓝@ 2024-02-28 03:03 58阅读 0赞

####  目 录 ####

*  博客列表页
 *  博客详情页效果
 *  博客登陆页效果
 *  博客编辑页

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

主要分成四个页面:

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

## 博客列表页 ##

在我们文件里放入三张图片 用来实现页面的设计

![在这里插入图片描述][ec7acc1c9d7842fc8d1ca46f372238e0.png]

博客列表页效果

![在这里插入图片描述][fb93e6891371477c970c613c2635f601.png]

代码实现：

![在这里插入图片描述][838143c62d3842d2bcc6a1c6c9d3f032.png]

区域实现细节代码：

![在这里插入图片描述][e884a3678c3d438b98c5ec78c6977019.png]  
![在这里插入图片描述][a33c2fa86cf245bca5f8a5d321bdbabd.png]

--------------------

## 博客详情页效果 ##

![在这里插入图片描述][7b8cb3618f7f41e0a47b4edaab5a85e7.png]

![在这里插入图片描述][c60f42a3fad444beb768e29800d09180.png]  
![在这里插入图片描述][3eddd063d1504f9597483e76f1c57a43.png]

里面还包含了上面区域块 common.css 中的代码，在这里就不展示

> 但是上述代码当博客内容较多的情况下，会出现内容溢出，导致页面出现 bug，文字溢出到外面了。所以解决方案就是别让窗口滚动，而是让右侧 div 的内容滚动。

![在这里插入图片描述][be25df65dd754f478541a35c9b8b8906.png]

overflow: auto;可以解决这个问题，但是得设置一个尺寸(在前面描述了右边边框尺寸，直接把大小搬过来)，所以在 blog.detail.css 代码块中的第一个区域里增加这个即可

![在这里插入图片描述][66d6ca9453d34670aad88eb7d6568b3a.png]  
![在这里插入图片描述][f3e18541cce443899e1d7a4e8473fa83.png]

--------------------

## 博客登陆页效果 ##

![在这里插入图片描述][51817cd72e88425eb72a4e2fd9f9c2e9.png]  
![在这里插入图片描述][13ceb2c6c56a48849dceb7a2dbe027f2.png]  
![在这里插入图片描述][154952c11b714b9fa8c07db8926f437b.png]

--------------------

## 博客编辑页 ##

在这个页面 我们需要 Markdown 的编译器，此处我们直接在网上找现成的源码最好，自己实现太麻烦了。

1.  如何使用 editor.md ，并且引入到代码中，这个过程也要下载 jQuery 并且也引入

首先我们先下载一个 editor.md 的文件包

![在这里插入图片描述][a9d7d0cb97d545e2a5836d0b2dad58ce.png]

放在和代码一个文件夹里，但是还不能用，要继续下载一个 jQuery 。

![在这里插入图片描述][285e9005d60f4ab48e98ff3da2915991.png]

![在这里插入图片描述][25af8491364047d5ac8323a52542087d.png]

得到的页面

![在这里插入图片描述][76a578a5642e4e629b1f9af10873b251.png]

全部复制粘贴保存在一个文件夹里，老样子，和代码文件在一起，创一个 js 文件，把这些代码放在里面即可。（此处我有文件 所以以上试过一次不太行 就网上找了一份文件插入进去了）

1.  在页面中引入依赖的 js css 等文件（具体引入哪些，官方的实例上有，但是不是很直观）

在 html 代码中插入这一段代码

<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>

![在这里插入图片描述][b9e0921eda9c4e728154e7154907127c.png]

我们必须保证这里的路径是一样的，然后还要保证 jQuery 的加载要放到 editor.md 的所有 js 之前

![在这里插入图片描述][eb432db6c78c431f8a9c4a131ca2ea03.png]

1.  在 js 代码中，初始 editor.md

![在这里插入图片描述][78258d538072431998f63cac606dd9ee.png]

代码：

![在这里插入图片描述][d48891d7564845d6bf291c482ea71bc9.png]  
![在这里插入图片描述][2585dd527b92421e8e4056d63094400e.png]

此时我们的页面就完成了

![在这里插入图片描述][c7fd3006d4dc4b698fc105a1ec4c746e.png]

[ec7acc1c9d7842fc8d1ca46f372238e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/b23894f3bdc7452f9739e499b73dfa62.png
[fb93e6891371477c970c613c2635f601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/702d868965914b69b6bbfed68aca9f19.png
[838143c62d3842d2bcc6a1c6c9d3f032.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/904fa349eb5e4c54bed5c87970dd2e9a.png
[e884a3678c3d438b98c5ec78c6977019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/e05c95733a0d40628ca59faf1f1cf683.png
[a33c2fa86cf245bca5f8a5d321bdbabd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/2991c05370a840acbc915cb8218901fa.png
[7b8cb3618f7f41e0a47b4edaab5a85e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/6c3fc736d2fe4bf9ac836d0bc00a2c23.png
[c60f42a3fad444beb768e29800d09180.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/3fcca48e126c465da8704fd4e82d0241.png
[3eddd063d1504f9597483e76f1c57a43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/2c76b948a4e046279a8a07136efc14aa.png
[be25df65dd754f478541a35c9b8b8906.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/e94273035fb64214b427235f74252a1b.png
[66d6ca9453d34670aad88eb7d6568b3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/3fc82eed88d44411a436c86ad4490d16.png
[f3e18541cce443899e1d7a4e8473fa83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/347366a88b414ce7b62e3c55e3041816.png
[51817cd72e88425eb72a4e2fd9f9c2e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/cf1242df6deb4eaaa4d1e856319411fc.png
[13ceb2c6c56a48849dceb7a2dbe027f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/0d0c49f3416649509c3da650933565e9.png
[154952c11b714b9fa8c07db8926f437b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/5a3bace795cc4d0aa6864f85d21c2245.png
[a9d7d0cb97d545e2a5836d0b2dad58ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/ce30a21ec2754eaea695a485aeebbf38.png
[285e9005d60f4ab48e98ff3da2915991.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/73abd7d4c7124ac1a9ca107755a0ec93.png
[25af8491364047d5ac8323a52542087d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/07e87d36124145beb38822a2f8817fce.png
[76a578a5642e4e629b1f9af10873b251.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/f9c3fd18fe444847a7379b6479b81080.png
[b9e0921eda9c4e728154e7154907127c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/504846382fd14a209c274e9ecaa5d2c3.png
[eb432db6c78c431f8a9c4a131ca2ea03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/59cf39aaa261417e92f41c06d7ecd630.png
[78258d538072431998f63cac606dd9ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/00e6ae57721f4cecaffe928bcef8632e.png
[d48891d7564845d6bf291c482ea71bc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/af203ba8788340e1aaae2368b741b538.png
[2585dd527b92421e8e4056d63094400e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/8d35f362770d43d6b0bb99577b1574ed.png
[c7fd3006d4dc4b698fc105a1ec4c746e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/066ed352411d4d7da7bc21b268987a9a.png