个人博客开发日记02

页面设计

试着使用 Axure RP 9 进行页面设计，发现可能比较耗时。当前学习重点不在于此，直接使用视频中的设计。

前端展示

• 首页
• 详情页
• 分类
• 标签
• 归档
• 关于我

后台管理

• 模板页

页面开发

主要关注移动端适配问题和页面插件集成

移动端适配

主要是页面元素的堆叠和导航栏的显隐，可参考semantic-ui官方文档

1. 通过css控制

/*----判断设备屏幕宽度，修改样式-----*/
@media screen and (max-width:768px){
    .m-mobile-hide{
        display: none !important;
    }
    }

2. 通过semantic-ui相关class属性适配

<!--mobile reversed 在移动端将页面元素倒序显示-->
<!--stackable 允许页面元素堆叠-->
<div class="ui mobile reversed stackable grid">
	<div class="eleven wide column"></div>
	<div class="five wide column"></div>
</div>

3. 通过semantic-ui组件编写script控制页面样式

<script>
    // 移动端导航栏
    $('#navbt').click(function(){
        $('.m-item').toggleClass('m-mobile-hide');
    })
</script>

页面插件集成

Markdown编辑器

使用开源Markdown编辑器 Editor.md
下载解压后参考example目录下的simple.html可轻松集成至页面中。
当前移动端展示存在问题，暂不深究。

内容排版

使用 typo.css，一致化浏览器排版效果，构建最适合中文阅读的网页排版。包括桌面和移动平台。
需要注意typo.css和semantic.css存在的冲突，这里对type.css进行修改，使其在指定的标签下才生效（或许需要一个Sass，若使用React或Vue，将前端组件化之后是否会简单一点？）。

动画

使用 Animate.css，简单粗暴。

代码高亮

使用 Prism ，轻量级代码高亮插件。

文章目录

使用 Tocbot，要求生成目录的元素必须要有 id 属性。

页面二维码

使用 QRCode.js 生成页面网址二维码，用以扫码阅读博客。

页面滑动

集成jQuery.scrollTo 通过参数的合理设置，可以使平滑地滚动至目标位置。
可直接使用cdn引用：

<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>

滚动监测

Waypoints 可以监测页面元素的滚动，可以用其判断是否展示右下角的工具栏。