Ghost

Github: https://github.com/dedfaf/Code2Ghost 这个项目源自于我搭完ghost后，发现其没有直接上传或者同步博客仓库的方法，也没有合适的上传工具，索性自己写一个VScode的上传插件 ghost的api功能相当强大，不过目前只用到了上传博客的功能。之后有精力的话，可以写一个在code里完全管理ghost的图形化插件 现在的进度直接看TODO吧 对本人而言，之前其实并没有写VScode插件的经验，这个项目也属于是学习项目，欢迎提出意见 原理 https://ghost.org/docs/admin-api/#creating-a-post 通过vscode插件api读取当前编辑器的内容，通过marked转换为html，通过正则判断<h1>获得标题，然后删去标题留下正文，打包上传api front-matter通过gray-matter读取 获得博文内容基本相反，拉下博文的html还有其他信息，通过turndown转换为md，再把需要的属性直接写成yaml填到front-matter里 目前的难点 / TODO 2025.2.25 这几天完成了 Get（拉取所有帖子，然后选择一个在编辑器打开） Update（将本地文件的内容推送到与本地文件front-matter中id对应的帖子） Sync（先读取本地文件front-matter中的id，然后用服务器上的文章覆盖本地（如果服务器与本地的updated_at不一致，即更新过）） 发布了0.1.0版本，自认为应该算是及格的编辑器了 今天才发现创建/更新后如果不同步全文，那么本地文件的图片路径仍是本地，每次都会上传一份图片，索性每次创建/更新后都直接Sync一遍.. 目前开学了比较忙，目前的进度已经完全足够我个人使用了。这个项目大概会放一段时间，暂时先看Ghost论坛里反响强不强吧 2025.2.24 目前基本完成了之前设想的功能 图片直接正常插入md，插件将自动解析上传并在正文中替换链接为ghost图床链接 标题、作者、标签可以通过markdown的front-matter来添加，同时也做了Get Post，修改然后Update这套流程相关的命令，怎么Update在仓库的README里已经写过了 接下来要做： 更好的标签栏管理，之后将尝试将本地文件与在线博文关联，实现自动更新等操作 一键编辑作者标签？不应该让end user直接碰yaml这种东西，毕竟不是谁都看过api文档。不过这个难度很大，考虑到能用我这个插件的估计也不会有小白，所以暂时先不弄？ 或许之后有时间可以重写一下，直接将本插件做成ghost在VScode的客户端。不过这个项目作为在一个Ghost编辑器的功能性还是足够的（前提是没bug，等测试吧，对自己程序的鲁棒性完全没信心） 2025.1.26 上传图片，需要先通过ghost图片api上传ghost图床，然后在文章中引用 插件中只做了标题的确认，实际上作者，标签等都应该在上传时确认 更新，删除，发布文章 至于其他的功能，目前不在本插件的考虑范围内，理应直接在ghost后台操作

对于复杂的技术博文没有侧边目录栏基本看不下去，然而ghost并不自带目录栏功能，所以我们只能通过改主题文件来实现。 不过好在ghost的主题文件并不复杂，这里完全可以依照官方教程把代码粘贴进去就能用了，强烈建议先看官方教程。这篇博客主要讲解一些细节 官方教程：https://ghost.org/tutorials/adding-table-of-contents 我的博客主题修改自source，仓库：https://github.com/dedfaf/DF-Blog-Theme 教程讲解 官方教程使用了ToCBot来实现目录栏 可以用ghost install local安装本地测试环境，在其上修改后再push到生产环境 一些简单的样式调整 这里讲解一些官方教程操作完后的一些细节调整，也可以直接参考文末我的代码 默认展开所有目录 默认情况下，之后浏览到的目录只会展开当前标题的子标题，需要在脚本中加入 <script> tocbot.init({ // ... collapseDepth: 6, // ... }); </script> 去除序号前缀 脚本中加入 <script> tocbot.init({ // ... orderedList: false, // Ensures the list is not ordered // ... }); </script> 去除链接下划线 CSS: .toc-list .toc-list-item a { text-decoration: none; /* remove underline */ } 调整目录的位置 默认的目录位置是紧贴正文的，可以修改css中目录栏的上级.gh-sidebar的偏移量来调整目录的位置。我的目录原本在左侧紧贴正文，我将其向左偏移了px，仅供参考 @media (min-width: 1300px) { .gh-sidebar { position: absolute; top: 0; bottom: 0; margin-top: 4vmin; grid-column: wide-start / main-start; /* Place the TOC to the left of the content */ margin-left: -192px; /* add offset */ } .gh-toc { position: sticky; /* On larger screens, TOC will stay in the same spot on the page */ top: 4vmin; } } 个人最终生成的代码 请重点关注两个{{!– ToC –}}注释后的部分，其余的部分和casper的代码是一样的 ...