前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用Sublime+MarkDown快速写博客

使用Sublime+MarkDown快速写博客

作者头像
付威
发布2018-12-05 16:19:22
8300
发布2018-12-05 16:19:22
举报
文章被收录于专栏:老付的网络博客

前端的开发人员应该都知道sublime的神器,今天就说说如何使用sublime结合markdown快速写博客。

添加Snippets

在使用jekyll写博客的时候开篇都需要去写一个头部,内容如下:

代码语言:javascript
复制
 layout: post 
 title:xxxxx     
 date:xxxxxxx 
 author:xxxx

对于这个固定格式我们可以定义一个Snippets,具体的步骤如下:

  1. 在sublime中的** Tools–>Developer–>New Snippets.. **
代码语言:javascript
复制
 <snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

上面代码片段包含了sublime在什么时候插入什么内,详细参考官方文档Snippets

content
  • Hello, ${1:this} is a ${2:snippet}. 要的显示的文本 其中的${}符号是tab索引占位,${1:time},说明此处是tab第一个占位,默认值是time
tabTrigger
  • <tabTrigger>hello</tabTrigger> 要触发的版本 scope
  • <scope>source.python</scope> 在那个类型文件触发

下面是我根据我自己的需要来创建的snippets,在markdown和html模式下,输入blog+tab 就直接显示上面的内容.

代码语言:javascript
复制
 <snippet>
	<content><![CDATA[
---
layout: post
title: ${1}  
date: ${2:time} 
header-img: "img/home-bg.jpg"
tags:
     - ${3}
author: '老付'     
---
${4}    
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>blog</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>text.html.markdown,text.html</scope>
</snippet>

注意:创建完成后,一定要保存成.sublime-snippet,效果如下:

自定义编译系统

当写完一个博客的时候,可以执行jekyll server去在本地查看效果,当文件发生发动的时候,jekyll也会自动重新最新的博客。但如果要把数据上传到github上面,不得不输入以下几个命令:

代码语言:javascript
复制
  git add .

  git commit -m 'update'   

  git push origin gh-pages

当完成上传之后,还要手动打开网站去查看最终的博客效果。下面就把这个过程做成一个sublime编译的系统,首先我先演示下windows下如果自动化完成这个功能。

1. 首先根据上面的功能创建一个批处理文件,文件为post.bat 结尾:

代码语言:javascript
复制
   @echo off       

   cd ..  

   git add . 

   git commit -m 'update'

   git push origin gh-pages  

   start http://blog.laofu.online

在_posts目录下面运行的时候,可以看到,脚本可以自动把脚本 传入到git上面,同时默认的浏览器打开博客。

2. 新建一个编译系统 Tools–>Build System–>New Build System .. ,sublime会提供一个默认的数据,详细配置参见Build Systems – Configuration,此处我们可以修改成如下的配置:

代码语言:scss
复制
 {
      "cmd": ["处理文件的目录\\post.bat", "$file"],
      "working_dir": "$file_path",
      "selector": "text.html.markdown"
  }

配置修改完成后,保存成.sublime-build文件。当我们写好博客后,按Ctrl+B的时候,sublime会自动调用处理文件,完成上传发布工作。

(本文完)

作者:老付 如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者,如果有问题,请在捐赠后咨询,谢谢合作 如有任何知识产权、版权问题或理论错误,还请指正。 自由转载-非商用-非衍生-保持署名,请遵循:创意共享3.0许可证 交流请加群113249828:点击加群 或发我邮件 laofu_online@163.com

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-06-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 添加Snippets
    • content
      • tabTrigger
      • 自定义编译系统
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档