Verne in Blogger

Markdown online Editor

之前不久我接触过Markdown,还写了一篇博客介绍MarkDown ,同时也找到了不少在线的Markdown编辑器.不过最近由赛恩推荐的Stackedit在线编辑器确实好用,而我之前是一直使用scribefire Chrome插件来发布Blogger文章,偶尔也使用Blogger后台,而最近Chrome下Blogger后台完全上不去,发生”There was an error while fetching stats. Please reload page.”错误,而scribefire最近在我启用二步验证之后也失效,幸而找到StackEdit这个现在编辑工具.用过一段时间才发现是如此的好用.下面就讲讲这款在线编辑器.

网址

https://stackedit.io

什么是Stack Edit

Stack Edit 是爱尔兰人 Benoit Schweblin 创立的在线 Markdown 应用，支持发布内容到 Google Blogger，具备离线撰写和编辑功能。

StackEdit 可以：

• 管理多个 MarkDown 文档在线或脱机
• 通过模板导出 MarkDown 或 HTML 格式文件
• 云同步 MarkDown 文档
• 支持 Google Drive, Dropbox 和本地硬盘驱动器
• Post MarkDown 文档到 Blogger 、Blogspot、WordPress和Tumblr
• 发布 MarkDown 文档在GitHub，GIST，Google Drive，Dropbox或任何SSH服务器
• 分享一个及时渲染的 MarkDown 文档链接
• 文档信息统计显示
• 转换HTML到 MarkDown

StackEdit支持：

• 实时编辑、HTML预览并自动滚动定位到编辑处
• Markdown Extra 支持 Prettify/Highlight.js 的语法高亮
• LaTeX 数学表达式使用MathJax
• 所见即所得的控制按钮
• 可配置的布局
• 支持多个主题
• A la carte extensions
• 离线编辑
• Google Drive和Dropbox在线同步
• 一键发布支持 Blogger，Dropbox，GIST，GitHub，Google Drive，SSH server，Tumblr，WordPress

同类型在线编辑器

在介绍MarkDown这篇文章中提到的:

• http://mahua.jser.me/
• http://dillinger.io/
• http://jianshu.io/
• https://draftin.com/

但是这些都没有这个StackEdit功能强大.

几个小技巧

• 更新某一篇Blogger文章,需找到post id,也就是你打开需修改的文章,查看网页源代码,在<div class="post hentry">这个div第一个a标记中name属性的值就是post id.
• 现在我已经养成了在Dropbox中新建md文件,有stackedit打开,编辑发布的习惯

参考:1 2

Widget Tags for Layouts

标签是用来创建最基本的widget的,描述在 Page Element Tags for Layouts 中.而这篇是描述在widget标签中具体可以设置哪些东西的,例如你可以在widget中放置什么.

第一件事就是放置一个闭合的标签,像这样:

<b:widget [...attributes...] />

展开之后是这样的:

<b:widget [...attributes...]> </b:widget>

接下来谈论一下可以在widget中放置什么

Includes

Widget的内容包含在”includable” section中,像这样:

<b:includable id='main' var='thiswidget'>
    [insert whatever content you want here]
</b:includable>

includable的属性有:

• id:(必须)唯一标识符,由字母和数字组成
• var:(可选)标识符,由字母数字组成,用来引用section中的data.(具体请见下面说的data section)

每一个widget必须有一个具有id='main'的includable.通常这个widget的大部分内容都包含在这个includable中.

如果你有很多具有不同id属性的includable,他们不会自动的显示出来.但是如果你有一个includable带有id='new'的属性,那么在main includable中通过<b:include name='new' />就能够引用,并显示出来.

b:include标签的属性如下:

• name:(必须)标识符由字母和和数字组成,它必须是在同一个widget中已经存在的b:includable的id
• data:(可选)An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.

简单例子同来讲解b:includable和b:include的用法.Loops和data会在后面讲述,这里主要要理解’main’ section是如何包含 ‘post’ section的.main包含了一个includable,传递了一个data叫做’i’,included section引用做’p’,使用p访问title.

<b:includable id='main'>
   <b:loop var='i' values='posts'>
      <b:include name='post' data='i'/>
   </b:loop>
</b:includable>

<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>

下面这段的意思就是说如果你想重复使用代码,可以将代码放到includable中,然后用include引用.就不翻译了. Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- is unnecessary.)

Data

data:标签大概是最为重要的一个标签了,因为它是获取一切事实数据的途径,一些例子如下:

<data:title/>

or

<data:photo.url/>

这个例子非常简单,他能够在几乎所有的widget中起作用,因为大多数widget有title.上面的例子就是打印出widget的title.第二个例子是一个较为复杂的变量,获取photo的url.

有很多data你能够通过data:标签来获取,查阅 comprehensive list 查询需要的data,一些data只能在特定的widget中使用.

Loops

b:loop 标签让你重复使用section中内容.通常用在打印给定的一系列post,或者每一条留言,或者每一个label,等等.通常用法,像这样:

<b:loop var='identifier' values='set-of-data'>
   [repeated content goes here]
</b:loop>

• identifier 可以选用任何名字,用来代表list中每一个item.可以简单的设定为”i”.
• set-of-data 可以是在 data tags article中定义的任何一系列data

例如,在blog post widget中, posts是一个list,下面的代码是遍历每一个post,打印出每一个的标题title

<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>

注意,”i”是每一个post,在循环中使用i获取每一个post的title

if / Else

if/else像很多编程语言一样,条件判断,这里是选择哪些显示和哪些不显示.通常如下:

<b:if cond='condition'> 
   [content to display if condition is true]
<b:else/>
   [content to display if condition is false]
</b:if>

b:else tag是可省略的. 而</b:if>是不可省略的. 如果没有else子句,那么只有满足if条件才会执行if子句中代码,不然什么都不执行

条件语句中你可以放置任何结果是true或者false的语句,有一些data本身就表示true/false,像post中allowComments.其他data,你可以用来比较得到结果.一些例子:

<b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.
<b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).
<b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.
<b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.

翻译自:Blogger Help Widget Tags for Layouts

Heading

Subheading

Minor heading

caption

with propertities

1. 第一
2. 第二
3. 第三

• 第一
• 第二
• 第三

引用

製作Blogger移動版

製作二維碼

©2012 Verne in Blogger, All Rights Reserved 由 Blogger 技術提供.

©2012 Google

• Google+ Followers

• Google+1按钮

• Google+ Circle me

1.自定義寬度

2.title優化