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

看效果

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

image.png

用法

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

扩展语法

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

多列布局

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

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

多列布局显示效果

image.png

图标语法

下面的语法将被解析为<i class='icon-github'></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,欢迎给仓库贡献代码.

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYgZMaN5' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片