CodingPeppa / myblog-page

个人博客的前端页面,单独拿出来,没有后端的交互

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

myblog-page

博客地址:https://onestar.newstar.net.cn/

使用该源码希望能够注明原博客以及源码出处,并禁止商用,谢谢!

一、首页

1.主页页面

首页主要是一些文字描述和个人信息,如果你的显示屏分辨率比较高或者页面缩放的比较小的话,可以看到下面有最新推荐专栏

image

2.博文列表

博文列表主要有博文标题、博文简介、作者、时间、访问量、评论数、博文分类和博文首图

image

3.首页底部

底部就是比较常规的一些功能,显示了博主的微信二维码,最新文章和博客运行时间

image

二、博文详情

1.博文标题及信息

展示了文章首图、标题、等信息

image

2.文末评论

文末有文章转载的信息和评论区域,评论具有盖楼功能,分为普通用户和管理员

image

二、分类页面

显示分类名称,点击可以显示不同的分类文章

image

三、时间轴

采用两边分开的阶梯状按照时间顺序来展示

image

四、音乐盒

音乐盒是使用了一个开源的插件,自己进行了修改,主要功能有显示歌曲、歌词、播放、暂停、上一曲、下一曲、音量调节、播放顺序调节、同步歌词等功能

image

五、留言板

功能和博文评论是一样的

image

六、友人帐(友链)

添加友链要求和显示友链

image

七、照片墙

采用了一个开源的插件,自己进行了修改,可以根据屏幕分辨率的不同来显示,放大缩小图片基本不形变

image

点击一张图片显示如下,有一些图片的基本信息,可以左右切换图片

image

八、关于我

静态页面,一些博主的信息

image

九、后台管理

1. 文章管理

可以对文章进行增加、编辑修改、删除,还可以搜索文章

image

新增文章,使用Markdown语法

image

2. 分类管理

可以对分类进行增加、编辑修改、删除

image

3. 友链管理

可以对友链进行增加、编辑修改、删除

image

4. 相册管理

可以对照片进行增加、编辑修改、删除

image

想要查看更多信息,可以直接访问我的博客:https://onestar.newstar.net.cn/

下一篇将讲述数据库的设计

【点关注,不迷路,欢迎持续关注本站】

About

个人博客的前端页面,单独拿出来,没有后端的交互


Languages

Language:JavaScript 39.1%Language:HTML 38.4%Language:CSS 22.5%