> ## Content Index
> Fetch the complete content index at: https://iiong.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 520我是如何定制网页情书
- URL: https://iiong.com/what-the-fuck-520/
- Published: 2019-05-23T14:10:00.000Z
- Updated: 2026-06-22T15:31:37.000Z
- Description: 临近5.20表白节日，虽然我对这个节日没啥感觉，但周围的氛围实在是太热烈，群里的朋友讨论送送口红香水包包或者啥惊喜的，不过自己也有喜欢的人了，但送东西不是太合适，干脆花点心思做个小东西吧，表达自己一部分心意。
- Author: 淮城一只猫
- Tags: 奇技淫巧

![](https://cdn.iiong.com/2019/05/flat-1000x1000-075-f-u14.jpg)

### Cap1 前言

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

效果展示：[http://i95.me/hello-sm](http://i95.me/hello-sm?ref=iiong.com)

### Cap2 背景

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

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

```javascript
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](https://cn.vuejs.org/v2/api/?ref=iiong.com#ref) 注册 `dom` 这样大大减少 `dom` 遍历而提高性能。

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

```javascript
/**
* 爱心手绘图绘制
* @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左右）库的大小，这样网页体验是非常不好的，所以现在中文网页都是利用系统自带的字库渲染的。

早在之前看到[字蛛](http://font-spider.org/?ref=iiong.com)看到这个工具，根据它文档说明也很简单，就是在页面声明字体的类型，然后编译ttf文件将其它汉字排除，得到最小的字体文件，减少宽带流量加载。不过我这里是直接用 [Fontmin](http://ecomfe.github.io/fontmin/?ref=iiong.com) 因为简单省事，直接将常用汉字 [Chinese\_5039](https://raw.githubusercontent.com/JaxsonWang/Chinese%5F5039/master/chinese%5F5039.txt?ref=iiong.com) 编译得出网页字体即可，然后存放 cdn 加载引入即可：

```css
@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](https://github.com/wiredjs/wired-elements?ref=iiong.com) 组件引进来利用即可，不过信封那里现在还存个问题，就是上一封下一封切换的时候，卡片窗口的高度是不会变的，所以内容多的时候，内容自动会错位撑开，因为时间太短，这个问题放在后面解决，为了避开这个问题，就是控制卡片窗口的内容字数了。

卡片窗口里面字打印机呈现使用的是 [typed-js](https://mattboldt.com/demos/typed-js/?ref=iiong.com) 使用方法也很简单也不再描述。

### Cap5 展示

已在github开源：[Hello-SM](https://github.com/JaxsonWang/Hello-SM?ref=iiong.com)

效果展示：[http://i95.me/hello-sm](http://i95.me/hello-sm?ref=iiong.com)

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