注册

写了个程序员真香的简历制作工具

看效果


不废话直入主题,这里是编辑页面,你可以来尝试一下


image.png


用法


左边写Markdown内容,右边显示渲染效果,纯前台数据,不涉及数据库


扩展语法


Markdown本身并没有实现多列布局,以及针对简历布局的需要,所以我自己写了个插件来支持这些语法并实现Markdown的一些常用语法(只实现了常用的),比如多列布局、图标、个人信息、主体内容布局语法


多列布局


实现一个三列布局,原理就是flex

::: start
第1列
:::
第2列
:::
第3列
::: end

多列布局显示效果


image.png


图标语法


下面的语法将被解析为<i></i>,可以通过下面即将介绍的自定义CSS来对其进行样式设置,感兴趣可以自行尝试一下.

icon:github

图标显示效果


image.png


其他语法


更多可以查看这里的语法助手


工具栏


为了更自由的定制化需求,暴露了一些工具提供使用,这里以编写CSS为例,写的CSS可以直接作用在简历模板上


image.png


编写CSS这里所有的样式都需要写在.jufe容器下面,以防影响到其他节点的样式


image.png


设置后的效果


image.png



其他小功能比如自定义主题配色、自定义字体颜色、调节模板边距等可以自行尝试一下,就不过多赘述了,都是比较实用的功能



两种编辑模式


提供了两种编辑模式,markdown模式内容模式,提供内容模式主要就是给一些不熟悉 Markdown的同学使用,那这里就介绍一下内容模式吧


点击切换编辑模式(左侧右侧工具栏都有提供切换按钮,这里使用左侧的)


image.png


这样就切换到了内容模式,这两种模式之间的数据是同步的,可以自由切换


image.png



内容模式本质就是一个富文本编辑器模式,就类似写word一样就可以了,比如想修改图标,直接点击想修改的图标就会弹出图标选择框,点击想替换的图标后直接就完成了替换,这个感兴趣的自行尝试吧



模板


模板目前有十几个,都随便用,没事的时候就会更新一下


image.png


其他


其实这个工具还有很多功能都没介绍,因为全部写下来的话篇幅会太大,感兴趣可以自己去尝试,都是些比较实用的功能


仓库


GitHub Repo
    Gitee Repo


感兴趣可以点个Star,感谢支持,如果你有不错的Idea,欢迎给仓库贡献代码.


作者:磊磊磊磊磊
链接:https://juejin.cn/post/7245836790040657978
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册