优秀的Typora

发表于 更新于

今天意外地发现了Typora，几乎解决了我关于记笔记和写博客的所有问题。

1.日常记笔记

其实我大概三个月前是用纸笔记笔记的，直到我意识到我打字已经比写字快很多了。。。

然后我开始用word记事，当然是可以的，但是总觉得不够轻便

然后我开始用onenote，但功能又太少了，关键时刻连个公式都没有

直到今天，直到今天我发现了Typora

  1. 实现了markdown的所见所得，标题、加粗、插图，可以直接显示，实现了word的功能又不用频繁点鼠标。
  2. 公式可以直接用$\LaTeX{}$打啊，而且边写边预览！
  3. 可以直接贴代码啊，直接语法高亮啊！这个用word我是不会做的。
  4. 装了pandoc之后，能直接导出word，而且公式还是原生的word公式，不是mathtype的！

其实看了上面的功能，我就怀疑这个软件像是一个本地版的hexo，然后我在GitHub上找，没找到源码，但找到了到了Typora的组织，里面的仓库有node、有electron，emmm，我更加怀疑了🤔

2.Hexo

所以把Typora当作Hexo的客户端非常合适，好像Hexo写博客难受的几个点都可以解决了。

2.1实时预览

hexo里能实现的，Typora上也都能实现，所以其实就是实现了实时预览。

虽然理论上也可以开hexo server，但是毕竟还是要到浏览器里刷新一下才能看到变化的，比不上直接用这个来得直接。

2.2图片粘贴

贴图简直是hexo的灾难，最早我是把图传到七牛云的，然后复制了链接再手动写到博客里。

后来七牛云突然就不允许外链了，差点把我的图都搞丢，吃了教训之后，我把图都放到了source/images里，然后在贴图的时候用![](/images/ctc.jpg)，图片是要自己复制的，路径也是要自己写的。

但是现在有Typora 了！可以实现图片直接粘贴了

设置好图片自动复制，不管是本地图片，还是网络图片，都复制到source/images，显示相对路径，同时需要设置图片根目录，

1
typora-root-url: ../../source

这样Typora生成的相对路径才可以正常在网站上显示。

屏幕快照 2019-07-14 上午1.15.21

但mac上好像不能批量设置图片根目录，所以修改默认的post配置，在scaffolds\post.md里，添加上面那一句。

以前写的博客没有这一句怎么办呢？我弄了半天的sed最终放弃了（mac的freebsd上的sed和gnu的sed不一致），还是用python一把梭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import os

path_root = './_posts/'
files = os.listdir(path_root)
files = [path_root + x for x in files if x.endswith('.md')]
insert_line = 'typora-root-url: ../../source'

for file in files:
    with open(file) as f:
        lines = f.readlines()

    if any([insert_line in x for x in lines]):
        continue

    lines.insert(2, insert_line + '\n') // 在哪一行插入都行
    with open(file, 'w') as f:
        f.writelines(lines)

##2.3一个Typora没解决的图片问题

后来想到还有一个问题没有解决，图片直接用的是原图，没有做裁剪和重命名。

参考这里做的，用gulp压缩图片。

在package.json的 dependencies里加入

1
2
3
4
5
6
7
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.4.0",
"gulp-uglify": "^2.1.2",

然后，

1
2
3
cnpm insall
cnpm update # 直接install后报错，update之后好了
cnpm audit fix

gulpfile.js做了一些修改，主要是压缩图片好事太长了，从部署流程里单独拉了出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var runSequence = require('run-sequence');
var Hexo = require('hexo');


gulp.task('clean', function() {
    return del(['public/**/*']);
});

// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function(cb) {
    hexo.init().then(function() {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function() {
        return hexo.exit();
    }).then(function() {
        return cb()
    }).catch(function(err) {
        console.log(err);
        hexo.exit(err);
        return cb(err);
    })
})

gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});

gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-img', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./public/images'))
})

gulp.task('minify-img-aggressive', function() {
    return gulp.src('./source/images/**/*.*') //直接压缩source里的图片，public里的不管了
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./source/images'))
})

gulp.task('img', ['minify-img-aggressive'])

gulp.task('compress', function(cb) {
    runSequence(['minify-html', 'minify-css', 'minify-js'], cb);
    // runSequence(['minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive'], cb);
});

gulp.task('build', function(cb) {
    runSequence('clean', 'generate', 'compress', cb)
});

gulp.task('default', ['build'])

压缩图片用这个

1
gulp img

部署用这个

1
gulp build && hexo d