Windows Live Writer介绍及相关问题解决

今天本来想说更新一篇我的文章,更新的过程中添加了很多的内容,里面的图片太多了,导致我浏览器占用的内存不断增大,浏览器变得很卡,最后过了好久我终于更新完文章打算保存的时候居然卡住,然后所有我更新的文字和图片都丢失了,文章变得和更新前一样,我很不爽,之前从来没有遇见这种情况,可能也就是因为写文章的时候添加的文字和图片太多了,于是我就想说能不能不用浏览器编辑博客文章,而换用一个软件来操作,这样就不会那么卡顿,很快我发现了博客园推荐使用的Windows Live Writer工具,这个工具其实我之前也见过,不过之前不知道是干嘛用的,之前的windows系统好像有的是默认自带了这个工具的。

这个工具在网路上有两个版本,一个是在线安装的版本,这个版本我安装的时候会出错,安装不了,还有一个是离线安装包,可以正常安装,这个离线安装包里面包含了很多的工具,自定义安装只安装Windows Live Writer就好了。安装的过程我就不说了。

在线安装包下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=8621

离线安装包下载地址(需要代理下载):http://g.live.com/1rewlive5-all/zh-cn/wlsetup-all.exe

Windows Live Writer配置步骤:

原文:http://group.cnblogs.com/topic/8550.html

1、在菜单中选择“工具”》“帐户”,出现下面的画面:

Windows Live Writer介绍及相关问题解决

2、点击“添加按钮”,在出现的窗口中选择“其他日志服务”,如下图 :

Windows Live Writer介绍及相关问题解决

3、点击“下一步”,出现添加日志帐户的窗口,填入相应的内容,日志网址为您的博客主页地址,用户名填写您的登录用户名(不是Blog名,也不是显示名称)和密码,如下图:

Windows Live Writer介绍及相关问题解决

4、点击“下一步”,出现配置检测窗口

Windows Live Writer介绍及相关问题解决

注:如果自动配置没有成功,需要手动配置:

a) 在“Type of  weblog that you are using”中选择“Custom(Metaweblog API)”。
b) “Remote posting URL for your weblog”中输入“http://www.cnblogs.com/Blog名/services/metaweblog.aspx”。

5、检测过程中会出现“是否要发布临时日志”窗口(如下图),一般选择“No”。

Windows Live Writer介绍及相关问题解决

6、检测完毕之后,会出现下面的窗口,点击“完成”就配置成功了。

Windows Live Writer介绍及相关问题解决

【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结

原文:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html

去年就知道有这个功能,不过没去深究总结过,最近有写网络博客的欲望了,于是又重新拾起这玩意儿。

具体到底是用Windows Live Writer 2012还是用Word 2013,个人觉得看个人,因为这2个软件各有优点,各有缺点

1、首先用LiveWriter发博客显然更专业,发布后的效果也与本地最接近,但是在编辑功能上肯定大不如Word,另外一个最大缺点是它本地保存的格式不是doc。

2、而Word的优点不言而喻,我们天天用Word,用Word就能发博客这简直就是一个天大的好消息,但用Word发布的博客发布后的效果与本地相差有时候还是挺大的。

总结:个人觉得,如果你对样式不是特别纠结,能够容仍发布后的效果与你想象的效果差一点点,那就毫不犹豫的选择Word吧!

下面首先讲用Windows Live Writer 2012发博客:

一、软件准备:

最新版的是Windows Live Writer 2012,但是不提供单独的安装包,它是和微软其它软件一起的(包括MSN、Window Move Maker等),软件大小为131M,官方下载地址:http://g.live.com/1rewlive5-all/zh-cn/wlsetup-all.exe

或者自己百度“Windows Essentials 2012 简体中文离线”。

Windows Live Writer介绍及相关问题解决

二、安装:

安装很简单,如果你不想安装MSN等其它内置软件,请选择自定义安装,注意不能选择安装路径,这一点挺蛋疼的,默认装在C盘。

三、使用:

打开Windows Live Writer,第一次使用一般会让你设置博客地址以及帐号和密码,设置如下:

选择其它服务:

Windows Live Writer介绍及相关问题解决

设置博客地址及其它信息:

Windows Live Writer介绍及相关问题解决

然后会验证:

Windows Live Writer介绍及相关问题解决

然后会提示发布临时日志来下载主题,发布后会立即删除,所以一般选“是”:

Windows Live Writer介绍及相关问题解决

然后就基本OK了。

四、代码高亮插件:

博客园官方给出了2个,一个一个介绍。

1、WindowsLiveWriter.CNBlogs.CodeHighlighter.rar

这个插件生成的高亮代码与网页上的一模一样,插入后即可立即显示效果,不过貌似它必须联网才能实时显示效果,因为博客园官方说这是基于“云处理”的。安装方法很简单,将上面的压缩包解压然后复制里面的文件到:

C:\Program Files (x86)\Windows Live\Writer\Plugins,然后重启Writer即可看到:

Windows Live Writer介绍及相关问题解决

插入界面比较简单:

Windows Live Writer介绍及相关问题解决

及时效果如下:

Windows Live Writer介绍及相关问题解决

/**
* 从一段文本中检索出唯一的结果
* @param regx 正则表达式语句
* @param text 要检索的文本
* @return
*/
public String regx(String regx,String text)
{
Matcher matcher=Pattern.compile(regx).matcher(text);
if(matcher.find())
return matcher.group();
else
return null;
}

Windows Live Writer介绍及相关问题解决

2、另外一个插件叫:Windows Live Writer Source Code plugin for SyntaxHighlighter,文件名叫SourceCodePlugin_version_1.1.zip,貌似博客园官方推荐这个插件,不过个人不太喜欢,最主要是不能及时显示效果。(虽然有网友研究出了本地预览效果的方法,但个人不太喜欢,想看的戳这里:http://www.cnblogs.com/huxi/archive/2009/12/13/1623190.html

安装方法同上面一样,也是复制一个dll文件到插件目录,博客园官方教程:

http://www.cnblogs.com/cmt/archive/2009/11/27/1611900.html

界面如下:

Windows Live Writer介绍及相关问题解决

Windows Live Writer介绍及相关问题解决

及时效果如下(为了显示效果,此为编辑器的截图,可以发现不能及时高亮显示):

Windows Live Writer介绍及相关问题解决

发表后如下:

/**
* 从一段文本中检索出唯一的结果
* @param regx 正则表达式语句
* @param text 要检索的文本
* @return
*/
public String regx(String regx,String text)
{
Matcher matcher=Pattern.compile(regx).matcher(text);
if(matcher.find())
return matcher.group();
else
return null;
}

可以发现,前者代码风格与网页版的第一个“插入代码”按钮相同:

Windows Live Writer介绍及相关问题解决

而后面一个插件则与第二个类似:

Windows Live Writer介绍及相关问题解决

个人觉得在代码插入方面博客园没有CSDN做的好,虽然网页版插入代码后有一个复制的按钮:

Windows Live Writer介绍及相关问题解决

但是点击后还要我们手动按一下CTRL+C才能复制,且复制后一直是文本框的状态,不能还原成高亮代码样式了,表示这么多人用博客园,怎么就没有人反馈这一意见呢???Windows Live Writer介绍及相关问题解决

五、图片上传注意事项:

默认上传如果图片太大的话会压缩,且全部默认加上影音效果,改进方法如下:

随便插入一张图片,然后:

Windows Live Writer介绍及相关问题解决

Windows Live Writer介绍及相关问题解决

六、设置分类、标签、摘要、EntryName:

下面的数据域就是EntryName(即随笔或文章地址别名)。

Windows Live Writer介绍及相关问题解决

七、排版技巧

参见这位网页写的文章:

CnBlogs博文排版技巧

接下来再讲讲Word2013发布博客到博客园的详细方法。

一、软件准备。

Word谁都有,所以软件准备这一步几乎可省略。具体哪一个版本开始有博客发布的功能我不知道,反正我用的是Word 2013。

二、第一次使用必须的配置:

打开一篇Word文档,然后点击左上角的“文件”,依次选择“共享”-->“发布至博客”:

Windows Live Writer介绍及相关问题解决

一般会默认让你新建一个博客账户:

Windows Live Writer介绍及相关问题解决

博客文章地址为:http://www.cnblogs.com/你的博客名称/services/metablogapi.aspx

Windows Live Writer介绍及相关问题解决

图片选项一般选择“我的博客提供商”:

Windows Live Writer介绍及相关问题解决

然后Word会新开一个窗口,要发布博客必须设置一个博客标题:

Windows Live Writer介绍及相关问题解决

可以插入类别:

Windows Live Writer介绍及相关问题解决

点击“发布按钮”,在文档的最上面会提示发布是否成功的信息,如下:

Windows Live Writer介绍及相关问题解决

三、代码高亮显示:

一般你直接Eclipse或VS复制代码到Word默认就会保持高亮显示,我一般喜欢把代码插入到一个一行一列的表格中,如下:

Windows Live Writer介绍及相关问题解决

但是发布后代码行间距变宽了,郁闷!

Windows Live Writer介绍及相关问题解决

另外,Eclipse代码直接复制粘贴到Windows Live Writer是不会保持高亮显示的,所以这一点还是Word比较好。

如果想代码发布后样式更好看一点,推荐用一个Word的代码高亮显示插件,是一个国人写的,功能可能还有些欠缺,最主要的问题就是样式冲突,虽然可以通过设置“CSS定制风格”来解决,但是一旦你更换了博客的皮肤,这个代码显示就有可能不正常了。

具体使用方法参考原作者博客:

Word中使用代码高亮插件

比如我用的是coffee的主题,按照这个作者给出的设置,博客发布后成了这个样子:

Windows Live Writer介绍及相关问题解决

正常的应该是这样的:

Windows Live Writer介绍及相关问题解决

另外建议开启交替行变色功能,好看一点:

Windows Live Writer介绍及相关问题解决

插入时的样式:

Windows Live Writer介绍及相关问题解决

插入到Word后的样式:

Windows Live Writer介绍及相关问题解决

发布后的样式上面已经给出了。

好了,很简单的东西竟然洋洋洒洒写了这么久,唉,我这人就是有这样一个坏毛病:就是什么东西一旦要做了就一定要做的最好!好了,吃饭去了,饿死了!

希望能对没用过的人有一些帮助!

Live Writer 使用小贴示:发博客时始终使用图片原始尺寸

原文:http://www.cnblogs.com/cmt/archive/2011/09/26/live_writer_insert_image.html

使用 Live Writer 发布博客,在插入图片时,Live Writer 默认会使用缩略图,并且将图片加上阴影效果。缩略图会让图片显示不清楚,阴影效果则是多此一举(而且效果通常不好)。

当博文中有很多图片时,用 Live Writer 发博就是一种痛苦,一种折磨 —— 要一张张修改图片属性(你被折磨过吗?),而 Live Writer 2011 终于提供了解药。

先在 Live Writer 中插入一张图片,然后设置为原始尺寸,并去掉阴影效果,如下图:

Windows Live Writer介绍及相关问题解决

然后点击“Set to default”,从此就远离在 Live Writer 中设置图片的痛苦。下图就是见证:

Windows Live Writer介绍及相关问题解决

Windows Live Writer 下载地址:http://explore.live.com/windows-live-writer

Windows Live Writer 配置帮助:http://home.cnblogs.com/group/topic/8550.html

[功能改进]Live Writer发博支持“建分类、加标签、写摘要”

原文:http://www.cnblogs.com/cmt/archive/2012/06/25/2560793.html

以前您在园子里用Windows Live Wirter发布博文是不是有以下三个不爽:

  • 不爽1:如果想在发布随笔时新建分类并将随笔添加至该分类,需要先在博客后台添加分类,然后在Live Writer中刷新分类列表,并选择这个分类。
  • 不爽2:如果想给随笔添加标签,需要在随笔发布后,进入博客后台进行标签的添加。
  • 不爽3:如果想给发布随笔编写摘要,需要在随笔发布后,进入博客后台进行摘要的编写。

    这次功能改进就是为大家消除这三个不爽。

    如果你已经配置过Live Wirter,需要更新一下配置。点击下图中的"Update account information”按钮进行更新。

    Windows Live Writer介绍及相关问题解决

    如果您是首次使用Live Writer,可以参考这篇帮助文档进行配置。

    如何使用这些功能呢?下面分别为您介绍。

    一、建分类

    1. 点开Live Writer选择分类的下拉框。

    2. 在下拉框底部Add Category的地方输入分类名称并点击Add按钮即可。

    示例操作图片:

    Windows Live Writer介绍及相关问题解决

    二、加标签

    点击上图(“建分类”的截图)中的"View all",打开如下图的窗口,在Keywords中输入逗号分隔的标签即可。

    Windows Live Writer介绍及相关问题解决

    三、写摘要

    还是点击"View all",打开与“加标签”同样的窗口,在Excerpt中输入摘要内容即可。

    Windows Live Writer介绍及相关问题解决

    预告:接下来,我们将会为大家消除第四个不爽 —— 代码着色,会通过Live Writer插件的形式实现,让代码着色所见即所得(WYSIWYG)。(该功能已实现

    提示:如果您使用Live Writer添加图片,一定要留意这个小技巧 —— Live Writer 使用小贴示:发博客时始终使用图片原始尺寸

    对Live Writer支持的继续改进:设置随笔地址别名(EntryName)

    原文:http://www.cnblogs.com/cmt/archive/2012/06/26/live_writer_cnblogs_entryname.html

    在我们发布[功能改进]Live Writer发博支持“建分类、加标签、写摘要”之后,Artech提了一个很好的建议:希望在Live Writer发布随笔时可以设置EntryName。

    现在,我们实现了这个功能,操作方法如下:

    1. 如果之前配置过Live Writer,需要更新一下帐户配置。如下图:

    Windows Live Writer介绍及相关问题解决

    2. 在Live Writer发布随笔窗口中,在选择分类的右侧,点击"View All",出现如下的窗口:

    Windows Live Writer介绍及相关问题解决

    2. 在"Slug"中输入相应的EntryName即可。

    Windows Live Writer推荐SyntaxHighlighter代码着色插件

    原文:http://www.cnblogs.com/cmt/archive/2009/11/27/1611900.html

    博客园内置支持SyntaxHighlighter代码着色,代码着色语法:<pre class='brush:编程语言'>代码</pre>。

    需要注意的是:如何你使用SyntaxHighlighter代码着色,需要将默认编辑器改为TinyMCE。如果使用CuteEditor,CuteEditor会自动去除代码中的空格,造成代码格式破坏。

    如果您使用Windows Live Writer写博客(配置步骤),通过Windows Live Writer代码着色插件,可以方便进行SyntaxHighlighter代码着色。

    我们推荐的代码着色插件是:Windows Live Writer Source Code plugin for SyntaxHighlighter

    官方网址:http://sourcecodeplugin.codeplex.com/

    本地下载:SourceCodePlugin_version_1.1.zip

    安装方法:

    将WindowsLiveWriter.SourceCode.dll复制到Windows Live Writer plugin文件夹:
    * 32-bit systems: C:\Program Files\Windows Live\Writer\Plugins
    * 64-bit systems: C:\Program Files (x86)\Windows Live\Writer\Plugins

    使用方法:

    安装成功之后,在Live Writer会出现“Source Code”插件,如下图:

    Windows Live Writer介绍及相关问题解决

    点击该插件,粘贴需要着色的代码并选择相应的编程语言即可。

    Windows Live Writer介绍及相关问题解决

    不过这个工具安装好后打开会出现一个错误,

    Windows Live Writer介绍及相关问题解决

    解决办法就是

    Windows Live Writer介绍及相关问题解决

  • 因为这个插件不是可执行文件安装的,而是直接复制动态链接库到插件目录中的,所以没有配置文件夹,config就是配置的意思,所以我们点击option就会自动生成一个配置文件夹了。

    还有就是这个dll文件复制的时候如果是之前没有安装过插件,那么软件的安装目录里面默认是没有Plugins目录的,需要我们手动新建一个就可以了。

    发布Live Writer代码着色插件CNBlogs.CodeHighlighter

    原文:http://www.cnblogs.com/cmt/archive/2012/06/26/live_writer_cnblogs_code_highlight.html

    在解决了使用Windows Live Writer发博所遇到的“建分类、加标签、写摘要”与“设置EntryName”的四个问题之后,我们趁热打铁,解决了第五个问题 —— 代码着色的问题。

    代码着色以Live Writer插件的方式实现,采用了“云中着色”技术(呵呵,跟随当前云计算的潮流。实际只是将代码提交至服务器端处理)。

    该代码着色的特点是所见即所得,着色效果与博客后台编辑器中的一样。

    插件安装方法

    1. 下载插件

    下载地址:http://files.cnblogs.com/files/cmt/WindowsLiveWriter.CNBlogs.CodeHighlighter.zip

    2. 安装插件

    将WindowsLiveWriter.CNBlogs.CodeHighlighter.rar解压,将解压出来的文件复制到下面的位置:

    * 32-bit Windows: "C:\Program Files\Windows Live\Writer\Plugins"
    * 64-bit Windows: "C:\Program Files (x86)\Windows Live\Writer\Plugins"

    复制后运行Live Writer,打开Insert菜单,就会看到这个插件,按钮名称为“插入代码”。见下图:

    Windows Live Writer介绍及相关问题解决

    插件使用方法

    1. 点击“插入代码”按钮,出现如下的窗口:

    Windows Live Writer介绍及相关问题解决

    2. 选择对应的编程语言,并将代码复制/粘贴至该窗口,然后点击“确定”,就完成代码着色。效果见下图:

    Windows Live Writer介绍及相关问题解决

    搞定!

    注:该插件基于Windows Live Writer Source Code plugin for SyntaxHighlighter(http://sourcecodeplugin.codeplex.com/)的代码修改而成。

    为WLW开发Latex公式插件

    原文:http://www.cnblogs.com/houkai/p/3398789.html

    WLW是写博客的利器,支持离线、格式排版等,而且拥有众多的插件。博客园推荐了代码插入插件,但是没有提供WLW的公式编译插件。目前我的一般做法是:先在Word下使用MathType编辑好公式,然后将公式复制到WLW的本文中,总感觉有点麻烦。

    简单学习了WLW插件的开发,决定自己开发一个WLW代码插入插件。比较简单,按照以下步骤,大家可以开发属于自己的公式插入插件。

    首先,开发公式插入插件涉及两方面内容。一方面是公式的编辑,一般采用Latex数学排版,为了解析LaTex函数,我们需要Latex解析链接库,而Google Chart API提供了Latex的在线接口如下:http://chart.apis.google.com/chart?cht=tx&chl={latex},其中{latex}就是要生成的代码,这里使用Google API(这样开发的插件使用中就需要联网了)。另一方面是WLW中插件的开发,介绍如下:

    目前为止,Windows Live Writer的扩展功能还不是很强,它提供给我们如下两个方面对其扩展的可能:

    a.应用程序级别的API:这部分API让我们能够在外部程序中启动并调用到Windows Live Writer的功能,以COM组件的形式提供。如果你要编写一个Firefox工具条上的小按钮,例如 “Blog It!” 之类,那么显然应该使用这类API。
    b.文章内容插件:这部分API允许开发者对正在书写的文章内容进行修饰,实现与Windows Live Writer中自带的“Insert Link...”、“Insert Picture...”等类似的功能。若要编写文章内容插件,则需要从ContentSource或SmartContentSource两个基类中选择其一并继承自它。这两个基类提供了编写文章内容插件所需要的基础设施。ContentSource和SmartContentSource的区别如下:

    ContentSource:如果你需要编写的插件将要在内容中插入一段简单的,插入之后不再修改(所谓“单向插入”)的内容片断,例如一个超链接,或是自定义的一段版权信息等,那么应该选择该类型的基类。Windows Live Writer中自带的“Insert Link...”就属于这类插件。
    SmartContentSource:如果你需要编写的插件将在内容中插入一段较为复杂的,插入之后还可能要修改(所谓“双向交互”)的内容片杜阿,例如一张图片、一幅地图等,那么则应该选择这个类型的基类。Windows Live Writer中自带的“Insert Picture...”就属于这类插件。

    可见,开发公式插件时选择ContentSource就可以了。

    然后,编程实现插件的基本功能。

    1.使用Visual Studio 2010新建C# Windows窗体应用程序。

    2.设计插件的界面,界面如下:

    Windows Live Writer介绍及相关问题解决

    3.实现各按键的功能,包括粘贴、预览、插入、取消,如下:

    public partial class MainForm : Form
    {
    private static readonly string PicUrlPattern = @"http://chart.apis.google.com/chart?cht=tx&chl={0}";
    private static readonly string ImgTag = "<img src=\"{0}\" alt=\"{1}\" />";
    public MainForm()
    {
    InitializeComponent();
    } private void 粘贴_Click(object sender, EventArgs e)
    {
    string content = Clipboard.GetText();
    textBox_tex.Text = content;
    } private void 预览_Click(object sender, EventArgs e)
    {
    if (check())
    {
    pictureBox_Preview.ImageLocation = ImgUrl;
    }
    } private void 插入_Click(object sender, EventArgs e)
    {
    this.DialogResult = DialogResult.OK;
    } private void 取消_Click(object sender, EventArgs e)
    {
    this.DialogResult = DialogResult.Cancel;
    } public string ImgUrl
    {
    get { return String.Format(PicUrlPattern, HttpUtility.UrlEncode(textBox_tex.Text)); }
    } public string ImgInTag
    {
    get { return String.Format(ImgTag, ImgUrl, textBox_tex.Text); }
    } private bool check()
    {
    if (textBox_tex.Text.Trim() == "")
    {
    MessageBox.Show(this, "请填写latex");
    return false;
    }
    return true;
    }
    }

    注意:HttpUtility在System.Web库中,需要添加引用System.Web.dll,并在文件头部添加using System.Web。如果没有找到System.Web.dll,把项目属性中的目标框架修改为.NET Framework 2.0即可,推荐使用2.0,发现.net 4.0开发的插件和我的WLW版本不兼容Windows Live Writer介绍及相关问题解决

    调试程序,直至窗口可以正常运行。

    创建接口类,将上述窗口转化为WLW插件。

    a.添加对WindowsLive.Writer.Api的引用(WLW的安装目录下WindowsLive.Writer.Api.dll),并添加using WindowsLive.Writer.Api;。

    b.将项目属性中输出类型修改为类库,删除Program.cs文件。

    c.新建一个类,继承自ContentSource,并覆盖相应方法。

    [WriterPlugin("adf1e416-b2e9-44e1-8612-c405bbcf1359",
    "插入Latex",
    PublisherUrl = "http://www.cnblogs.com/houkai/",
    ImagePath = "tex.png",
    Description = "插入公式")
    ]
    [InsertableContentSource("插入公式")]
    public class LiveWriterLatexPlugin : ContentSource
    {
    public override DialogResult CreateContent(IWin32Window dialogOwner, ref string content)
    {
    using (MainForm form = new MainForm())
    {
    DialogResult result = form.ShowDialog();
    content = form.ImgInTag;
    return result;
    }
    }
    }

    注意我们为该类添加了WriterPlugin属性:

    第一个参数为一个Guid,可以通过Guid生成器得到即可,如http://www.guidgenerator.com/online-guid-generator.aspx,起标识的作用。

    第二个参数为该插件的名称,将在Windows Live Writer的插件管理器中看到。Windows Live Writer介绍及相关问题解决

    第三个参数PublisherUrl为发布者的网站地址。

    第四个参数ImagePath为插件的图标文件路径,下载或自己制作一个好看的png图片(png格式透明,比较好看),添加到项目中,修改图片的”生成操作”为“嵌入的资源”即可。

    Windows Live Writer介绍及相关问题解决

    第五个参数Description为插件的一小段描述介绍,表示插入选项中该插件的详细信息。

    该类还应用了InsertableContentSource属性,此属性本用于定义插件在WLW的“Insert”菜单和“Insert”快捷面板的名称,但新版的WLW已经去除了插入菜单与侧边栏,因此应用此属性只是为了保持向前兼容。

    注意CreateContent()方法的第二个参数为ref string newContent,这个ref string就表示由该插件生成的HTML代码。

    最后编译Release生成DLL文件,将DLL文件放到WLW安装目录的Plugins下,重启WLW即可。

    我的Latex公式插件可下载。有很多博客中介绍了WLW插件的开发,大家有兴趣可以学习插件开发的详细内容。剩下的内容就是Latex下如何进行数学公式的编辑了,下节再介绍吧。

    维护版本(由于google chart api地址修改,原插件已失效)

    最新的Latex插件可以下载

    实例:Windows Live Writer介绍及相关问题解决

    CnBlogs博文排版技巧

    原文:http://www.cnblogs.com/lyj/archive/2008/11/30/1344463.html

    最近很多博友问,你的文章如何排版的?你的代码怎么这么漂亮?你的图片怎么有阴影效果?为了满足大家需要,我特地总结一下博文排版技巧~~希望你读完这篇文章后有个全新的体验和轻松的心情写博文了~~

    在博客园博文五要素:标题、段落、代码、图片、版权。

    我的原则是HTML最简、文章最美观、内容最清晰!本篇文章适用Windows Live Writer。

    一、写作方式选择

    在线Web编辑器:博客园提供了三种在线编辑器,我想这个是给博文内容写的少的用户提哦方便的,各有优点。推荐使用TinyMCE。

    Windows Live Writer:配置好设置,详情请看这里。就可以离线专心写文章啦。推荐使用Windows Live Writer离线写博文,不会因为网络问题引起数据丢失,预览也比较方便。

    Microsoft Office Word:另一种离线方式,配置好设置也可以写文章,但是不推荐,因为存在转换HTML过程,这转换的HTML简直多的吓死人,对搜索不利,文章排版不容易控制。

    二、排版样式

    标题样式

    标题分为:标题1、标题2……使用<h1>、<h2>……表示,写作时,添加适当的标题,你的博文内容会清晰了很多哦。

    有不少博友标题使用“<p><strong>标题</strong></p>”表示,这是不好的,还是建议使用<h1>、<h2>……表示。

    当然由于旧的博皮问题,建议大家还是使用Custom之后的博皮或者是2008年的博皮比较标准,博皮列表在这里。不过有的<h1>、<h2>的CSS样式被重写了,我们需要重新定义,在博客后台(选项---Configure---通过CSS定制页面下面的文本框)定义:

    Windows Live Writer介绍及相关问题解决

    这里我给出的的样式:

    .postBody h1
    {
    margin: 15px 0;
    padding: 0;
    font-size: 135%;
    }
    .postBody h2
    {
    margin: 15px 0;
    padding: 0;
    font-size: 125%;
    }
    .postBody h3
    {
    margin: 15px 0;
    padding: 0;
    font-size: 110%;
    }
    段落样式

    段落,我们平常写的一段一段的文字就是段落了,用“<p>段落</p>”表示,段落在不同的博皮下面有的会自动首行缩进,有的没有,不过我不推荐使用“&nbsp;(空格)”来代替首行缩进。没有缩进功能也是一样美观的,相反使用“&nbsp;(空格)”HTML就变乱了很多。

    例如我这篇介绍,只用了<h2>、<h3>表示标题和<p>表示段落还有<pre>用于代码。

    其它样式

    我还定义了<img>和<strong>样式了。

    具体自定义样式请点击:http://www.cnblogs.com/lyj/customcss.aspx下载CSS。

    三、代码样式

    我们想要的代码样式,就是提供一个区域块,显示自己需要展示的代码片段,一些关键字能够高亮显示就行了。看看我所找到的代码样式,分享一下;

    Windows Live Writer介绍及相关问题解决

    博友A型:可能没有弄清怎么写博客或者不想排版博文,直接就是正文一样的代码。

    博友B型:受到博客园的熏陶,使用博客园“插入代码”功能,好好的代码弄成了啥样,高亮显示不健全还弄个灰色div包裹着,还显示了行号太不雅了。

    丁学型:Web精简专家,尽量做到HTML代码的精简(这样对搜索有利,很容易搜索到),所以他连代码都是以节约著称。

    阿一型:哎~这么浪费,好好的代码非要在线运行起来,所以弄上大大的文本框很按钮,整个页面代码都在那个文本框中。谁让阿一是负责Web前端的呢?

    老赵型:老将亲自动手,原来的代码就是手动自定义的,哪个关键字需要高亮显示,就手动定义,实在麻烦啊~~现在使用插件替换了过去的劳动力了。

    插件型:使用了Windows Live Writer的各种各样代码插件,例如:Syntax HighlighterSyntax Highlighter for Windows Live Writer,这些插件效果很不好,生成HTML吓人了,有的还有JS代码,主要原因是没有比较这些插件~~

    受害型:所有代码没有缩进,整在一排输出了,这不是他的错,他是受害者,是CuteEditor编辑器的BUG错。CuteEditor的一个BUG会过滤掉每行前面的空白,这样导致代码没有缩进,整在一排输出了,哎~换成“纯文本框”就可以了,这一点颗粒宁博爱体会最深了~~

    老李型:这是我看好的最精简、好看的代码了,打上100分。下面重点介绍

    小李型:我的,很早时候参照老李的~~

    上面生成代码的HTML大多数都是使用<div>作为外层,用&nbsp;充当空格,使用<br>来换行(照理说应该是<br/>),高亮显示方式各异,完全违背了Web标准。W3C无法通过~~

    最佳方案:

    强烈大家使用Windows Live Writer的Paste from Visual Studio插件,从这里下载,如需高亮显示代码,只要从Visual Studio或者SQL Server中复制一下,然后点击“插入from Visual Studio...”。其HTML代码就自动生成了~,唯一的缺点就是每次会在结尾加一个空链接,可能来注明版权吧。

    该插件代码使用<pre>标签,没有空格、换行HTML标签(节省一些HTML代码),提供class="code"自定义<pre>标签样式。有自动缩进功能。代码原样输出,需要高亮的关键字使用<span style="color:颜色">关键字 </span>定义了样式。是我看过定义代码样式HTML代码最少的一个插件。其它插件生成HTML代码居多,对搜索不利。

    看看Paste from Visual Studio生成的代码,点击放大:

    Windows Live Writer介绍及相关问题解决

    我们使用Windows Live Writer写博文,建议把博客园编辑器设置为“纯文本框”(后台选项---Preferences---默认编辑器或者后台左边操作快捷通道),千万不要使用CuteEditor,这个编辑器存在一些BUG,由于这个插件不是使用“&nbsp;”来缩进的,直接是空白用于缩进,编辑器存在BUG会过滤掉每行前面的空白,这样导致你的代码没有缩进,整在一排输出了,就如上面的受害型,当然还有其它BUG~~

    Windows Live Writer介绍及相关问题解决

    我们可以在博客后台(选项---Configure---通过CSS定制页面下面的文本框)定义code的CSS样式让包裹代码的边框更有风格~~提供我的样式:

    .code
    {
    background: #fbedbb;
    border: #c0c0c0 1px solid;
    padding: 5px;
    margin: 0 40px 0 20px;
    font-family: Verdana,Helvetica, "微软雅黑" , Arial, "宋体" , sans-serif;
    }

    大家可以随意修改背景颜色啊,边框样式啊,达到自己的风格。

    四、图片处理

    一篇文章图文并茂才好看,推荐我使用的一款截图小工具685KB:SPX Instant Screen Capture (截图工具) 绿色版 v6.0,可以添加注释和边框效果。我们不要定义HTML,直接在图片上加上阴影效果。

    管理图片

    我觉得CuteEditor编辑器的管理图片功能比较强大,可以*管理、上传自己的图片(这就要不时的切换编辑器了),推荐大家使用CuteEditor来上传图片,然后在Windows Live Writer中插入图片是来引用地址,不建议使用Windows Live Writer自动提交上传图片功能,这样图片地址、图片名称不容易控制,另外它还自动生成一个图片缩略图即一张图片在服务器上生成两张,这无疑浪费了博客园空间资源。

    Windows Live Writer介绍及相关问题解决

    管理图片功能(点击放大)

    Windows Live Writer介绍及相关问题解决

    我相信以后博客园会专门开发个图片管理功能的。

    插入图片

    我们插入图片,根据博皮选择,博客园博皮分两种,一种是自适应宽度的,例如InsideDotNet博皮,根据你的浏览器分辨率而自动适应。 这种的好处是:可以自适应宽度,什么分辨率都可以填满。但是,不同分辨率下浏览器效果会有变化,特别是文章排版也会发生变化 。还有一种是固定宽度的,例如ChinaHeart博皮,整体宽度一般是950px(1024×768分辨率下也能取得较好的显示效果),一般正文显示区域660px宽度,所以图片最好宽度小于550px,以便取得较好的显示效果。 固定宽度的优点是:宽度固定,什么分辨率下的显示效果都一样。从而保证你的排版能被忠实的反映出来。 缺点是:太宽的分辨率下,两边会比较空,对于分辨率比较大的用户而言有点浪费。

    我们插入图片时推荐使用alt标签定义说明,这样对搜索有利。按照博皮选择,插入适当大小的图片,如果对于图片过大可以使用height、width强制定义图片大小,然后对图片加上超链接,像这样:

    <p><a href="http://images.cnblogs.com/cnblogs_com/lyj/NHibernate/6-2.jpg"
    target="_blank">
    <img alt="成功提交代码覆盖率分析结果" height="295" width="460"
    src="http://images.cnblogs.com/cnblogs_com/lyj/NHibernate/6-2.jpg"/></a></p>

    如果你想显示图片速度快点,可以减少图片大小,利用Windows自带的画图工具无损压缩一下:只要使用画图工具打开图片,另存为就可以了,其它什么也不做,这样一个500KB可以减小到100KB的大小,这样显示速度也快点,也减少了空间,一举两得。

    五、版权

    现在转载太厉害,为自己的文章加上版权也是不错的选择,例如在图片上加上水印、为文章加上一段声明~~大家*想象吧,看看我下面的声明:

    (大家查考本页源码,为什么我加入了<br/>,就是避免了有的博皮会首行缩进,这样不对齐了)

    六、发布

    在发布前请预览你的文章,注意图片地址是否正确,是否引用网络上的图片了。

    由于Windows Live Writer对博客园的一些发布选项支持不全,我在这里强烈建议把博客园编辑器设置为“纯文本框”(后台选项---Preferences---默认编辑器或者后台左边操作快捷通道):

    Windows Live Writer介绍及相关问题解决

    然后直接把HTML复制到纯文本框里面,填写标题、个人分类、网站分类、发布选项、参与的团队、摘要内容、Tab标签等内容后就直接可以发布。

    希望这篇介绍对你有所帮助~~

    使用自定义主题让Windows Live Writer在本地预览语法高亮效果

    原文:http://www.cnblogs.com/huxi/archive/2009/12/13/1623190.html

    下面来说说我对这个软件的使用心得:

    这个软件有的时候会突然崩溃,所以建议大家写文章的时候要经常ctrl+S进行保存,不过有的时候这个软件崩溃之后重新打开会友好地提示你保存上次未来得及及时保存的内容,这一点还是很不错的

    还有一个需要注意的地方,就是如果文章内容过多,会超出博客园的文章内容长度限制。

    Windows Live Writer介绍及相关问题解决

    不过其他的网站就不一定了。

    打开这个软件有三个选项卡,一个是正常的文字编辑界面,一个是预览界面,一个是源代码编辑界面。

  • Windows Live Writer介绍及相关问题解决

    预览界面就是和你博客的发布文章之后的界面效果是一样的,不过有一些插件如上面介绍的代码高亮插件的效果可能不会及时显示出来。不过这一点还是很人性化的,

    Windows Live Writer介绍及相关问题解决

    而源代码界面就是用来编辑源代码的,比如你可以使用HTML等来插入一些标签,比如插入一段视频或者其他等等,这一点和正常的编辑界面是一个互补的效果。

    Windows Live Writer介绍及相关问题解决

    页面其他部分:

    Windows Live Writer介绍及相关问题解决

    Windows Live Writer介绍及相关问题解决

    Windows Live Writer介绍及相关问题解决

    如果点击日志主题的话编辑的页面就会变成和你博客的网页编辑页面一样,我不喜欢这种效果

    Windows Live Writer介绍及相关问题解决

    取消这个勾选就是windows live writer自己默认的编辑页面,更加方便。如下:

    Windows Live Writer介绍及相关问题解决

    还有一个问题就是最开始的时候我以为这个软件只能发布博客,不能编辑我原来博客的其他已经发布过的文章,不过我觉得应该是可以的才对,最后我发现了方法:

    点击左上角的“文件”

    点击

    Windows Live Writer介绍及相关问题解决

    Windows Live Writer介绍及相关问题解决

    第一个是草稿,你可以在这里打开你保存的草稿文件继续编辑,

    第二个是最近发布的日志,你可以继续编辑

    第三个就是查看我博客的所有其他已经发布过的文章,并且可以点击打开进行编辑更新内容。这一点是很不错的。如下,

  • Windows Live Writer介绍及相关问题解决

    不过文章如果太多就会卡一下,是正常的。

    打开“文件”,“选项”可以进行各种设置

    Windows Live Writer介绍及相关问题解决

    说一说我使用的几个插件,我百度了很多的插件,有的不感兴趣,有很多都失效了。然后我现在使用的插件只有三个。

    Windows Live Writer介绍及相关问题解决

    因为windows live writer2012默认虽然可以直接复制粘贴文本图片,不过复制后的文本的格式都是去除了的,所以第一个插件就是保留格式复制粘贴内容,很爽吧。下面是原文:http://blogs.msdn.com/b/noahc/archive/2006/11/08/insert-formatted-clipboard-plugin-for-window-live-writer.aspx

    Download: Insert Formatted Clipboard for WLW Setup

    WLW Beta2 Update: WLW Beta2 now support pasting formatted clipboard contents so I was going to pull this tool.  But for some reason this tool still produces better results (as far as I can tell).  So if you're not happy with the default paste results, this tool may help.

    Description
    Windows Live Writer介绍及相关问题解决WLW doesn't support pasting rich content from the clipboard.  Try copying something from IE or an Office product (Word, Excel, etc) and paste it into WLW, just plain text is all you get.  With this plugin, you can paste clipboard contents and keep most of that nice formatting.

    How it Works
    This plugin uses the IE DHTML Editing Control behind the scenes to parse the clipboard contents into a valid block of HTML.  MS Word is known for it's messy HTML, but this does a fine job of cleaning it up.  It uses the technique I discussed in Copy Paste HTML From MS Word: IE's DHTML Editing Control (in a .NET WinApp).  This is wrapped into a plugin using the WLW SDK.

    Windows Live Writer介绍及相关问题解决Using the Plugin
    You can use this with any app that puts HTML onto the clipboard.  This includes IE, FireFox, Word, Excel, etc.  By using this control, I can get nicely formatted C# code into my posts (see Tip: Beautifully Formatted .NET C# Code in Blog Post).  There is another Insert Code plugin for WLW, but I don't care for it.  WLW has a hard limit of 32k of HTML code, which you can rapidly hit by inserting too much formatted HTML, so be aware of this.

    When using this plugin, it doesn't include images or get a perfect rendition of the clipboard contents, but it does a pretty good job.  Try it out on this HelloWorld.doc file.  WLW doesn't always render just right in HTML view.  You'll get the most accurate rendering when the post is published and you view it in the browser.  Pressing F11 in WLW will rerender the HTML view and sometimes helps.

    Windows Live Writer Gallery
    My submission to the WLW Gallery is currently pending.  I'll update this post with the link to the tool there when it has been approved.

    然后第二个插件就是代码高亮,前面有介绍。这里就不说了。

    第三个插件是插入表格的,本来软件是自带了插入表格功能的,不过功能太单调了,我第三个插件就是插入的表格可以自定义长宽和各个单元格的颜色。

    还有一个问题,有时候在图片后面回车的时候下一行行首会有一个<li>标签,就是一个小圆点。

    Windows Live Writer介绍及相关问题解决

    很烦人,此时如果小圆点后面没有文字的话就直接多回车一次就会消失了。不过如果此时小圆点后面还有其他内容的话回车就会多一个小圆点,此时的解决方法就是先在上面空行的小圆点回车取消远点,然后再在下面小圆点的地方点击Backspace键即可。

还有一个问题就是中英文切换的问题,我默认是只有搜狗输入法,取消了微软自带的其他输入法,然后当我用这个软件写文章的时候经常会出现在英文状态下无法使用shift键切换成中文状态,只能通过点击状态栏的【英】来切换成中文状态。这一点其实让人觉得很麻烦,不过还是发现了解决的方法,就是增加微软拼音输入法。下面是原文:http://penpenguanguan.com/189.html

之前写Blog用的离线编辑器一直是Zoundry Raven(曾经名字叫Zoundry),但是它的启动速度实在是比较慢,开始对于它有点难于忍受,最近实在受不了了,于是安装了微软的Windows Live Writer,启动那叫快,但是刚开始使用还遇到了几个问题,一是tag栏居然不让输中文,我切换到搜狗输入法怎么都不行,二是找不到slug在哪里输入,于是这篇文章整理一些相关的问题。

  1. 无法输中文tag的解决:到最近的2009版也没有彻底解决这个问题。光标移到tag输入框,如果使用的如 QQ拼音、搜狗拼音,怎么也输入不了中文,如果用的微软拼音,按一下中英文切换键(一般是Shift键)就可以输入中文了,但是Live Writer还是不认为这些中文是tag(发布的时候默认没有tag会提示)。
    注:我添加了微软拼音后,搜狗拼音居然也是可以输入中文了,只是光标进入tag输入框,会自动切换到英文输入状态,按Shift就可以了。
    另:Windows Live Writer中文输入的小技巧说到一个方法:使用“Shift+空格”,就能将输入法给调出来,而不是我们经常使用的“Ctrl+空格”。
  2. slug输入的地方:“数据域”就是了
  3. 其他:6个Windows Live Writer 2009(WLW)必备插件推荐安装Windows Live Writer后需要做的五件事

Windows Live Writer相对于Zoundry Raven的优势:可以换肤、可以添加表格、支持插件是它最大的优势。下面是一些比较实用的插件资源:

  1. Windows Live Writer插件官方主页
  2. Windows Live Writer Plugins 这是一个WLW插件的网站,分类很清楚:File Sharing、Images、Tagging、Vedio…
  3. Codeplex  发布在Codeplex上,到现在只有15个不是很多,而且有点插件很令人失望,没有多大功能而且有异常,但对于爱好者来说还是值得去逛的,毕竟Codeplex还是一个很受开发者青睐的站点
  4. Writer Zone  Live Writer的官方网站,在上面可以得到关于Live Writer的最新信息,如果你感兴趣的话还可以下载Writer SDK来自己动手写写插件

以上只是一些可以找到Windows Live Writer插件的地方,你要是和我一样比较懒的话,直接搜索别人推荐的Windows Live Writer插件吧,这样来得简单省事。一下就是一些:

  1. 6 个非常实用的 Windows Live writer 插件
  2. Windows Live Writer插件,这个介绍得比较详细,值得作为参考
  3. live writer插件,介绍了几个代码格式化插件

这个软件真的很不错,编辑博客的时候不会卡顿。而且需要的话你可以添加多个账户,也就是添加多个你的博客网址来管理,来编辑你的博客。希望这些内容会对你们有所帮助。

终于完了。

上一篇:golang多进程测试代码


下一篇:豹哥嵌入式讲堂:ARM开发之文件详解(3)- project文件