用VScode编辑文章虽然很方便,但是VScode里面自带的实时显示文章(所谓的所见即所得)总觉得不怎么好看,想起来之前在公司里面偶尔修改些前端代码,好像有办法实时显示修改。现在前端开发有很多好用的工具,可以一边修改代码一边运行,实时显示在游览器。于是,网上搜索了下就找到这个插件,非常好用。

browsersync介绍及作用

browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是Browsersync可以同时在PC、平板、手机等设备下进项调试。官网 browsersync,省时的浏览器同步测试工具,确实很方便很强大。

如何在 Hexo 中使用 browsersync

我是在VScode中编辑文章,安装browsersync直接在任何一个命令行中运行以下:

  • 第一步
    • 打开 cmd 或 git 切换到你的 blog 主目录下
  • 第二步
    • 执行 $ npm install hexo-browsersync --save
  • 第三步
    • 执行 $ hexo server
  • 第四步

执行完上述步骤,你可以一边编写源文档,一边查看编译后的文档

当你编写并调试完后,关闭 http://localhost:4000/ 之后,还需要执行 $ hexo deploy --generate,刷新你的博客页面,这样你的文章就上传了。

参考: https://www.dazhuanlan.com/2019/12/26/5e04219a60b20/