520我是如何定制网页情书

Cap1 前言

临近5.20表白节日,虽然我对这个节日没啥感觉,但周围的氛围实在是太热烈,群里的朋友讨论送送口红香水包包或者啥惊喜的,不过自己也有喜欢的人了,认识不长直接送东西不是太合适,干脆花点心思做个小东西吧,表达自己一部分心意。(博主已经凉了,散了散了吧!和这个无关,是别的问题。)所以就是所谓的网页表白咯,大家认为在网上随便找套,把内容换一下就行了,但都是大家用烂的风格,再用下去也不合适。

效果展示:http://i95.me/hello-sm

Cap2 背景

既然不需要后端支持,那就是纯粹静态页面,简单又方便,并不需要维护什么。所以我选择Vue-Cli单应用项目。我一开始想法是所谓的属性内容再点缀点什么就行了。有次浏览类库不小心看到 roughjs 这个手绘风格的类库,所以设定风格为手绘风格,正好这里有个现成的 Examples 代码,直接移植过来完事了。

为了提高网页加载速度,所以像这种依赖dom类库并没有直接引入,直接CDN加载即可。还需要在vue.config.js额外配置达到忽略依赖文件编译和全局变量名的识别:

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        rough: "rough",
        "window.rough": "rough",
        Typed: "Typed",
        "window.Typed": "Typed"
      })
    ]
  },
  chainWebpack: config => {
    config.externals({
      'rough': 'rough',
      'Typed': 'Typed',
    })
  },
};

这样直接在控制台输入 rough 可以看到它的方法函数。

其次就是 canva 绘制的寻找 dom 对象不推荐使用 document 方法查询,主要是性能问题,所以推荐大家使用 vue 中的 ref 注册 dom 这样大大减少 dom 遍历而提高性能。

不过在后来仔细阅读 Rough.js API 发现本身就支持绘制圆形、椭圆形、矩形和线,要是定制其他形状的话需要 svg 中的 path 绘制方法才能支持,本来想试试满屏的爱心,无奈自己水平不够,暂时放弃这方面的想法。不过利用 rc.path 方法绘制个爱心:

/**
* 爱心手绘图绘制
* @param self
*/
export const loveCanvas = (self) => {
  const rough = window.rough;
  const rc = rough.canvas(self.$refs.love);
  rc.path('M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543  c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503  c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
    {
      fill: 'red',
      fillStyle: 'solid', // solid fill
      roughness: 0,
      hachureAngle: 60, // angle of hachure,
      hachureGap: 8,
      fillWeight: 3,
    }
  );
};

可以利用网上的在线path工具画出你想要的样子,工具会给你 path 绘制代码,故这里不再详细描述了。

Cap3 字体

既然是手绘风格的字体,那么字体也需要可爱一些的,再把它们套入网页中。如果作为英文字体改变它的风格很简单,因为单词再怎么组成,字母就24个,再加上字符什么,也多不了多少。所以浏览国外很多网页,那满页字体真的炫彩得很,令人眩目。但作为中文字体,想改变他风格不容易,主要是中文字库实在是太大了,随便淘个字体包就是上兆了,针对英文字库最多也就一个 js (最大几百kb左右)库的大小,这样网页体验是非常不好的,所以现在中文网页都是利用系统自带的字库渲染的。

早在之前看到字蛛看到这个工具,根据它文档说明也很简单,就是在页面声明字体的类型,然后编译ttf文件将其它汉字排除,得到最小的字体文件,减少宽带流量加载。不过我这里是直接用 Fontmin 因为简单省事,直接将常用汉字 Chinese_5039 编译得出网页字体即可,然后存放 cdn 加载引入即可:

@font-face {
    font-family: "fzpx";
    src: url("fzpx.eot"); /* IE9 */
    src: url("fzpx.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
 
    url("fzpx.woff") format("woff"), /* chrome、firefox */
    url("fzpx.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
 
    url("fzpx.svg#fzpx") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

Cap4 其他

页面的一些按钮,卡片窗口,和加载器都是从 wired-elements 组件引进来利用即可,不过信封那里现在还存个问题,就是上一封下一封切换的时候,卡片窗口的高度是不会变的,所以内容多的时候,内容自动会错位撑开,因为时间太短,这个问题放在后面解决,为了避开这个问题,就是控制卡片窗口的内容字数了。

卡片窗口里面字打印机呈现使用的是 typed-js 使用方法也很简单也不再描述。

Cap5 展示

已在github开源:Hello-SM

效果展示:http://i95.me/hello-sm

最后祝大家520能够脱离单身!