轩枫阁

前言

轩枫阁V3主题已上线，本文将介绍本站V3主题关于CSS重构的内容。兼容IE9+，主要看Chrome表现。

LESS

鉴于Less能满足本站主题开发的需求，就没有更换成Sass。Less介绍：http://www.lesscss.net/

mixins

基于 Less的 CSS代码片段复用和混入库，主要有圆角border-radius、渐变gradient、内阴影inner-shadow、阴影box-shadow、动画animation、transition、宽度计算calc-width、省略text-overflow等，代码见附录。 查看全文

前言

轩枫阁V3主题已上线，本文将介绍本站V3主题关于加载优化的内容。

图片优化

关于图片，这里使用传统的优化方式。本站使用的图片主要有各类图标、大图、文章配图、文章内容图等。

雪碧图

使用雪碧图Sprite，将各图标合并成一张图，可以减少HTTP请求数。

开发过程中，使用单个图标，结合tmt-workflow，在发布时将图片合并。同时移动端支持2倍雪碧图，只需同时将2x图标放至slice目录即可。 查看全文

前言

本文将介绍如何将基于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的正方形配图，这里有两种解决方案。 查看全文