1.需求与功能

用户故事

• 站在用户的角度来设想用户需要哪些功能

  角色

  普通访客

• 可以分页查看所有博客

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

• 可以对博客文章进行评论

  管理员(我)

• 可以账密访问登录后台管理

• 可以管理博客
  • 发布新博客
  • 对博客进行分类
  • 对博客打标签
  • 可以修改博客
  • 可以删除博客
  • 可以根据标题，分类，标签查询博客
• 可以管理博客分类
  • 可以新增一个新的分类
  • 可以修改一个分类
  • 可以删除一个分类
  • 根据分类名称查询分类

• 可以管理标签

  • 可以新增一个标签
  • 可以修改一个标签
  • 可以删除一个标签
  • 可以根据名称查询标签

    功能点细分图

    

    商业价值

    举例

• 作为一个招聘网站注册用户，想查看最近三天的招聘信息，以便于了解最新招聘信息

• 作为公司，可以来张贴新的招聘单

  2.页面的设计为开发

  2.1 设计

• 画页面原型，借助工具，或者直接用手画

• 前端展示：首页，详情页，分类，标签，归档，关于我

• 后台管理：模板页

  3.前端插件集成

• md编辑器 editor.md

先在应用页面中引入css，之后在需要应用的元素内加上css样式，参照github项目中的example

• 内容排版 typo.css https://github.com/sofish/typo.css

先在应用页面中引入css，之后在需要应用的元素内加上css样式，参照github项目中的example

• 动画 animate.css https://github.com/animate-css/animate.css
  • 使用方法是在想要应用的元素后添加css样式 animated + 想要的动画样式(参照github readme)
• 代码高亮 prism https://prismjs.com/download.html https://prismjs.com/

资源引入，注意css属性的使用即可

• 滚动侦测 waypoints

• 平滑滚动

  
  https://github.com/flesler/jquery.scrollTo

• 目录生成 Tocbot

http://tscanlin.github.io/tocbot/

• 二维码生成 qrcode.js

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