博客园后台发布文章的两个小技巧

1 概述

第一个是发表文章后自动生成文章目录索引，第二个是批量上传图片到博客园服务器。

建议使用markdown 文件来编写博客文章。

2 详情

2.1 自动生成文章目录索引

在博客园后台管理页面选择“设置”，找到页首HTML代码，复制自动生成目录的js代码，保存即可。

js代码如下：

<script language="javascript" type="text/javascript">
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h1_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h1_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" style="color:#152e97;">';
        content += '<p style="font-size:18px;"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h1_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h1_list[i]).before(go_to_top);
            
            var h2_list = $(h1_list[i]).nextAll("h2");
            var li2_content = '';
            for(var j=0; j<h2_list.length; j++)
            {
                var tmp = $(h2_list[j]).prevAll('h1').first();
                if(!tmp.is(h1_list[i]))
                    break;
                var li2_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h2_list[j]).before(li2_anchor);
                li2_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h2_list[j]).text() + '</a></li>';
            }
            
            var li1_content = '';
            if(li2_content.length > 0)
                li1_content = '<li><a href="#_label' + i + '">' + $(h1_list[i]).text() + '</a><ul>' + li2_content + '</ul></li>';
            else
                li1_content = '<li><a href="#_label' + i + '">' + $(h1_list[i]).text() + '</a></li>';
            content += li1_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   
}

GenerateContentList();
</script>

2.2 批量上传图片

使用 dotnet-cnblog 将本地 markdown 文件中图片批量上传到博客园服务器，并可将markdown原文中的图片链接自动替换为上传到博客园服务器后的图片链接，极大的便利了博文的编辑预发布。此工具解决的痛点是在本地编辑的 Markdown 文件里包含的图片，在博客园发布时，需要手动一张张的复制到博客园的编辑器中上传，十分麻烦，利用此工具可以批量上传图片。

2.2.1 安装配置

下载地址： https://github.com/stulzq/dotnet-cnblogs-tool/releases

第一次运行需要配置博客ID，账号、Token 等，按照提示输入即可。

Token 申请：https://i.cnblogs.com/settings

使用dotnet-cnblog reset命令可以重置配置。

对Markdown文件里的图片进行解析，上传到博客园，并且转换内容保存到新的文件中。处理过的内容保存在 Markdown 原始文件名-cnblog.md 中，复制粘贴到博客园的编辑器发布即可。

dotnet-cnblog proc -f <markdown文件路径>

2.2.2 添加到右键菜单

做一个【右键】->【发送到】功能，以减免每次转换都需要繁琐的输入一长串代码的痛苦。

在资源管理器的地址栏输入以下路径跳转到【SendTo】文件夹：

%AppData%\Microsoft\Windows\SendTo

在【SendTo】文件夹下新建一个txt文件，文件名就是以后右键菜单里的功能名。后缀改为【.bat】

【右键】->【编辑】新建的这个bat文件，将以下代码复制粘贴过去即可，E:\dotnet-cnblog-v1.4.1-win-x64是自己本机存放的路径，根据实际进行修改。

E:\dotnet-cnblog-v1.4.1-win-x64\dotnet-cnblog.exe proc -f %1
pause

%1表示拖到批处理文件上的文件名及路径。pause是让bat文件执行后保留窗口，按任意键继续。