15 |
16 | *[source: https://t.me/addstickers/MadeInBitinn](https://t.me/addstickers/MadeInBitinn)*
17 |
18 | So I want to use canvas to automatically generate one from the user input, although I have never used canvas. But based on the previous experience of [slogan] (https://egoist.moe/slogan/) I started.
19 |
20 | First I have to create a new canvas element I still remember, and then get its 2d context:
21 |
22 | ```js
23 | Const $canvas = document.getElementById('canvas')
24 | Const ctx = $canvas.getContext('2d')
25 | ```
26 |
27 | Then start rendering, I am temporarily ignored for the left avatar, after all, I do not remember how to render the image, so start with other text, I need to render a username and the date on the right:
28 |
29 | ```js
30 | // Actually, I don’t remember how to render the text.
31 | // Google found out that it is ctx.fillText(text, x, y)
32 | ctx.fillText('EGOIST', 50, 10)
33 | // I reserve 50 width for the left avatar
34 | ```
35 |
36 | Its effect is:
37 |
38 | 
39 |
40 | The user name in the original image seems to be blue bold unknown font, then I also search for APIs for color and fonts:
41 |
42 | ```js
43 | Ctx.font = 'bold 14px sans-serif'
44 | ctx.fillStyle = 'blue'
45 | ```
46 |
47 | 
48 |
49 | As I saw the `font` and `fillStyle` set before `fillText`, the reason is obvious.
50 |
51 | ---
52 |
53 | Next to render the date on the right, I need to know the width of the username, and I clearly remember that I can get it with `ctx.measureText`:
54 |
55 | ```js
56 | Const usernameWidth = ctx.measureText('EGOIST').width
57 | // Reset the font and color or it will be the same as the username
58 | Ctx.font = '14px sans-serif'
59 | ctx.fillStyle = '#666'
60 | // The `x` of the time is the width of the username + the width of the reserved avatar + the distance from the time to the username
61 | ctx.fillText('2017/7/7', usernameWidth + 50 + 10, 15)
62 | ```
63 |
64 | 
65 |
66 | ---
67 |
68 | Next is the body of the message, it may be multi-line and canvas can't automatically wrap, we need to manually identify it based on the newline `\n`:
69 |
70 | ```js
71 | Const content = `hello world
72 | Goodbye world`
73 |
74 | Content.split('\n').forEach((text, index) => {
75 | ctx.fillText(
76 | Text,
77 | / / Reserve the width of the avatar
78 | 50,
79 | // content distance from the top + approximate height of each line
80 | 30 + 15 * index
81 | )
82 | })
83 | ```
84 |
85 | 
86 |
87 | ---
88 |
89 | In the end, only the avatar is left. I know I need an `input` element to get the image file, and then somehow let `ctx` render it:
90 |
91 | ```html
92 |
93 | ```
94 |
95 | ```js
96 | document.getElementById('avatar').addEventListener('change', e => {
97 | Draw(e.target.files[0])
98 | })
99 |
100 | // The following content is basically copied from StackOverflow
101 | Function draw(avatar) {
102 | // draw an avatar
103 | Const img = new Image()
104 | Img.onload = () => {
105 | // avatar actual width 40
106 | // The remaining 10px is the margin to the right
107 | ctx.drawImage(img, 0, 5, 40, 40)
108 | }
109 | Img.src = URL.createObjectURL(avatar)
110 |
111 | // ... draw something else
112 | }
113 | ```
114 |
115 | 
116 |
117 | ---
118 |
119 | The completed code can be found at: https://codepan.net/gist/6630c3910af4495ad06be5426db6c3f8
120 | The original version written in Vue can be found at: https://codepan.net/gist/a4d31a6dc1ac7517bd5d80dc62af1930
121 | Website: https://chat-meme.egoist.moe
122 |
123 | ##后日谈
124 |
125 | The code here may have problems with the way the height of the text is obtained, such as `content` the height of each line. I am the visually `15`. There will definitely be some deviation here. It seems that the height of each line can be approximated as approximately. Equal to `ctx.measureText('M').width`, but don't know if Chinese will be too much, there should be a better and more elegant solution. I am good at scratching, I don't want to ask questions here.
126 |
127 | The main purpose of writing this article is to show off my stupid way of writing code for future generations and let the readers gain confidence in the code, you may be much better than me.
128 |
129 | 
130 |
--------------------------------------------------------------------------------
/example/_posts/front-end-frameworks.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Front end frameworks overview
3 | subtitle: Do you really need frameworks?
4 | date: 2016-03-21 13:31:32
5 | tags:
6 | - frontend
7 | - javascript
8 | - js
9 | - bootstrap
10 | - jquery
11 | - vue
12 | - react
13 | - mvvm
14 | ---
15 | The front-end framework is a very popular word (Buzz word) in the near future. Let me introduce the mainstream framework and help you distinguish what is the real front-end framework.
16 |
17 | ##
30 |
31 |
40 |
41 | 然后在终端运行 `jest` 命令的时候就会自动找到这个文件，执行这里面的测试:
42 |
43 | 
44 |
45 | 额，报错了，原来 Jest 默认只支持你所使用的 node.js 版本所支持的 JS 特性，例如 `import` `export` 就不支持，所以要么你的代码使用系统 node.js 兼容的语法写 (也就是使用 `require`)，要么在这里使用 Babel 转义一下。
46 |
47 | 在 Jest 中使用 Babel 很简单，只需要安装 `babel-jest` 并新建一个 `.babelrc` 加入你想要的配置就行了，Jest 会自动使用 `babel-jest`。这里我们简单地使用 `babel-preset-env` 即可，对应的 `.babelrc` 是:
48 |
49 | ```json
50 | {
51 | "presets": ["env"]
52 | }
53 | ```
54 |
55 | 然后重新运行 jest 测试便通过了:
56 |
57 | 
58 |
59 | 对于 React 应用，基本和纯 JS 项目类似，不过你需要在 `.babelrc` 中配置对 `JSX` 的支持，在大多数时候你的项目本身就已经在使用 `.babelrc` 了，所以这一步甚至也省略掉了。
60 |
61 | ## 资源文件
62 |
63 | 当你要测试的代码引用了非 JS 文件时，Jest 就不知道如何使用这些文件了，例如你的 Webpack 项目中的一个文件:
64 |
65 | ```js
66 | import './style.css'
67 | ```
68 |
69 | 正如你需要在 Webpack 中配置了 `css-loader` 一样，你也需告诉 Jest 如何处理 CSS 文件。
70 |
71 | 📝 **package.json:**
72 |
73 | ```json
74 | {
75 | "jest": {
76 | "transform": {
77 | "^.+\\.(js|jsx)$": "babel-jest",
78 | "^.+\\.css$": "32 | 33 | 关于这里的 `expect` 语法 34 | 35 |
36 | 37 | 这里的 `expect` `toBe` 是 Jest 默认使用的断言语法，也就是用来比较 `值` 的 API，详见[相关文档](https://facebook.github.io/jest/docs/en/using-matchers.html#content)。 38 | 39 |
85 |
86 |
95 |
96 | 对应的 `./jest/css-transform.js`
97 |
98 | ```js
99 | // 大多数测试并不关心 CSS 文件里的内容
100 | // 所以这里我们直接返回一个空的对象
101 | module.exports = {
102 | process() {
103 | return 'module.exports = {};'
104 | },
105 | getCacheKey() {
106 | // The output is always the same.
107 | return 'css-cache'
108 | }
109 | }
110 | ```
111 |
112 | 类似地，你可以使用 `transform` 来设定如何处理其它类型的文件，比如 `.vue`[^2] `.svg` 文件。
113 |
114 |
115 | [^1]: Jest 默认使用 `[ '**/__tests__/**/*.js?(x)', '**/?(*.)(spec|test).js?(x)' ]` 这些测试文件，当然这是[可配置](https://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)的。
116 | [^2]: `.vue` 的 `transform` 可以使用社区的 [jest-vue](https://github.com/eddyerburgh/vue-jest)。
117 |
118 | ## 浏览器 API
119 |
120 | 假设你要测试的是一个 Web 应用，依赖于一些浏览器 API 比如 `window` `document`，它在 Jest 中同样可以正常运行，因为 Jest 默认使用了 [js-dom](https://github.com/tmpvar/jsdom) 来模拟浏览器环境，不需要浏览器环境时可以通过使用命令行参数 `--env node` 或者[配置文件](http://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string)来禁用。
121 |
122 | ## Snapshot 测试
123 |
124 | 当你期望某个值不会改变的时候，可以使用 snapshot 测试。简单地说，它就是记录这个值的状态到[本地自动生成的 snapshot 文件](https://github.com/facebook/jest/blob/master/examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap)里，然后在下一次测试中用新的值来和其进行对比。这对 UI 之类的测试很有帮助:
125 |
126 | ```js
127 | import React from 'react'
128 | import Link from '../Link.react'
129 | import renderer from 'react-test-renderer'
130 |
131 | it('renders correctly', () => {
132 | const tree = renderer
133 | .create(Facebook)
134 | .toJSON()
135 | expect(tree).toMatchSnapshot()
136 | })
137 | ```
138 |
139 | 这确保了 `Facebook` 渲染出的内容不会出错。
140 |
141 | 当你更改了 `` 组件的逻辑，需要更新 snapshot 文件时，可以加上 `--updateSnapshot` 或者 `-u` 来更新。
142 |
143 | 类似的，Snapshot 测试不止于 UI 测试中，假设你写了个 Markdown 解析器，你可以用它来确保解析出的内容不会改变:
144 |
145 | ```js
146 | import renderMarkdown from './my-markdown-parser'
147 |
148 | test('render correctly', () => {
149 | const html = renderMarkdown('# markdown code')
150 | expect(html).toMatchSnapshot()
151 | })
152 | ```
153 |
154 | 查看[相关文档](https://facebook.github.io/jest/docs/en/snapshot-testing.html#content)。
155 |
156 | ## 异步代码测试
157 |
158 | https://facebook.github.io/jest/docs/en/asynchronous.html#content
159 |
160 | 我就懒得写了... 反正用 `Promise` 或者 `async/await` 就对了。
161 |
--------------------------------------------------------------------------------
/example/_posts/the-most-lightweight-es2015-setup.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 最轻量的 ES2015 编译配置
3 | subtitle: Sometimes Babel, Sometimes Buble.
4 | date: 2017-04-28 21:11:32
5 | tags:
6 | - babel
7 | - buble
8 | ---
9 | ## 用 Buble 替换 Babel
10 |
11 | [Babel](http://babeljs.io/) 可以说是编译 ES2015+ 代码到 ES5 的首要选择，它的可扩展性很高，基于插件几乎能做任何事。
12 |
13 | 而 [Buble](https://buble.surge.sh/guide/) 则去掉了这种可扩展性，只会转换能够用 ES5 实现并保证性能的新特性，同时这样也让你免去配置的步骤。
14 |
15 | 对于下面这段代码，你可以通过编译结果看出它们设计上的不同:
16 |
17 | ```js
18 | class Foo {
19 | constructor() {
20 | this.pos = 0
21 | }
22 |
23 | say(word) {
24 | return `hello ${world}`
25 | }
26 |
27 | walk() {
28 | this.pos++
29 | }
30 | }
31 | ```
32 |
33 | Babel 的结果:
34 |
35 | ```js
36 | "use strict";
37 |
38 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
39 |
40 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
41 |
42 | var Foo = function () {
43 | function Foo() {
44 | _classCallCheck(this, Foo);
45 |
46 | this.pos = 0;
47 | }
48 |
49 | _createClass(Foo, [{
50 | key: "say",
51 | value: function say(word) {
52 | return "hello " + world;
53 | }
54 | }, {
55 | key: "walk",
56 | value: function walk() {
57 | this.pos++;
58 | }
59 | }]);
60 |
61 | return Foo;
62 | }();
63 | ```
64 |
65 | Buble 的结果:
66 |
67 | ```js
68 | var Foo = function Foo() {
69 | this.pos = 0
70 | };
71 |
72 | Foo.prototype.say = function say (word) {
73 | return ("hello " + world)
74 | };
75 |
76 | Foo.prototype.walk = function walk () {
77 | this.pos++
78 | };
79 | ```
80 |
81 | 总的来说 Buble 的结果可读性更强、更简洁，而且设计初衷就是为了不引入 `_createClass` 之类的 runtime。
82 |
83 | ## async/await 和 generator 函数
84 |
85 | Buble 暂时不支持编译 async/await 和 generator 函数，目前有以下几个工具作为替代:
86 |
87 | - [nodent](https://github.com/MatAtBread/nodent) (性能比 babel-plugin-tranform-async-to-generator 更好)
88 | - [async-to-gen](https://github.com/leebyron/async-to-gen) (不支持编译 generator)
89 |
90 | 我一般会将 Rollup、Buble 以及 async-to-gen 配合使用:
91 |
92 | ```js
93 | // rollup.config.js
94 | export default {
95 | plugins: [
96 | require('rollup-plugin-async')(),
97 | require('rollup-plugin-buble')()
98 | ]
99 | }
100 | ```
101 |
102 | 其实由于在开发 web app 的时候基本还是用 webpack 为主而且又是对 ES features 的需求不止于 ES2015，这个时候我一般还是选择用 Babel 编译。
103 |
104 | 而对于可复用的 library，不太需要 async/await 或者只是针对 Node.js 环境的时候，使用 Buble 还是很理想的。
--------------------------------------------------------------------------------
/example/_posts/the-world-is-a-big-noise.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 世界真喧扰
3 | date: 2017-05-04 13:57:06
4 | tags:
5 | ---
6 |
7 | 多说话让你有活着的实感，甚至还能调动你的神经，使你更为神采奕奕。
8 |
9 | 然而说出的不同的内容给自己和别人带来的影响也是不同的，比如有些人喜欢通过说话来贬低别人从而抬升自己，还有人希望用自己的一己之见混淆视听，这些都不是什么好的行径。
10 |
11 | 有些人说出的话其实是不经过大脑的，没有调查取证，没有任何思考的痕迹。前几日 Vue 娱乐圈又在知乎上[炸开了锅](https://www.zhihu.com/question/59039141)，之所以称之为娱乐圈完全不是贬低 Vue，而是很多国人喜欢把 Vue 往自己身上贴，让其沾染上自己的逗逼气质。不然为何他们不去搅和一下 React 娱乐圈和 Angular 娱乐圈呢，因为它们的作者大概根本不会鸟这些人。尤小右的国人属性让这些人觉得自己也可能是「被选中的那一个」。这些人之中也产生了一些怪诞的想法：
12 |
13 | > @vayne: 尤是生意人，已经是个商人了，不必和他说技术
14 |
15 | 我哪天哪根筋不对也可能去黑一下尤小右，不过万万不会用这种勾当，完全是对自己接受的数十年教育成果的否定。尤小右去年在 GitHub 贡献的提交量约为 6000，而且几乎是流行的产生了很大价值的项目，不像我那些仅仅是用来改善心情的小玩具。所以在深思熟虑后我觉得技术这个方面应该没有什么问题。再说生意人，我想这个结论大概是七大罪之一的嫉妒吧，你写代码赚 star 可以但是靠它赚了这么多钱就不对了，不过是又一个前端框架，为什么你在 [patreon](https://www.patreon.com/evanyou) 上有如此多的支持者？靠这种半自愿的赞助就月入一万刀？我也是中国人啊，上帝一定是收了你一瓶 82 年的雪莉酒才这么照顾你的。这种心情我可以体会，以前高中的时候我是个学渣，每次看到学霸考高分的时候我也是同样的心情，那个学霸甚至比我还矮。
16 |
17 | 说到嫉妒这宗罪，真是人类迈不过去的一道坎，堪称世界性不可治愈型流行病。因为嫉妒很多人会犯一些颠覆常识、泯灭人性的错误。正如每次在足球比赛结束之后，你可能看到一方的球迷因为对方头牌犯的一个莫须有的错误而给他贴上猪狗不如的标签，而对方的球迷会因为自己的骄傲被如此对待，而故意挑起更大的冲突。对了，我说的就是皇马和巴萨，C罗和梅西。
18 |
19 | C罗曾经说过，「那些批评我的人都是嫉妒我长得帅、又有钱，球还踢的好」这句话其实不无道理。对于一个起点极高的人，你当然会抱怨世界的不公，抱怨这其中是否有什么蹊跷。躺在安稳的沙发上，对着奋力一次次轰门的C罗大放厥词。
20 |
21 | 然后在事情过后，将自己产生的痕迹消灭得干干净净，就像家畜那样掩埋掉自己排泄的场所。
--------------------------------------------------------------------------------
/example/_posts/this-is-how-it-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 拥有能够眺望的远方
3 | date: 2017-01-12 17:56:09
4 | ---
5 | 最近看了冬季新番「风夏」，本来只是普通地再一次被女主角打动而已，可是在无意看了评论区之后心情却变成另一个极端。
6 |
7 | > 风夏在漫画里死了。
8 |
9 | 虽然女主角死掉的漫画和动画都有，可是上了作品标题同时死了的还是非常令人难以相信，更何况是如此打动我的风夏。
10 |
11 | 于是第二天按耐不住好奇，彻夜看完了风夏的漫画(正在连载的部分)。就算知道风夏会死，我也没想到在第 37 话就说了再见，而且似乎「什么都还没有做」就离开了，甚至后来还出现了另一个叫风夏的。很多人诟病的是作者冷酷地对待自己作品里的角色和自己的读者，我也曾经这样觉得，因为一想到后面那么多的故事不是风夏和男主来一起经历那还有什么意义啊，我就忍不住想和男主一起哭。
12 |
13 | > 我总想的是: 如果是风夏在这里会怎样呢?
14 |
15 | 很残忍，令人难过。听说作者濑尾公治是小时候看了「哆啦A梦」之后便想成为一个漫画家。惊人地相似，我在看过濑尾的「涼風」「風夏」之后，虽说不至于做梦成为漫画家，可是也想画出令自己觉得残忍和难过的作品呢。
16 |
17 | ---
18 |
19 | 于是我今天开始学习画画了，正因如此对于代码和开源我可能一段时间内不会碰了。
20 |
21 | 那以后有机会画给你瞧瞧吧 :D
--------------------------------------------------------------------------------
/example/_posts/tooling-free-you-from-jquery.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: tooling 让你从 jQuery 中解脱出来
3 | date: 2016-01-19 20:43:58
4 | subtitle: jQuery 只是个引子，泛指那些不用构建工具的 “显得很方便” 的开发方式
5 | tags:
6 | - tooling
7 | - webpack
8 | - jquery
9 | ---
10 |
11 | ## 起因
12 |
13 | 为什么我还需要用 jQuery？有时候我会有这样的疑惑。我觉得 jQuery 还存在于我某些小项目中的原因就是可以 “即插即用”。新建一个 `index.html`、复制一些代码、新建一个 `style` `script` 标签你就可以开始工作了，这种便利在某些时候非常好。
14 |
15 | 比如刚才，我想给自己做一个用于收取捐赠的网页（也许会有开源世界的同好喜欢我的项目也说不定呢），我在 “简单粗暴一个 html 搞定” 和 “Webpack + Vue 配合各种构建工具” 之间摇摆不定。
16 |
17 | 用过 Webpack 的都知道，也许配置和解决 bug 的时间会比写代码的时间更长，而且大部分情况配置文件都大同小异。那为什么不用**一个配置适用多个项目**？于是有了 [`tooling`](https://github.com/egoist/tooling)，它其实就是用一个内置的 Webpack 配置来运行和编译指定的项目。
18 |
19 | ## tooling 带来了什么？
20 |
21 | 也许我的表达并不直观，简而言之，tooling 让你开发的便利程度趋近直接用一个 html 搞定。
22 |
23 | tooling 内置了 Vue 和 React 的依赖，这意味着你要开发这两种框架的网页几乎是 `no setup`，新建一个项目，不用 `npm init`，不用安装任何依赖，直接：
24 |
25 | **index.js**
26 |
27 | ```javascript
28 | import Vue from 'vue'
29 | import app from './app'
30 |
31 | new Vue({
32 | el: 'body',
33 | components: {app}
34 | })
35 | ```
36 |
37 | **app.vue**
38 |
39 | ```vue
40 |
48 |
49 |
50 | 87 | 88 | 关于 babel-jest 89 | 90 |
91 | 92 | 当你手动在 `package.json` 里设置了 `jest.transform` 时 `babel-jest` 不再会被自动使用了，我们需要在这里手动配置。 93 | 94 |Wow
51 | 52 | ``` 53 | 54 | 然后运行 `tooling watch -e index` 就可以开着热加载模式进行开发了。 55 | 56 | 并不需要配置、对开发友好、ES6、PostCSS + PreCSS、享受 Vue 单文件组件的优势、React 的 JS everywhere 的畅快，这些带给你的远不止便利。 57 | 58 | ## Use Case 59 | 60 | 如果你实在不知道这玩意能在哪些地方用，那么我告诉你吧。 61 | 62 | - 你的开源项目的 gh-pages 主页 63 | - 你个人的一些小实验或者一个大项目的 prototype 64 | - 你的各种需要网页来展示的小发明。 65 | - many more... 66 | 67 | 看，[donate](https://github.com/egoist/donate) 就是一个例子，如果没用 tooling 的话这个 repo 里会多一堆配置文件，而现在我只需要 focus 这个项目本身。 68 | 69 | --- 70 | 71 | `tooling` 的 GitHub 主页: https://github.com/egoist/tooling -------------------------------------------------------------------------------- /example/_posts/true-how-to-learn-to-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 真・如何学写代码 3 | compileTemplate: true 4 | date: Fri Jul 27 2018 19:56:45 GMT+0800 (CST) 5 | --- 6 | 7 | 之前的一篇{{ msg }}
31 |
32 |
33 |
42 | ```
43 |
44 | 被 webpack + vue-loader 处理后是:
45 |
46 | ```js
47 | export default {
48 | data() {
49 | return {
50 | msg: 'hello'
51 | }
52 | },
53 | render() {
54 | var _vm = this;
55 | var _h = _vm.$createElement;
56 | var _c = _vm._self._c || _h;
57 | return _c('div', [_vm._v(_vm._s(_vm.msg)), _c('div')])
58 | }
59 | }
60 | ```
61 |
62 | *[在线调试](https://jsx.egoist.moe/gist/8a264502933118ee7afe811139bb52f6)*
63 |
64 | 这里的 [createElement](https://vuejs.org/v2/guide/render-function.html#createElement-Arguments) 函数也经常被叫做 `h` 函数，它被用来创建一个 [vNode](https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js) (虚拟 DOM 节点)。你可以通过 `this.$createElement` 访问它但同时它也是 `render` 函数的第一个参数。
65 |
66 | 在使用 JSX 的时候，类似 template，不过只会转换 `render` 函数中的 JSX 表达式。
67 |
68 | 对于以下源代码:
69 |
70 | ```jsx
71 | export default {
72 | data() {
73 | return {
74 | msg: 'hello'
75 | }
76 | },
77 | render() {
78 | return 
12 |
13 | ## 微信转账
14 |
15 |
16 |
17 | 
19 |
--------------------------------------------------------------------------------
/example/girls.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 那些吸引我的女孩子们
3 | subtitle: 来自 EGOIST 的告白
4 | waifus:
5 | - name: 秋月风夏
6 | cv: Lynn
7 | - name: 战场原黑仪
8 | cv: 斋藤千和
9 | - name: CC
10 | cv: 由加奈
11 | - name: 蕾姆
12 | cv: 水濑祈
13 | - name: 三笠·阿克曼
14 | cv: 石川由依
15 | - name: 惣流·明日香·兰格雷
16 | cv: 宫村优子
17 | - name: 梦梦·贝莉雅·戴比路克
18 | cv: 丰崎爱生
19 | - name: 时崎狂三
20 | cv: 真田麻美
21 | - name: 董香
22 | cv: 雨宫天
23 | - name: 楪祈
24 | cv: 茅野爱衣
25 | - name: 阿尔托莉雅·潘德拉贡
26 | cv: 川澄綾子
27 | - name: 莫德雷德
28 | cv: 泽城美雪
29 | - name: 朝田诗乃
30 | cv: 泽城美雪
31 | - name: 小宮惠那
32 | cv: Lynn
33 | - name: 碧井风夏
34 | cv: 无
35 | - name: 牧濑红莉栖
36 | cv: 今井麻美
37 | - name: 雪之下雪乃
38 | cv: 早见沙织
39 | - name: 无名
40 | cv: 千本木彩花
41 | - name: 亚丝娜
42 | cv: 户松遥
43 | - name: 我妻由乃
44 | cv: 村田知沙
45 | - name: Zero Two
46 | cv: 户松遥
47 | - name: 梅
48 | cv: 市之濑加那
49 | - name: 安琪丽莎
50 | cv: 水树奈奈
51 | - name: 朝比奈凉风
52 | cv: 三桥加奈子
53 | - name: 艾米莉娅
54 | cv: 高桥李依
55 | - name: 贞德 (Fate)
56 | cv: 坂本真绫
57 | - name: 艾蕾欧诺拉·维尔塔利亚（艾莲）
58 | cv: 户松遥
59 | - name: 宫水三叶
60 | cv: 上白石萌音
61 | - name: 阿尔泰尔
62 | cv: 丰崎爱生
63 | - name: 赫萝
64 | cv: 小清水亚美
65 | - name: 生野艾米露
66 | cv: 雾之峰沙罗
67 | - name: 艾丝·华伦斯坦
68 | cv: 大西沙织
69 | - name: 冰无小雪
70 | cv: 早见沙织
71 | - name: 友利奈绪
72 | cv: 佐仓绫音
73 | - name: 椎名真白
74 | cv: 茅野爱衣
75 | - name: 加贺
76 | cv: 井口裕香
77 | - name: 赤城
78 | cv: 藤田咲
79 | - name: 霞之丘诗羽
80 | cv: 茅野爱衣
81 | - name: 更识楯无（更识刀奈）
82 | cv: 斋藤千和
83 | - name: 绚辻词
84 | cv: 名冢佳织
85 | - name: 常木耀
86 | cv: 佐仓绫音
87 | - name: 水野茜
88 | cv: 小原好美
89 | - name: 玛修·基列莱特
90 | cv: 高桥李依
91 | - name: 乌丸千岁
92 | cv: 千本木彩花
93 | - name: 森岛遥
94 | cv: 伊藤静
95 | - name: 绿川花
96 | cv: 花泽香菜
97 | - name: 希斯特利亚
98 | cv: 三上枝织
99 | - name: 西宫硝子
100 | cv: 早见沙织
101 | - name: 西宫结弦
102 | cv: 悠木碧
103 | - name: 夏川真涼
104 | cv: 田村由香里
105 | - name: 凉风青叶
106 | cv: 高田忧希
107 | - name: 山田妖精
108 | cv: 高桥未奈美
109 | - name: 和泉纱雾
110 | cv: 藤田茜
111 | - name: 千寿村正
112 | cv: 大西沙织
113 | - name: 樱宁宁
114 | cv: 朝日奈丸佳
115 | - name: 七咲逢
116 | cv: 由加奈
117 | - name: 加藤惠
118 | cv: 安野希世乃
119 | - name: 一色彩羽
120 | cv: 佐仓绫音
121 | - name: 惠惠
122 | cv: 高桥李依
123 | - name: 輝夜月
124 | cv: 不详
125 | ---
126 |
127 | ## 当前
128 |
129 | 我喜欢小宮惠那的性格，平时是那么灵动、活泼，委屈时的无助却又让人看得心疼。
130 |
131 |
132 |
133 |
134 | 
135 |
136 | ## 历史
137 |
138 | 按照声优出现次数排名:
139 |
140 |
3 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/layouts/Category.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/layouts/Layout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
30 |
--------------------------------------------------------------------------------
/layouts/Page.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
24 |
25 |
26 |
63 |
64 |
127 |
128 |
179 |
180 |
261 |
--------------------------------------------------------------------------------
/layouts/Tag.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/layouts/Tags.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuepress-theme-egoist",
3 | "version": "1.5.1",
4 | "description": "A blog theme for @EGOIST and a mirror of egoist/blog, but powered by VuePress.",
5 | "main": "index.js",
6 | "scripts": {
7 | "release": "release-it",
8 | "dev": "vuepress dev example --temp example/.temp",
9 | "build": "vuepress build example --temp example/.temp"
10 | },
11 | "files": [
12 | "components",
13 | "layouts",
14 | "styles",
15 | "index.js"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "git+https://github.com/ulivz/vuepress-theme-egoist.git"
20 | },
21 | "keywords": [
22 | "documentation",
23 | "vue",
24 | "vuepress",
25 | "generator"
26 | ],
27 | "dependencies": {
28 | "@vuepress/plugin-blog": "^1.0.0-alpha.30",
29 | "@vuepress/plugin-pagination": "^1.0.0-alpha.30",
30 | "@vuepress/plugin-search": "^1.0.0-alpha.30",
31 | "@vuepress/plugin-medium-zoom": "^1.0.0-alpha.30"
32 | },
33 | "devDependencies": {
34 | "release-it": "v7.4.8",
35 | "conventional-changelog-cli": "^2.0.1",
36 | "vuepress": "^1.0.0-alpha.30",
37 | "limax": "^1.6.0",
38 | "markdown-it-footnote": "^3.0.1",
39 | "medium-zoom": "^0.4.0",
40 | "scifi": "^0.1.4",
41 | "v-tippy": "^2.0.0",
42 | "vue-feather-icons": "^4.7.0"
43 | },
44 | "peerDependencies": {
45 | "vuepress": "^1.0.0-alpha.30"
46 | },
47 | "author": "ULIVZ ",
48 | "license": "MIT",
49 | "bugs": {
50 | "url": "https://github.com/vuejs/vuepress/issues"
51 | },
52 | "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-blog-example#readme"
53 | }
54 |
--------------------------------------------------------------------------------
/styles/highlight.styl:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+c+cpp+coffeescript+diff+docker+git+go+http+ini+jade+json+less+livescript+makefile+markdown+nginx+python+jsx+rust+sass+scss+sql+stylus+swift+typescript+yaml */
2 | /**
3 | * prism.js default theme for JavaScript, CSS and HTML
4 | * Based on dabblet (http://dabblet.com)
5 | * @author Lea Verou
6 | */
7 |
8 | .token.comment,
9 | .token.prolog,
10 | .token.doctype,
11 | .token.cdata {
12 | color: slategray;
13 | }
14 |
15 | .token.punctuation {
16 | color: #999;
17 | }
18 |
19 | .namespace {
20 | opacity: .7;
21 | }
22 |
23 | .token.property,
24 | .token.tag,
25 | .token.boolean,
26 | .token.number,
27 | .token.constant,
28 | .token.symbol,
29 | .token.deleted {
30 | color: #905;
31 | }
32 |
33 | .token.selector,
34 | .token.attr-name,
35 | .token.string,
36 | .token.char,
37 | .token.builtin,
38 | .token.inserted {
39 | color: #690;
40 | }
41 |
42 | .token.operator,
43 | .token.entity,
44 | .token.url,
45 | .language-css .token.string,
46 | .style .token.string {
47 | color: #a67f59;
48 | }
49 |
50 | .token.atrule,
51 | .token.attr-value,
52 | .token.keyword {
53 | color: #07a;
54 | }
55 |
56 | .token.function,
57 | .token.class-name {
58 | color: #DD4A68;
59 | }
60 |
61 | .token.regex,
62 | .token.important,
63 | .token.variable {
64 | color: #e90;
65 | }
66 |
67 | .token.important,
68 | .token.bold {
69 | font-weight: bold;
70 | }
71 | .token.italic {
72 | font-style: italic;
73 | }
74 |
75 | .token.entity {
76 | cursor: help;
77 | }
78 |
--------------------------------------------------------------------------------
/styles/index.styl:
--------------------------------------------------------------------------------
1 | *
2 | box-sizing: border-box
3 |
4 | body
5 | margin: 0
6 | font: 300 1em/1.8 PingFang SC,Lantinghei SC,-apple-system,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans
7 | background-color: #fdf6e3
8 |
9 | a
10 | font-weight 300
11 | text-decoration none
12 | color: #b58900
13 | cursor: crosshair
14 | &:hover
15 | background: #eee8d5
16 |
17 | .main
18 | padding: 40px 70px
19 |
20 | .cv
21 | font-size 12px
22 | border 1px solid #ccc
23 | padding 0 3px
24 | margin-left 10px
25 |
26 | // override nprogress
27 | $spinnerColor = #ff69b4
28 |
29 | #nprogress .bar
30 | background: $spinnerColor
31 |
32 | #nprogress .peg
33 | box-shadow: 0 0 10px $spinnerColor, 0 0 5px $spinnerColor
34 |
35 |
36 | @import './highlight.styl'
37 |
38 | @media screen and (max-width: 768px)
39 | .main
40 | padding: 20px 10px
41 | .hide-on-mobile
42 | display: none !important
43 |
--------------------------------------------------------------------------------
/styles/palette.styl:
--------------------------------------------------------------------------------
1 | $accentColor = #b58900
2 | $textColor = #586e75
3 | $borderColor = #eaecef
4 | $codeBgColor = #282c34
5 | $arrowBgColor = #ccc
--------------------------------------------------------------------------------
{this.msg}
79 | }
80 | }
81 | ```
82 |
83 | 它会被转换成:
84 |
85 | ```js
86 | export default {
87 | data() {
88 | return {
89 | msg: 'hello'
90 | };
91 | },
92 | render() {
93 | const h = arguments[0];
94 |
95 | return h(
96 | 'div',
97 | null,
98 | [this.msg]
99 | );
100 | }
101 | };
102 | ```
103 |
104 | *[在线调试](https://jsx.egoist.moe/gist/a2bda79dfa96053bc9bb5e743988796e)*
105 |
106 | ## Vue JSX 特性
107 |
108 | ### 和 React JSX 的不同
109 |
110 | Vue JSX 中 createElement 的第二个参数 `data` 与 React 中的有些不同，它是个嵌套的对象并且每个顶层的属性由不同的模块处理，提供不同的功能，比如 `class` (在 React 中是 `className`) 和 `on` 这两个属性:
111 |
112 | ```js
113 | createElement('div', {
114 | class: ['foo', 'bar'],
115 | on: {
116 | click: this.click
117 | },
118 | ['foo']
119 | })
120 | ```
121 |
122 | 对应的 JSX 是:
123 |
124 | ```jsx
125 |
126 | ```
127 |
128 | 对于这种嵌套对象，你可以在 JSX 中用 camelCase 或者 kebeb-case (连字符) 来表示，换句话说这里 JSX 中的 `onClick` 也可以写成 `on-click`，前者是为了让熟悉 React JSX 的同学更方便而加入的。
129 |
130 | 完整的属性列表请参考相关 [typing](https://github.com/vuejs/vue/blob/2deda3d4328eb7aea0adb0eaf01d68537ed0e0af/types/vnode.d.ts#L36-L60) 和 [README](https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx)。
131 |
132 | ### v-model [插件页面](https://github.com/nickmessing/babel-plugin-jsx-v-model)
133 |
134 | 不久之前 Vue JSX 还不支持 `v-model` 因为这个转换比较复杂，感谢 [@nickmessing](https://github.com/nickmessing) 的 [babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model) 插件。
135 |
136 | 对于以下 template:
137 |
138 | ```html
139 |
140 | ```
141 |
142 | 对应的 JSX 是:
143 |
144 | ```jsx
145 |
146 | ```
147 |
148 | 编译后:
149 |
150 | ```js
151 | import _mergeJSXProps from "babel-helper-vue-jsx-merge-props";
152 |
153 | var _this = this;
154 |
155 | h(
156 | "input",
157 | _mergeJSXProps([{
158 | domProps: {
159 | "value": _this.username
160 | },
161 | on: {
162 | "input": $event => {
163 | if ($event.target.composing) return;
164 | _this.username = $event.target.value;
165 | }
166 | }
167 | }, {
168 | directives: [{
169 | name: "model",
170 | value: _this.username
171 | }]
172 | }]),
173 | []
174 | );
175 | ```
176 |
177 | *[在线演示](https://jsx.egoist.moe/gist/7de4ca46ae8eb69dbd861e23c4603f64)*
178 |
179 | 其实在 JSX 里的 `v-model` 就是语法糖，你当然可以手动书写对应的逻辑。而这个 Babel 插件则简化了这一步骤。JSX 中的 `v-model` 拥有 template 中同样的功能。
180 |
181 | ### 事件修饰符 [插件页面](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers)
182 |
183 | template 中的键盘事件修饰符在 JSX 中也有完整的支持。
184 |
185 | 对于以下 template:
186 |
187 | ```html
188 |
189 |
190 | ```
191 |
192 | 对应的 JSX:
193 |
194 | ```jsx
195 |
196 | // 多个修饰符用 `-` 连字符连接
197 | Click
198 | ```
199 |
200 | 转换之后的 JS:
201 |
202 | ```js
203 |
204 | var _this = this;
205 |
206 | h(
207 | "a",
208 | {
209 | on: {
210 | "click": $event => {
211 | $event.stopPropagation();
212 | $event.preventDefault();
213 |
214 | _this.doThat($event);
215 | }
216 | }
217 | },
218 | ["Click"]
219 | );
220 | ```
221 |
222 | *[在线演示](https://jsx.egoist.moe/gist/8b99c95854d389df4772e4b677966403)*
223 |
--------------------------------------------------------------------------------
/example/_posts/why-i-choose-tab-over-space.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 为什么我选择用 tab 而不是 space 来缩进
3 | date: 2016-01-17 22:33:44
4 | tags:
5 | - javascript
6 | - code
7 | - space
8 | - tab
9 | ---
10 | 圣战有很多种，诸如 Vim vs Emacs，Sublime vs Atom，OSX vs Windows，当然也有 Tab vs Space。
11 |
12 | 很久以前我听信了一个建议，“两个空格的缩进非常棒，你是前端更是如此了。”
13 |
14 | “为什么？” 我想问，但我并没有问，因为从网上搜索而来的理论中，“两个空格党” 这股力量不容小觑，我于是随波逐流，并且一直感觉不错，“两个空格” 似乎是对的，JS 嵌套多，空格少看起来不那么 “糟”。
15 |
16 | 但直到最近，我遭到了两次背叛。
17 |
18 | 第一次是我下班回来从 24 寸屏切换到家里的 14 寸笔记本，“天啊！两个空格几乎短到看不见了！” 我急忙切换到四个空格这才稍微好点，然而我不可能家里一个配置，公司一个配置，我第一次有了抛弃空格的念头。
19 |
20 | 第二次是我在某处 copy 了一段代码（没办法，我是面向 GitHub 编程的），“糟糕！他的代码是四个空格缩进！” 于是我还得 “帮他” 把代码缩进调整为两个空格。
21 |
22 | ---
23 |
24 | 分手理由充分了，我毫不犹豫地说了再见。
25 |
26 | 但是 tab 更好？当然。
27 |
28 | 理由之一是 tab 是非常适合 “有个性的人” 的，根据你的个性你可以调整 tab 的宽度，同样是 “一个 tab” 但你可以让它看起来像 “两个空格” 或者 “四个空格”，而不是生硬地调整 space 的数目，那样对你项目的协作者会非常糟，除非你们用同一个 size 的屏幕，同一个编程习惯。
29 |
30 | 其实还有非常多的理由，[Why tabs are clearly superior](http://lea.verou.me/2012/01/why-tabs-are-clearly-superior/) 会坚定你选择 tab 的决心。
31 |
32 | 总结一下就是：
33 |
34 | - Tab 占的体积更小。
35 | - Tab 的宽度可以因人而异，更个性化。
36 | - Tab 更利于多人协作。
37 | - Tab 不需要依靠某一个工具，所有编辑器都知道 “如何插入一个 tab”
38 | - Tab 更容易选中，还在为漏选一个 space 而烦恼？
39 | - Tab 现在在网页上不再难看，过去网页上一个 tab 显得非常宽，而现在 CSS3 的 `tab-size` 属性解决了这一痛点。
40 |
41 | > Use tab to indent, use space to align.
42 | > If you are using space, you are making alignment, not making indention.
43 |
--------------------------------------------------------------------------------
/example/_posts/why-i-wont-marry.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 为什么我不会结婚
3 | date: 2016-04-02 19:27:34
4 | tags:
5 | ---
6 | - 有生理缺陷
7 | - 有心理缺陷
8 | - 没有值得喜欢的人
9 |
--------------------------------------------------------------------------------
/example/_posts/why-so-addicted-into-anime.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 为什么动漫如此吸引我？
3 | date: 2015-07-10 09:08:51
4 | categories:
5 | - Anime
6 | tags:
7 | - anime
8 | ---
9 | 我想我第一部认真看的动漫应该是神奇宝贝，此外还有龙珠Z。但在那个时候，我其实不知道动漫到底是什么。我只是觉得这是日本卡通片而已，我并不知道大洋彼岸的岛国对动漫如此推崇，那里的动漫真是数以千计，各种脑残粉打扮得像动漫里的角色，当然那时我也并没体会到 hentai 的真正含义。
10 |
11 | 大概是从看浪客剑心开始我慢慢明白了动漫究竟是什么，我也开始学画漫画，我和我的小伙伴画了一部属于我们的漫画。这件事是真的很有趣，那个时候我大概 14 岁，我记得我是从网上找动漫资料学习画画，然后就被如此之多的动漫惊艳到了。
12 |
13 | 现在已经过了好几年了，我已经 24 岁，我那参军的兄弟依然亘古不变地从遥远的军营向我推荐动漫来看。我其实已经好几个月没碰动漫了，但现在我满血复活。不管我多少次停止看动漫这件事，我最终还是又开始看了，**为什么？我他妈到底怎么了？老大不小了看个屁的动漫啊？是不是该打住别去看那些半裸萌娘巨乳萝莉撕高达的东西了？动漫到底哪吸引你了？**
14 |
15 | 其实吧，我觉得原因也很简单。
16 |
17 | **第一，动漫的色彩效果真是很炫酷** 在动漫里有各种色彩搭配，亮色、鲜艳色、吸引眼球的颜色，甚至你可能并不知道鲜艳的颜色对保持健康略有裨益！就是说，丰富的颜色能让你心情变好。所以，看动漫从科学角度来说是对身体有好处的（这真的是我说的吗 233
18 |
19 | **另一个原因就是，我觉得，啊，对，萌妹子** 动漫里的女生都超可爱的是吧，娇小的外形、大大的眼睛、黑长直，卡哇伊卡哇伊卡哇伊 >3< 搞怪的妹子、萌系妹子、剑姬、肉魅以及我的我的最爱，“猫娘”。她们不只可爱还超性感，这是每个boy无法抵挡的。
20 |
21 | **但是！真正让我放不下动漫的原因是，里面的故事** 我看过的动漫各式各样的题材都有，情节各异。里面有些情节阐述的观念和想法是你闻所未闻、耳目一新的，比如说死亡笔记，一个男孩发现了一本日记然后发现自己能靠在日记上写上一个人的名字来杀死他。再比如CODE GEASS，讲的是几个拥有超自然能力的人进行的机甲战争，这些能力比如说读心术和强制控制他人行为。再比如黑之契约者，讲的是某个角色能靠割手腕然后把流出来的血洒在别人身上来杀人。
22 |
23 |
24 | 这些想法一个接着一个翻新，你永远想不到的想法就会出现在一部动漫中。我不知道是怎么回事，也许是美国人不善创新？所有故事都大同小异，乏味的故事靠着新的演员来骗钱，但是在日本，我去！你看了一集你就被吸引了，有些东西有人永远不会明白，除非他看了动漫。
25 |
26 | 最后作为一个作家，很感谢动漫带给我的灵感 :D
27 |
28 | ---
29 |
30 | 总感觉我翻译得怪怪的，还是去看原文吧:
31 |
32 | Just a Transilation from [WHY ANIME IS SO ADDICTING](https://medium.com/@dwarsement/why-anime-is-so-addicting-fcf6ef36b7c)
33 |
--------------------------------------------------------------------------------
/example/_posts/write-better-code-with-eslint-and-prettier.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 用 ESLint 和 Prettier 写出高质量代码
3 | subtitle: 当然你的代码本身不能是无意义的
4 | date: 2017-12-11 21:37:05
5 | tags:
6 | - javascript
7 | - eslint
8 | - prettier
9 | ---
10 |
11 | [ESLint](https://github.com/eslint/eslint) 可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义，而 [Prettier](https://github.com/prettier/prettier) 作为代码格式化工具，能够统一你或者你的团队的代码风格。
12 |
13 | 本文不会介绍这两种工具单独的使用方法，因为相关网络资料已经足够多了。这里我介绍一下怎么同时使用它们。
14 |
15 | ## 在 ESLint 中使用 eslint-plugin-prettier
16 |
17 | __为什么使用这种方法: 希望格式化结果完全符合 Prettier 的要求。__
18 |
19 | 相关依赖:
20 |
21 | ```bash
22 | yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
23 | ```
24 |
25 | `eslint-plugin-prettier` 的工作原理是，对比格式化前和用 Prettier 格式化后的代码，有不一致的地方就会报错，然后你可以手动运行 `eslint --fix` 来修复。
26 |
27 | 不过 Prettier 的格式化很可能和你使用的 ESLint 配置冲突，比如你的 ESLint 设定的不使用分号，而 Prettier 默认使用分号，这时候你需要配置 Prettier 让它不使用分号。反之如果你想使用 Prettier 的规则而不是 ESLint 的，为防止 ESLint 报错，你需要使用 `eslint-config-prettier` 来关闭所有可能引起冲突的规则。
28 |
29 | 总结一下我的配置如下 `package.json` (为了方便展示省略了不必要的部分):
30 |
31 | ```json {5-11}
32 | {
33 | "scripts": {
34 | "lint": "eslint *.js"
35 | },
36 | "eslintConfig": {
37 | "extends": ["prettier"],
38 | "plugins": ["prettier"],
39 | "rules": {
40 | "prettier/prettier": "error"
41 | }
42 | },
43 | "prettier": {
44 | "singleQuote": true,
45 | "semi": false
46 | }
47 | }
48 | ```
49 |
50 | 上面高亮的 `eslintConfig` 可以简化为:
51 |
52 | ```json
53 | {
54 | "extends": ["plugin:prettier/recommended"]
55 | }
56 | ```
57 |
58 | `eslint-plugin-prettier` 提供的 `recommended` 配置会自动添加 `eslint-config-prettier` 和 `eslint-plugin-prettier`，为你省去一些手动的配置。
59 |
60 | 你可以使用大多数编辑器里 ESLint 插件提供的 `autoFixOnSave` 选项来在保存时自动格式化。
61 |
62 |
63 | ## 使用 prettier-eslint-cli
64 |
65 | __为什么使用它: 希望格式化结果完全符合 ESLint 的要求。__
66 |
67 | 相关依赖:
68 |
69 | ```bash
70 | yarn add prettier-eslint-cli --dev
71 | ```
72 |
73 | 使用 ESLint 与 `eslint-plugin-prettier` 的结果是最终得到的代码是充分尊重 Prettier 的结果，而 `prettier-eslint-cli` 则是先执行 Prettier 然后再自动使用 `eslint --fix` 将与 ESLint 规则冲突的代码修正成 ESLint 想要的结果。这样其实引入 Prettier 不会影响你原有的设置。
74 |
75 | 总结一下我的配置如下 `package.json` (为了方便展示省略了不必要的部分):
76 |
77 | ```json
78 | {
79 | "scripts": {
80 | // ESLint 只负责检查代码质量
81 | "lint": "eslint *.js",
82 | // 用 Prettier 格式化代码并自动 `eslint --fix `以便下次执行 `npm run lint` 时不会报错
83 | "format": "prettier-eslint --write *.js"
84 | },
85 | "eslintConfig": {
86 | "extends": "some-config"
87 | },
88 | "prettier": {
89 | "singleQuote": true,
90 | "semi": false
91 | }
92 | }
93 | ```
94 |
95 | 除了命令行的 `npm run format`，同时你也可以使用编辑器里的 Prettier 插件，并启用 `eslintIntegration` 来在编辑器里自动格式化代码。
96 |
97 | ## 在提交代码时格式化
98 |
99 | 安装需要的依赖:
100 |
101 | ```bash
102 | yarn add lint-staged husky@next --dev
103 | ```
104 |
105 | [husky](https://github.com/typicode/husky) 被用来添加一些 git 钩子，这里我们需要一个用 `pre-commit` 在每次 `git commit` 操作时执行 `lint-staged` 命令。
106 |
107 | 而 [lint-staged](https://github.com/okonet/lint-staged) 可以对 git 暂存区文件(也就是你想要 commit 的文件)执行一些操作，比如这里我们想在代码被修改后将其格式化:
108 |
109 | ```json
110 | {
111 | "lint-staged": {
112 | "*.js": ["eslint --fix", "git add"]
113 | },
114 | "husky": {
115 | "hooks": {
116 | "pre-commit": "lint-staged"
117 | }
118 | }
119 | }
120 | ```
121 |
122 | ## 个人喜好
123 |
124 | 我个人倾向使用 eslint-plugin-prettier，因为 ESLint 一般是必需的，而使用 ESLint 插件的成本明显比使用一个新的命令行工具(即 prettier-eslint-cli)的成本低多了。
125 |
--------------------------------------------------------------------------------
/example/_posts/wtf-is-front-end-development.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 什么是前端开发
3 | date: 2018-08-21
4 | published: false
5 | warning: 本文正在撰写中...
6 | ---
7 | 一个网页应用或者移动应用的开发通常分为两大块，后端和前端:
8 |
9 | - 后端: 处理数据，按需交给前端使用。
10 | - 前端: 从后端获取数据，然后以特定的界面 (UI) 来显示。
11 |
12 | 后端开发能使用的编程语言有很多，比如 Python、Go、Java、C# 等等。然而前端受制于环境，只能使用支持的语言来编写，比如 iOS 前端使用 Swift 或者 Obj-C，Java 前端使用 Java 或者 Kotlin，Web 前端使用 JavaScript。
13 |
14 | 如果只提「前端」，那通常指的是 Web 前端，本文也主要是*围绕 Web 前端进行讨论*。
15 |
16 | ## 前端开发的历史
17 |
18 |
--------------------------------------------------------------------------------
/example/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 关于这个可爱的男孩子
3 | subtitle: 先定一个小目标，写出能用的代码就行了。
4 | ---
5 |
6 | ## 关于我
7 |
8 | 94 年生人，生无可恋脸，患有二次元禁断综合征。我会在这里写一些关于 Node.js、JavaScript、开源、足球、动漫、三次元相关的文章，如果你感兴趣可以订阅这个 [RSS](/atom.xml) 地址。
9 |
10 | ## 抓得到我吗
11 |
12 | - [GitHub](https://github.com/egoist)
13 | - [Twitter](https://twitter.com/_egoistlily)
14 | - [Telegram](https://t.me/egoistlily)
15 | - [微信](http://ww4.sinaimg.cn/large/a15b4afegw1f0nf2nlbzuj20n00ydtck)
16 | - [网易云音乐](http://music.163.com/#/user/home?id=12579252)
17 | - [AniList](https://anilist.co/user/egoistlily/)
18 | - 中国成都
19 |
20 | ## 赋湿一首
21 |
22 | 四百大妈，掺金坷垃。问斯大林，瞬间爆炸。
23 | 你麻痹的，抢劫王八。满喉精液，瞎卡啦卡啦。
24 |
25 | 身体健康，那才叫爽。哦内撒嘛，快po上网。
26 | 蓝蓝蓝路，山东蓝翔。视频删除，砸烂富土康。
27 |
28 | 加了特技，骑着摩的。非凡吔屎，爱疯垃圾。
29 | 超威蓝猫，全家萝莉。乖乖站好，到处丢东西。
30 |
31 | 断他魂结，发自真心。一本满足，用卫生巾。
32 | 控白控控，唱歌下棋。本気本気，倒悬打飞机。
33 |
34 | ## 兴♂趣
35 |
36 | 能一直写代码，一直踢足球，一直看动漫，一直单曲循环，就够了。
37 |
38 | 我的灵魂歌手: EGOIST/chelly、Aimer
39 | 我的灵魂球员: C罗
40 | 我的灵魂语言: JavaScript
41 |
42 | ## 装备
43 |
44 | - 电脑: MacBook Pro 840 (2015 early)
45 | - 手机: iPhone SE (主要) / 小米 5 (偶尔用)
46 | - 平板: iPad Pro 第二代 + Apple Pencil 第一代
47 | - 鼠标: Razer 地狱狂蛇 2014 (没在用)
48 | - 水杯: Lock&Lock LHC4125
49 | - 其它: Kindle (偶尔看)
50 |
51 | ## 前端开发
52 |
53 | ### Q: 为什么从事前端?
54 |
55 | 前端介于视觉和逻辑之间，可以同时创造包含着两种东西的产品。
56 |
57 | ### Q: 为什么没在牛逼的公司工作?
58 |
59 | 水平不够。
60 |
61 | ### Q: 我想学前端，给点建议?
62 |
63 | 建议找牛逼的人给建议。
64 |
65 | ### Q: 你为什么那么喜欢造轮子?
66 |
67 | Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.
68 |
69 | -- Steve Jobs
70 |
71 | ### Q: 你为什么叫 EGOIST?
72 |
73 | [EGOIST/chelly](http://music.163.com/#/artist?id=19353)
74 |
75 | ## 三观
76 |
77 | 老师给我三观评价是「正正正」，你看看如何:
78 |
79 | - 那么可爱一定是男孩子
80 | - 看到二次元女孩子第一反应是 prpr
81 | - 天灭 ISIS 保平安
82 |
83 | 其次，我相信人最不能缺少的东西就是钱和梦想。不能缺少钱不是指为了钱夜以继日工作那样，唯利是图，而是指能够拥有足够维持自己梦想的钱，对的，真正重要的是梦想啊。没有梦想是件很可怕的事，它让你虚度光阴甚至让你对自己的存在产生疑问。
84 |
--------------------------------------------------------------------------------
/example/donate.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 捐赠支持
3 | ---
4 |
5 | 文章基于 [署名-非商业性使用-禁止演绎 4.0 协议](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh) 进行共享，[开源项目](https://github.com/egoist)都以 [MIT](https://egoist.mit-license.org/) 协议发布。
6 |
7 | 对你的支持，我会心怀感激且倍感荣幸地接受，并继续努力。
8 |
9 | ## 支付宝
10 |
11 |
12 |
13 | ## 微信转账
14 |
15 |
16 |
17 |
19 |
--------------------------------------------------------------------------------
/example/girls.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 那些吸引我的女孩子们
3 | subtitle: 来自 EGOIST 的告白
4 | waifus:
5 | - name: 秋月风夏
6 | cv: Lynn
7 | - name: 战场原黑仪
8 | cv: 斋藤千和
9 | - name: CC
10 | cv: 由加奈
11 | - name: 蕾姆
12 | cv: 水濑祈
13 | - name: 三笠·阿克曼
14 | cv: 石川由依
15 | - name: 惣流·明日香·兰格雷
16 | cv: 宫村优子
17 | - name: 梦梦·贝莉雅·戴比路克
18 | cv: 丰崎爱生
19 | - name: 时崎狂三
20 | cv: 真田麻美
21 | - name: 董香
22 | cv: 雨宫天
23 | - name: 楪祈
24 | cv: 茅野爱衣
25 | - name: 阿尔托莉雅·潘德拉贡
26 | cv: 川澄綾子
27 | - name: 莫德雷德
28 | cv: 泽城美雪
29 | - name: 朝田诗乃
30 | cv: 泽城美雪
31 | - name: 小宮惠那
32 | cv: Lynn
33 | - name: 碧井风夏
34 | cv: 无
35 | - name: 牧濑红莉栖
36 | cv: 今井麻美
37 | - name: 雪之下雪乃
38 | cv: 早见沙织
39 | - name: 无名
40 | cv: 千本木彩花
41 | - name: 亚丝娜
42 | cv: 户松遥
43 | - name: 我妻由乃
44 | cv: 村田知沙
45 | - name: Zero Two
46 | cv: 户松遥
47 | - name: 梅
48 | cv: 市之濑加那
49 | - name: 安琪丽莎
50 | cv: 水树奈奈
51 | - name: 朝比奈凉风
52 | cv: 三桥加奈子
53 | - name: 艾米莉娅
54 | cv: 高桥李依
55 | - name: 贞德 (Fate)
56 | cv: 坂本真绫
57 | - name: 艾蕾欧诺拉·维尔塔利亚（艾莲）
58 | cv: 户松遥
59 | - name: 宫水三叶
60 | cv: 上白石萌音
61 | - name: 阿尔泰尔
62 | cv: 丰崎爱生
63 | - name: 赫萝
64 | cv: 小清水亚美
65 | - name: 生野艾米露
66 | cv: 雾之峰沙罗
67 | - name: 艾丝·华伦斯坦
68 | cv: 大西沙织
69 | - name: 冰无小雪
70 | cv: 早见沙织
71 | - name: 友利奈绪
72 | cv: 佐仓绫音
73 | - name: 椎名真白
74 | cv: 茅野爱衣
75 | - name: 加贺
76 | cv: 井口裕香
77 | - name: 赤城
78 | cv: 藤田咲
79 | - name: 霞之丘诗羽
80 | cv: 茅野爱衣
81 | - name: 更识楯无（更识刀奈）
82 | cv: 斋藤千和
83 | - name: 绚辻词
84 | cv: 名冢佳织
85 | - name: 常木耀
86 | cv: 佐仓绫音
87 | - name: 水野茜
88 | cv: 小原好美
89 | - name: 玛修·基列莱特
90 | cv: 高桥李依
91 | - name: 乌丸千岁
92 | cv: 千本木彩花
93 | - name: 森岛遥
94 | cv: 伊藤静
95 | - name: 绿川花
96 | cv: 花泽香菜
97 | - name: 希斯特利亚
98 | cv: 三上枝织
99 | - name: 西宫硝子
100 | cv: 早见沙织
101 | - name: 西宫结弦
102 | cv: 悠木碧
103 | - name: 夏川真涼
104 | cv: 田村由香里
105 | - name: 凉风青叶
106 | cv: 高田忧希
107 | - name: 山田妖精
108 | cv: 高桥未奈美
109 | - name: 和泉纱雾
110 | cv: 藤田茜
111 | - name: 千寿村正
112 | cv: 大西沙织
113 | - name: 樱宁宁
114 | cv: 朝日奈丸佳
115 | - name: 七咲逢
116 | cv: 由加奈
117 | - name: 加藤惠
118 | cv: 安野希世乃
119 | - name: 一色彩羽
120 | cv: 佐仓绫音
121 | - name: 惠惠
122 | cv: 高桥李依
123 | - name: 輝夜月
124 | cv: 不详
125 | ---
126 |
127 | ## 当前
128 |
129 | 我喜欢小宮惠那的性格，平时是那么灵动、活泼，委屈时的无助却又让人看得心疼。
130 |
131 |
132 |
133 |
134 | 
135 |
136 | ## 历史
137 |
138 | 按照声优出现次数排名:
139 |
140 |
141 |
147 |
148 |
--------------------------------------------------------------------------------
/example/index.md:
--------------------------------------------------------------------------------
1 | -
142 |
- 143 | {{ waifu.name }} {{ waifu.cv }} 144 | 145 |
2 | egoist
3 | .
4 | lily
5 |
6 |
7 |
59 |
60 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | name: 'vuepress-theme-egoist',
5 | plugins: [
6 | '@vuepress/blog',
7 | '@vuepress/pagination',
8 | [
9 | '@vuepress/search', {
10 | searchMaxSuggestions: 10
11 | }],
12 | [
13 | '@vuepress/register-components', {
14 | componentsDir: [
15 | path.resolve(__dirname, 'components')
16 | ]
17 | }]
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/layouts/404.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
32 |
33 |
49 |
--------------------------------------------------------------------------------
/layouts/Categories.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
4 |
6 |
4 |
9 |
4 |
6 |
4 |
6 |