1.《了不起的源码Markdown》第六章
2.VuePress 博客优化之 last updated 最后更新时间如何设置
3.使用 Webpack-chain 链式生成 webpack 配置(读 vuepress 二)
《了不起的Markdown》第六章
笔记软件是现代人记录重要信息、事件与想法的源码重要工具。Markdown作为一种简洁的源码文本格式标记语言,因其专注且高效的源码写作特点,在笔记软件中大放异彩。源码以下介绍几款流行的源码补码还原源码笔记软件及其与Markdown的结合: 印象笔记 印象笔记支持基础Markdown语法与GFM语法,用户可以快速绘制数学公式、源码流程图、源码时序图、源码甘特图,源码并提供多种图表绘制功能。源码在印象笔记中新建Markdown笔记,源码可通过左上角的源码新建Markdown笔记按钮或快捷键实现。默认编辑模式下,源码左侧为源码,源码右侧为预览。工具栏提供常用标记的快速插入功能,包括图表模板。使用添加流程图功能后,可快速插入流程图模板。印象笔记支持四种图表:饼图、mpc hc源码解析折线图、柱状图、条形图,预览界面支持交互操作。上传、直接拖拽添加或从剪切板粘贴均支持,大小可通过右键菜单调整。导出Markdown格式或转换为PDF文件亦可实现。 有道云笔记 有道云笔记支持Markdown功能,包括基础Markdown语法、代码高亮、任务列表、表格、数学公式等。在电脑端与Web端,新建Markdown文件可通过右键菜单中的新文档选项完成。手机端则在+按钮中选择Markdown。在Markdown编辑环境中,常用语法可通过工具栏的快速插入图标直接使用。有道云笔记还提供快速插入公式与图表模板的网站钓鱼源码教程功能,简化了创建图表的过程。 OneNote OneNote本身不直接支持Markdown,但通过插件可以实现Markdown功能。插件可在网站上下载,适用于Windows版本。 在线多人协作工具 在线文档协作工具如腾讯文档和石墨文档,支持简单的Markdown语法,如标题、分隔线、列表等,且在编辑时直接通过“标记符号+空格”使用Markdown,效果实时显示。 写博客 知乎支持基础Markdown语法,通过“标记符号+空格”对文字进行排版。简书与CSDN也分别支持Markdown编辑器,其中CSDN的Markdown编辑器功能齐全,可以导入/导出Markdown文件,解析GFM语法。 写微信公众号文章 对于写微信公众号文章,Markdown虽然方便,java动态菜单源码但某些格式在微信编辑器中不支持。推荐使用Online-Markdown或Md2All等在线格式化工具,将Markdown文档渲染为适合微信公众号的格式。 写邮件 Markdown Here插件允许用户在邮件编辑器中使用Markdown语法,通过该插件,Markdown编辑器直接集成在邮件编辑器中,实现Markdown写作,简化了邮件写作流程。 其他常见工具 锤子便签支持Markdown语法,适用于文字排版;DayOne日记软件支持Markdown对日记进行排版,使用简单;交互式文档工具如Jupyter Notebook与R Markdown,分别在数据分析与技术写作领域提供强大的功能支持,支持代码的实时执行与显示结果。Markdown页编写工具md-page允许直接使用Markdown编写网页,无需转换格式。项目文档写作工具如MkDocs与VuePress,提供快速创建项目文档的解决方案,支持Markdown编写。 付费软件方面,如Ulysses、溯源码 宁波进口MWeb、MarkdownPad与CMD Markdown等提供更专业的服务与更好的用户体验,适合不同需求的用户群体。 小结 本文详细介绍了多个专业Markdown工具,旨在帮助用户根据不同的写作场景选择合适的工具。从记笔记、写博客、写邮件、编写技术文档到创建交互式文档,Markdown工具提供了丰富的功能与便捷的体验,满足了现代写作的多样化需求。VuePress 博客优化之 last updated 最后更新时间如何设置
探究 VuePress 博客中最后更新时间的设置与实现
在使用 VuePress 搭建博客的过程中,发现未自动显示最后更新时间。查阅官方文档得知,VuePress 自带显示最后更新时间的插件,通过在 config.js 文件中配置即可启用。
官方示例中将 lastUpdated 设置为 "上次更新",但实际操作并未显示最后更新时间,原因在于使用本地编写源码并使用构建命令,将结果 git init 后强制提交,此时并未在 git log 中获取到更新记录。
深入查看插件源码发现,lastUpdated 是基于 git 提交记录生成的,因此需要在 git 仓库中操作。分析代码实现后,发现直接修改 $page 计算属性即可实现最后更新时间的展示。
在 Markdown 文件中直接使用 Vue 语法编写更新时间的代码,但此法较为繁琐。为提高效率,可将此代码封装为 Vue 组件,实现全局引入并自动更新时间的功能。
在 .vuepress/components 文件夹下创建 LastUpdated.vue 组件,引用后即可在 Markdown 文件中自动显示最后更新时间。此方法简化了更新流程,并确保了时间的全局同步。
回顾官方文档,lastUpdated 是基于 git 提交记录生成的时间戳,且仅在页面首次提交后生效。在执行编译命令时,通过 git log 获取时间并写入编译后的代码中。
解决未显示时间问题的关键在于初始化 git 仓库,并确保编译后文件的 git 状态。可通过在根目录执行 git init 进行初始化,但在添加文件时需注意避免重复的 git 仓库。
解决重复 git 仓库问题,使用 .gitignore 文件忽略编译后的 dist 目录,确保只在一个 git 仓库内操作。执行 git add 后,即可在编译后的代码中显示最后更新时间。
最后,若需自定义 lastUpdated 前缀或调整时间格式,参照官方文档进行配置。实现后,整个博客页面将展示最新的更新时间,简化了手动更新操作。
搭建博客系列教程旨在分享 VuePress 搭建、部署的实战经验,欢迎关注微信「mqyqingfeng」加入读者群。如有错误或不严谨之处,请指正,感谢支持。
使用 Webpack-chain 链式生成 webpack 配置(读 vuepress 二)
在使用 VuePress 构建项目时,你可能会发现它的配置文件中引入了一个叫做 webpack-chain 的库。VuePress 使用 webpack-chain 来生成它的三个配置:基础配置、dev 配置、build 配置。这个库与传统方式生成配置文件的模式有所不同。本文将深入探讨 webpack-chain 如何帮助简化配置过程。
首先,webpack-chain 提供了两种数据结构:ChainMap 和 ChainedSet。ChainMap 类似于 ES6 的 Map,而 ChainedSet 类似于 Set。这两种数据结构都允许通过链式方法进行操作,大大提高了配置的灵活性和可读性。
ChainedSet 和 ChainedMap 都继承于 Chainable 类,它们分别提供了对配置文件中特定部分的管理功能。例如,你可以通过 ChainedSet 的方法来添加、删除或查询配置中的任意部分,这种操作方式使得配置修改变得更加直观和高效。
webpack-chain 的核心原理在于实现链式调用,通过 Chainable 类来支持这一特性。链式调用通过 end 方法返回调用链中最前端的对象,使得配置构建过程更为简洁和直观。在 VuePress 中,这种链式调用方式被充分利用,使得开发者能够以更少的代码量完成复杂的配置任务。
在 VuePress 的源代码中,你可以看到如 createBaseConfig.js 这样的文件,其中包含了使用 webpack-chain 功能的示例。例如,生成配置时可能会包含对特定样式语言的处理,通过链式调用进行顺序加载和处理,这极大减少了配置文件的编写工作量,同时提供了高度的定制性和灵活性。
使用 webpack-chain 的关键在于理解其核心功能和如何在实际项目中灵活应用。它可以帮助简化配置过程,提高开发效率。然而,引入新的库或工具总是需要权衡其带来的好处与项目成本。在考虑使用 webpack-chain 时,确保它能够为你的项目带来显著的收益,从而抵消引入新库所增加的成本。
总结起来,webpack-chain 为 VuePress 和其他项目提供了更高效、更灵活的配置管理方式。通过学习其原理和应用示例,你可以更好地利用这一工具,提高项目的开发效率和可维护性。