轩枫阁

前言

本文将介绍如何将基于WP的项目，结合前端工作流tmt-workflow，实现开发、体验、部署上线流程，流程简单，自定义程度高。

tmt-workflow

tmt-workflow 是一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。

介绍文章：tmt-workflow前端工作流 查看全文

前言

在日常的前端开发中，我们会遇到 LESS/SASS 编译、CSS 前缀自动补全 、CSS压缩、 图片压缩、JS合并压缩、布署发布 等各种各样的操作。通常，我们都会根据实际情况定制一个流程性的工具来实现所有常规的功能，即所谓的前端工作流。tmt-workflow为微信TmT团队研发的工作流。

tmt-workflow

tmt-workflow 是一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。

现已推出 GUI 桌面工具：WeFlow，无需安装任何环境依赖即可使用，官网下载：http://weflow.io/

功能特性

• 自动化流程
  • Less/Sass -> CSS
  • CSS Autoprefixer 前缀自动补全
  • 自动生成图片 CSS 属性，width & height 等
  • CSS 压缩 cssnano
  • CSS Sprite 雪碧图合成
  • Retina @2x & @3x 自动生成适配
  • imagemin 图片压缩
  • JS 合并压缩
  • EJS 模版语言
• 调试 & 部署
  • 监听文件变动，自动刷新浏览器 (LiveReload)
  • FTP 发布部署
  • ZIP 项目打包
• 解决方案集成
  • px -> rem 兼容适配方案
  • 智能 WebP 解决方案
  • 去缓存文件 Reversion (MD5) 解决方案

除了以上的各种功能，其余特性：

1. 基于 Gulp4 ，超好用的流程化(gulp.series, gulp.parallel)控制 API，更高的性能
2. 跨平台的，支持 Win 和 Mac，满足各类开发者
3. 所有项目共享一个 node_modules，只需一次 npm install 即可
4. 可定制的，你可以根据自己的需求修改实现你自己想要的功能
5. 自带 rem适配方案、智能 Webp 解决方案、去缓存文件 Reversion (MD5) 解决方案

查看全文

前言

本文介绍针对轩枫阁V3主题开发过程中，遇到的图片问题及加载优化。

图片居中裁剪

本站的每一篇文章，都会配一张570×200的特色图像，使文章不那么单调。

然而移动端移动端首页图片为60×60的正方形配图，这里有两种解决方案。 查看全文

前言

轩枫阁V3.0主题已上线，自2013年上线发布，V1-V3，3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。

本次主题的更新，对整站进行优化，主要包括设计改版、性能优化、体验优化。

本文主要针对设计进行介绍：

• 重新思考设计整站UI
• PC端与移动端相分离
• 文案、设计排版、细节表现更加细致

PC端

主颜色

主色调选用浅白、深灰、浅黑、天蓝、青色，使页面简洁、扁平、纯粹。

查看全文

前言

H5持续火热，随着微信公众号、朋友圈、微博等途径可导入大量阅读量，博客网站移动端自适应势在必行。

下面介绍基于wordpress的网站如何实现移动化。

响应式布局

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

优点：一套代码，能够适应不同分辨率设备访问，易于维护。

缺点：受限于同一套HTML结构，导致很多差异化布局不好进行扩展，对于小屏设备往往采用隐藏方式减少内容。

自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。

响应式网站展示：http://mediaqueri.es/、http://flatdesignluv.com/

响应式布局的实现方式为通过CSS3的媒体查询Media Queries，针对不同分辨率做断点，使用不同的样式。

常用断点查询：屏幕尺寸大全、UI设计规范 查看全文