Markdown——配置Sublime的Markdown编辑环境

Markdown介绍

Markdown作为一个纯文本标记语言,由于其在保持便利书写的同时又能实现快速排版,十分方便的转化为HTML,pdf等一些其他格式等优点,现在使用的已经越来越广泛了。

尽管作为纯文本语言,随便用什么编辑器都能打开,windows自带的记事本也能随便编写。但是一套良好的开发环境,不管是对开发效率、用户体验来说都是有极大的提高的,就像你写C语言,肯定是不会愿意用记事本写的。以下我将对我使用的markdown编写环境做介绍。

用Sublime编写Markdwon的文章

Sublime Text是非常好用的前端编辑器,拥有丰富的插件可提供安装,重点还是可以无限试用。sublime有两种版本2和3,这里为sulime3的下载地址:http://www.sublimetext.com/3

Markdown有一些专业的编辑器,我们没有用过。还有很多在线的markdown编辑器也非常方便。sublime虽然不是专业的markdown编辑器,但是加上一些有用的插件后照样可以达到专业的效果。关于sublime的使用方法这里不详细解释,网上有很对教程。

Sublime编写Markdwon的插件

  1. Package Control(插件管理工具)

    sublime安装插件的方法不止一种,但是最简单的方法是用Package Control来安装,初始的Sublime是没有Package Control的,需要我们手动安装它。

    安装Package Control的方法:快捷键 “Ctrl + `”,打开控制Sublime的台窗口, 打开Package Control官方网站https://packagecontrol.io/installation,选择对应的版本,将提供的代码复制到控制台里面,回车即可。安装好后最好重启Sublime(版本2要重启软件,3好像不需要)。
    如下图:

    pageckage control

    sublime 3的代码如下:

    import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/' + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

    安装完成后,快捷键“Ctrl + Shift + P”, 输入install 选中Install Package,如图:

    pageckage control

    如果没有关于Package的选项说明没有安装成功。若进入Install Package后,则输入对应的插件名称即可。

    插件安装好后,都可以通过菜单栏的:Preferences -> Package Setting,找到对应的插件,修改其配置。

  2. Markdown Editing

    Markdown Editing能够在你编写markdown文件的时候就可以预览渲染后的版式效果,尽管不是最终效果。如下为Markdown Editing插件安装前后,效果的对比图:

    安装前:
    Markdown Editing
    安装后:
    Markdown Editing

  3. OmniMarkupPreviewer

    OmniMarkupPreviewer主要用途是实时在浏览器中预览效果,在编辑区上右键就可以弹出菜单,选择Preview Markdown in Browsers菜单即可。
    如图:

    OmniMarkupPreviewer

    完成操作后就可以两边对比着看了,如下图(左边是Sublime的编辑环境,右边是浏览器中的显示)
    sublime_BrosPrev

    这个插件可以导出HTML文件,CSS样式模板可以配置的。

  4. Tables Editor

    用Markdown写表格是比较麻烦的,而Tables Editor可以协助我们编辑表格。一般只要写好表头,然后按Tab建就可以实现自动补全、自动对齐的功能。

    具体用法可以阅读README文件(Preferences -> Package Setting —> Tables Editor -> README)

    注意使用前需要将其使能:

    • 快捷键: ctrl+shift+p
    • 输入Table Editor 选择 Table Editor: Enable for current syntax 或者 Table Editor: Enable
Compartir

Hexo——使用hexo常见问题

使用hexo server启动本地服务无法访问

使用hexo server命令成功后,在浏览器中输入localhost:4000,无法打开网页。已很肯可能的原因是4000端口被占用,使用如下命令重新映射新的端口号:

1
hexo server -p 4001

如上,就将服务的端口号修改为4001,访问时使用4001即可。

图片无法加载

  1. 要用相对地址

引用图片时不要用绝对地址

一个比较好的方式是:在存放源文件的目录下,创建一个文件夹专门存放图片,生成网页文件后手动将其copy到public的目录下。

这种方式的有一个缺点是:每次使用hexo clean清除后生成文件后,都要将图片文件夹重新手动copy到public中

  1. 后缀名大小写写错

图片的后缀名,有的是大写有的是小写,所以书写时很容易写错。大小写不对图片也将无法显示。

表格无法加载

打开_config.yml文件,向其中加入marked控制参数:


marked:
gfm: true
pedantic: true
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true

如果原来就有这些参数,那就修改tables项,将其设置为true。用hexo clean清除后重新生成。

Compartir

Hexo——hexo的配置和主题

切换hexo主题

  1. 下载主题

    在hexo官网的主题页面(跳转地址)找一个喜欢的主题,进入主题的github仓库页面,复制仓库的URL,用git复制到本地。

    git clone [git pero url] themes/NewTheme

    如:
    git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/lcarus

    如上命令,一般我们是将主题都放在themes目录下,lcarus为下载主题的名字,下载成功后会生成themes/lcarus来存放下载主题包

  2. 修改当前主题

    修改_config.yml文件,将参数theme设置为你刚才下载的主题,如:

    theme: lcarus

  3. 重新生成

    先清除,再重新生成。如果没有成功可能需要参照作者的配置说明修改配置,主要修改改主题目录下的_config.yml(不是根目录下的)

常用配置

当用hexo new [name]来生成一个新的文章时,hexo会根据scaffolds文件夹中的模板在生成的markdown文件中添加头信息,可以通过修改模板文件,来控制自动生成的md文件的头部信息。

在头部信息中比较重要的是如下几个:

  • title

    表示文章的题目

  • date

    习作日期

  • tags

    tags为文章的标签,一般的博客模板都有标签栏,标签可以是文章中提到的一些关键点关键字,当文章多了后可以通过这些tag快速查找文章

    一篇文章可以有多个tag,多个tag需要用markdown的列表格式来写。
    如单个tag写法:

    tags: 博客

    多个tag时需要这样写:


    tags:

    • 博客
    • hexo
  • category

    category是为文章分类归档,写法与tags一样。

Compartir

Hexo——用hexo搭建个人blog

Hexo简介

Hexo是一种简单快速搭建blog系统框架的工具,使用它可以很快速的将用户Markdown文章,生成网页文件并套用到blog的模板中;可以支持GithubPage等网站的格式展示网页。

Hexo官网: https://hexo.io/

Hexo安装(Windows平台)

  1. 安装支持Hexo所需要的环境,安装比较简单,这里只简单讲解

    • node.js: Hexo是用node.js开发的,需要提前安装node.js(下载地址),注意32bit和64bit的区别。

    • git: Hexo主题包源码都是用git管理的,因此下载上传代码都需要git的支持

  2. 安装Hexo

    在node.js安装好后,打开cmd或直接用gitbush终端,输入如下命令,来全局安装Hexo:

    npm install -g hexo-cli

构建blog系统

  1. 生成基本的blog框架

    1. 创建存放blog文件夹,在终端中cd到(进入)这个文件夹,执行如下命令:

      hexo init

      会下载基本的blog系统框架到该文件夹下,如下图:
      hexo init

    2. 执行如下命令,下载需要的依赖文件:

      npm install

  2. 验证blog框架是否工作正常

    在终端下执行如下命令:

    hexo server

    打开浏览器,输入终端上提示的http://localhost:4000 的地址,若出现默认的初始blog页面,就成功了!
    hexo_index

  3. 安装hexo-deployer-git工具

    为了后面方便发布到github page上,本地安装hexo-deployer-git工具,命令如下:

    npm install hexo-deployer-git –save

配置发布blog

  1. 修改_config.yml文件

    在blog根目录下的_config.yml,是blog的配置文件,许多配置参数都在这其中修改,具体配置方法参考官方的doc文档,这里只列举最最用的几个:

参数 意义
title blog站点名称
subtitle blog站点副名称
author 作者
  1. 增加新的blog文章

    使用如下命令,可以添加一个markdown文件作为博文的源文件:

    hexo new 博文名

    如执行命令:
    hexo new 用hexo搭建个人blog

    完成后,在\source\_posts目录下会出现文件:用hexo搭建个人blog.md

  1. 生成新修改的blog

    每次修改blog,不管是配置还是文章的内容都需要重新生成,命令如下:

    hexo generate

    完成后可以hexo server命令,再次查看修改是否成功

  2. 发布到github page上

    关于github page的介绍另外讲解,这里假定:

    • 拥有了github账号
    • 创建了github page的库
    • 本地git环境已经配置好,可以向github推送代码
    • 正确安装了hexo-deployer-git工具

    步骤如下:

    1. 打开配置文件_config.yml,修改最后面的Deployment部分:


      deploy:
      type: git
      repo:
      branch: [branch]
      message: [message]

      repository url为你创建的github page的仓库,branch为提交项目的分支名,message为提交的log信息

    2. 用hexo generate重新生成

    3. 推送到github,执行如下命令:

      hexo deploy

      然后就可以打开你的github page查看了。我的github page: http://harrymei.github.io/

Compartir

寻找博客的意义

几周前开始萌生做个人技术博客的念头,中间前前后后花了几个周末的时间去寻求合适的解决方案,直到今天终于开始真正着手实施,确实花费了不少的额外时间。但是,没有半途放弃、继续让计划Delay下去,对于工作的繁忙、在blog创建方面完全菜鸟的我来说已经是不容易了。

博客印象

对于博客印象,我还停留在10年前的sina的博客时代,那时候的博客是最火热的互联网产品。当时刚刚接触网络的我也赶着潮流注册了sina博客,虽然从一开始就没有怎么用过。那时候的网民能够耐心的阅读那一篇篇长长的博文,在今天看来也真是不可思议的情形。

不过随着移动互联网的发展,图片音乐视屏等多媒体形态在传媒中的扮演的角色越来越重要,于是文字信息简短图片视屏支持更好的的微博开始兴起,而主要以纯文本为载体的博客也慢慢走向衰落。纵观这些年主流的互联网产品,从最初的博客、qq空间、人人,到微博、微信朋友圈,果然是越来越符合这个快餐时代的需求了。

当前的博客

正如前面所说,在这个消息简短、文字图片视屏同等重要的网络社交年代,我甚至有些怀疑博客是否有存在的意义。不过在寻求方案这些天里,我仍然发现了一些新推出的博客产品。可以明显看到,这些博客是在传统博客的基础上努力突出自己的一些新的特性与风格。如网易的lofter,以兴趣类型分类,主要面向年轻人,主题模板多,内容图片多文字少;而简书又是另外一个方向,以文字为主,主要面向文艺青年,提供用户非常干净的纯文本的写作环境。除此以外还有另外一类,那就是一直存在的技术博客。

以上这类博客都是为特定的人群提供有各自特色的服务,尽管现在博客已经由当初的大众变成的如今的小众产品,但是仍然能够很清晰的看到,它所体现着的独特价值。

技术博客

有别于技术论坛的社区性,技术博客则比较独立、完全是你个人的天地,社区论坛重点在于实时的交流的过程,而技术博客则侧重工作学习后的经验的整理与总结,二者的共同点都是分享。

尽管在网上需求帮助时,经常能到别人的博客找到答案,但是由于长期来对博客认识的惯性思维,此前我从来就没有把博客看作一个良好的技术分享地。不过这也是有原因的,虽然不少人在博客(甚至是sina、网易、以前的百度空间这些综合娱乐性的博客平台)中分享技术性文章,但是大多粗制滥造,都是copy来再copy过去,有些copy的代码部分甚至都无缩进无换行就发布出来。这样一来就失去技术博客的意义了,在我看来技术博客并不是摘抄本,它的价值在于:自己对于当前工作或学习的梳理,是对你所学的知识的巩固、消化与吸收的过程,而当文章发布后,读者的提问和建议,则会让你对这部分的理解进一步加深,以此形成一个良性循环。而不经思考的转发,不仅对于自己的理解毫无帮助,还可能发布一些错误的东西误导他人。
因此我认为技术博客应该:

  1. 尽量保持原创性

  2. 转载的内容需要经过自己的理解与思考,并将自己的思考的部分或者疑问的部分记录下来

以上为一个新手或者局外人的角度看到了这些问题。现在,我开始写自己的技术博客,为了避免后面步入自己早已发现的‘坑’中,也算是对自己的要求吧。

Compartir

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

Compartir