semantic UI 个人博客网站-前端源码

semantic UI 个人博客网站-前端源码

需求与功能：

用户故事方法

敏捷开发中的一种解决方法，从用户的角度去描述一个需求。通常由用户进行编写。作为一个（某个角色）使用者，我可以做（某个功能）事情，如此可以有（某个商业价值）的好处角色+功能+商业价值

举例：作为一个招聘网站的注册用户，我想查看最近三天发布的招聘信息，以便于了解最新的招聘信息作为公司，可以张贴新工作

个人博客用户故事

角色

▎普通访客

▎管理员（我）

访客：可以分页查看所有的博客
访客：可以快速查看博客数最多的6个分类
访客：可以查看所有分类
访客：可以查看某个分类下的博客列表
访客：可以快速查看标记博客最多的10个标签
访客：可以查看所有标签
访客：可以查看某个标签下的博客列表
访客：可以根据年度时间线查看博客列表
访客：可以快速查看最新的推荐博客
访客：可以用关键字全局搜索博客
访客：可以查看单个博客内容
访客：可以对博客内容进行讨论
访客：可以赞赏博客内容
访客：可以微信扫描阅读博客内容
访客：可以在首页扫描公众号二维码关注我

管理员：
​      可以使用用户名和密码登录到后台
​      可以管理博客
​      可以发布新的博客
​      可以对博客内容进行分类
​      可以对博客打标签
​      可以修改博客
​      可以删除博客
​      可以根据标题，分类，标签查询博客
管理员：
​      可以管理博客分类
​      可以新增一个分类
​      可以修改一个分类
​      可以删除一个分类
管理员：
​      可以管理标签
​      可以新增一个标签
​      可以修改一个标签
​      可以删除一个标签
​      可以根据名称查询标签

涉及资源网站

• 使用框架：

semantic-ui

• 背景图片资源：

https://www.toptal.com/designers/subtlepatterns/

• 背景图片资源：

https://picsum.photos/images

• semantic UI中文官网：

https://zijieke.com/semantic-ui/

• 编辑器 Markdown：

https://pandao.github.io/editor.md/

• 内容排版 typo.css：

https://github.com/sofish/typo.css

• 动画 animate.css：

https://daneden.github.io/animate.css/

• 代码高亮 prism：

http://t.cn/A67v9hZb

• 滚动侦测 waypoints：

http://imakewebthings.com/waypoints/

• 平滑滚动 jQuery.srcollTo：

https://www.bootcdn.cn/jquery-scrollTo/

• 目录生成 Tocbot：

https://tscanlin.github.io/tocbot/

• 二维码生成 qrcode.js：

http://davidshimjs.github.io/qrcodejs/

源码获取

个人博客网站

*关注公众号科技毒瘤君并回复：blog*

*即可获取源码*

阅读原文