码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2016-02-14 21:01:13      阅读:1115      评论:0      收藏:0      [点我收藏+]

标签:

        今天本来想说更新一篇我的文章,更新的过程中添加了很多的内容,里面的图片太多了,导致我浏览器占用的内存不断增大,浏览器变得很卡,最后过了好久我终于更新完文章打算保存的时候居然卡住,然后所有我更新的文字和图片都丢失了,文章变得和更新钱一样,我很不爽,之前从来没有遇见这种情况,可能也就是因为写文章的时候添加的文字和图片太多了,于是我就想说能不能不用浏览器编辑博客文章,而换用一个软件来操作,这样就不会那么卡顿,很快我发现了博客园推荐使用的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、在菜单中选择“工具”》“帐户”,出现下面的画面:

技术分享

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

技术分享

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

技术分享

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

技术分享

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

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”。

技术分享

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

技术分享

【超详细教程】使用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 简体中文离线”。

技术分享

二、安装:

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

三、使用:

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

选择其它服务:

技术分享

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

技术分享

然后会验证:

技术分享

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

技术分享

然后就基本OK了。

四、代码高亮插件:

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

1、WindowsLiveWriter.CNBlogs.CodeHighlighter.rar

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

C:\Program Files (x86)\Windows Live\Writer\Plugins,然后重启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;
    }

技术分享

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

界面如下:

技术分享

技术分享

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

技术分享

发表后如下:

/**
 * 从一段文本中检索出唯一的结果
 * @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;
}

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

技术分享

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

技术分享

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

技术分享

但是点击后还要我们手动按一下CTRL+C才能复制,且复制后一直是文本框的状态,不能还原成高亮代码样式了,表示这么多人用博客园,怎么就没有人反馈这一意见呢???技术分享

五、图片上传注意事项:

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

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

技术分享

技术分享

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

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

技术分享

七、排版技巧

参见这位网页写的文章:

CnBlogs博文排版技巧

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

一、软件准备。

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

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

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

技术分享

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

技术分享

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

技术分享

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

技术分享

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

技术分享

可以插入类别:

技术分享

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

技术分享

三、代码高亮显示:

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

技术分享

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

技术分享

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

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

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

Word中使用代码高亮插件

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

技术分享

正常的应该是这样的:

技术分享

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

技术分享

插入时的样式:

技术分享

插入到Word后的样式:

技术分享

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

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

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

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 中插入一张图片,然后设置为原始尺寸,并去掉阴影效果,如下图:

技术分享

然后点击“Set to default”,从此就远离在 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”按钮进行更新。

    技术分享

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

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

    一、建分类

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

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

    示例操作图片:

    技术分享

    二、加标签

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

    技术分享

    三、写摘要

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

    技术分享

    预告:接下来,我们将会为大家消除第四个不爽 —— 代码着色,会通过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,需要更新一下帐户配置。如下图:

    技术分享

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

    技术分享

    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”插件,如下图:

    技术分享

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

    技术分享

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

    技术分享

    解决办法就是

    技术分享

    发布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菜单,就会看到这个插件,按钮名称为“插入代码”。见下图:

    技术分享

    插件使用方法

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

    技术分享

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

    技术分享

    搞定!

    注:该插件基于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.设计插件的界面,界面如下:

    技术分享

    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版本不兼容技术分享

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

    创建接口类,将上述窗口转化为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的插件管理器中看到。技术分享

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

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

    技术分享

    第五个参数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插件可以下载

    实例:技术分享

    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定制页面下面的文本框)定义:

    技术分享

    这里我给出的的样式:

    .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。

    三、代码样式

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

    技术分享

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

    技术分享

    我们可以在博客后台(选项---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自动提交上传图片功能,这样图片地址、图片名称不容易控制,另外它还自动生成一个图片缩略图即一张图片在服务器上生成两张,这无疑浪费了博客园空间资源。

    技术分享

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

    技术分享

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

    插入图片

    我们插入图片,根据博皮选择,博客园博皮分两种,一种是自适应宽度的,例如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---默认编辑器或者后台左边操作快捷通道):

    技术分享

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

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

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

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

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

    标签:

    原文地址:http://www.cnblogs.com/shenjieblog/p/5189511.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!