520我是如何定制网页情书

淮城一只猫 • • 奇技淫巧
阅读量 0 次 • 评论量 0 个

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能够脱离单身！

喵~