前段时间，微信公众号后台再次迎来了一次更新：插入公众号。根据官方的解释，可以在推文内展示公众号名片，用户通过在推文内点击公众号名片即可跳转至对用的公众号主页。

功能是个好功能，比起以往的引导用户点击左上角蓝色字体、右上角分享按钮再点击公众号名称卡片和长按识别二维码，插入公众号卡片可以帮助用户更便捷的关注当前阅读的公众号。

但是官方的卡片样式是一个固定的样式，尤其是在个“一图流”推文流行的节点，一篇长图推文风格各异，如果在中间插入一个微信原生的公众号卡片，真的很影响整体图文排版的美观性了。

那么有什么办法可以解决呢？方法自然有，那就是：自定义图片跳转微信公众号。

具体操作方法只需要两步：

1、提取公众号名片HTML代码；

2、自定义图片跳转公众号。

如何提取微信公众号HTML代码?

首先，我们打开微信公众号后台新建一篇空白文章，并在编辑器插入需要提取的公众号卡片，如下图所示：

接着我们将后台编辑器切换为源代码模式，这里我使用的壹伴插件直接切换（即上图中的“html”标志）。这样我们可以得到下面的这样一个界面。

如果你没有安装壹伴插件，通过浏览器空白处右键“检查”打开浏览器开发工具(PC端按F12可快捷打开该模式，macOS下快捷键为：⌥+⌘+i)，在元素下也可以查看插入公众号卡片的代码内容。

接下来从“ <mpprofile class”开始复制，到“class="wx_profile_msg_inner js_msg_text">该公众号已被封禁</section></section></section></mpprofile>”结束，该部分就是我们要提取的公众号名片代码。完整的代码示例如下：

 <mpprofile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data- id="MzU0MTEwMTQxOQ==" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/j3zXiaF7xOC2tDnVv6be 5l50Jr2ibFUFOeXSaZxo0G4g4UuAuaKyLSxAicD6bicqTayb55aSPhgq cSTrsUsTBE2b3g/0?wx_fmt=png"
        data-nickname="二歪同学" data- alias="erwai20" data-signature="只讲人话，话歪理不歪！" data -from="0" contenteditable="false">
        <section class="appmsg_card_context wx_profile_card js_card">
            <section class="wx_profile_card_inner">
                <section class="wx_profile_card_bd">
                    <section class="wx_profile weui-flex">
                        <section class="wx_profile_hd"> <img class="wx_profile_avatar" src="https://mmbiz.qlogo.cn/mmbiz_png/j3zXiaF7xOC2tDnVv6be5l50Jr2ibFUFOeXSaZxo0G4g4UuAuaKyLSxAicD 6bicqTayb55aSPhgqcSTrsUsTBE2b3g/0?wx_fmt=png" alt="二歪同学" data-type="png" data-ratio="1" data-w="272"></section>
                        <section class="wx_profile_bd weui-flex__item"> <strong class="wx_profile_nickname">二歪同学</strong>
                            <section class="wx_profile_desc">只讲人话，话歪理不歪！</section>
                            <!--<section class="wx_profile_tips" id="js_profile_desc"> <span class="wx_profile_tips_meta" id="js_profile_article">篇原创内容</span><span class="wx_profile_tips_meta" id="js_profile_friends"> </span></section>-->
                        </section>
                        <section class="wx_profile_ft"> <i class="weui-icon-arrow"></i> </section>
                    </section>
                </section>
                <section class="wx_profile_card_ft weui-flex">公众号</section>
            </section>
            <section class="wx_profile_msg js_msg_container" style="display: none;">
                <section class="wx_profile_msg_inner js_msg_text">该公众号已被封禁</section>
            </section>
        </section>
    </mpprofile>

自定义跳转图片

接下来我们要做的就是将你要定义跳转的图片上传至微信公众号后台或编辑器，并获取该图片的链接地址。根据提示在下方代码中插入你提取的公众号卡片HTML代码和要自定义跳转的图片地址。

 <section mark-selection="">
        <section style="margin: 0px;padding: 0px;line-height: 0;font-size:0;transform:scale(1);pointer-events:painted;overflow:hidden;">
            <section style="display: block;height: 0px;vertical-align: top;font-size: 0px;transform:scale(60);margin-top:-28px;">
                <section class="mp_profile_iframe_wrp">
                    <section class="js_uneditable custom_select_card mp_profile_iframe">
                        //在此插入提取公众号卡片代码，替换本段话即可。 </section>
                </section>
            </section>
            <section style="margin: 0px;padding: 0px;line-height: 0;font-size:0;transform:scale(1);pointer-events:none;opacity:1;">
                <svg style="box-sizing:border-box;pointer-events: none;display: inline-block;width: 100%;vertical-align: top;background-size: 
           cover;background-repeat: no-repeat;background-image: url(&quot; /*在此插入自定义跳转图片地址并替换本本段话*/&quot;);-webkit-tap-highlight-color: transparent;user-select: none;" viewbox="0 0 345
146.81666666666666">
                </svg>
            </section>
        </section>
    </section>
    </section>
    </section>

至此，将最终的代码通过代码模式复制微信后台，切换回普通模式，便完成了点击自定义图片跳转微信公众号的操作，我们在制作长图排版的的时候，可以将某一部分裁剪下来自定义点击跳转微信公众号界面，即能保证整篇推送的完整性，也能实现同样的跳转功能。

最后说几句题外话，上述的获取公众号卡片HTML代码某编辑器有傻瓜式的提取方式，并支持自定义图片操作，但是这样一个功能需要30元，我认为大可不必吧，喝杯奶茶不香吗？?