SVG排版公众号文章『视频号卡片定位和隐藏』模板代码
模板代码
<section style="background-color: #000;margin: 0 auto;"> <!-- 葡萄酒视频号内容 --> <section style="height: 0;"> <p style="font-size: 0;pointer-events: none;"> <svg data-author="懂点君：关注我，从此让你多懂点" style="display: block;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 310" ></svg> </p> <section style="width:90%;margin-left: auto;margin-right: auto;text-align: center;opacity:0;"> <mpvideosnap class="js_uneditable" data-pluginname="videosnap" data-id="export/UzFfAgtgekIEAQAAAAAA194lELVrEwAAAAstQy6ubaLX4KHWvLEZgBPEkaEAJXocJZ34zNPgMIuyR8hvaSnNR6119y1rBLN7" data-url="https://findermp.video.qq.com/251/20350/stodownload?encfilekey=XGocBFxVWK5dcyOOqpEU4yZ0ia4qlCRBBmNwYHfLdE1v1nialKO8z29sDfrW09YsFSicWVNE9pblxfjyicbSsAtXFpCc8hROb7MRzYez7pIo3ZxxkXsy8tmFyibrzgeAeDNvZI9xIuEx4s0L6qzVKrY0FSs3iaet0CCdbUnvibXPLKLeFhkia7X4MWNfMg&adaptivelytrans=0&bizid=1023&dotrans=0&hy=SZ&idx=1&m=b2f86b06849231328cdddbe6361d94f4&token=6xykWLEnztKIzBicPuvgFxkATSMhuia6WCUthfItGDv7STg0jEfPLVJ80ExDRSmruv" data-headimgurl="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-username="v2_060000231003b20faec8c4e28d1acad1cd02ef34b077c70190f5f900c8396039066e5eb8e724@finder" data-nickname="懂点君" data-desc="为什么有的葡萄酒需要卧放贮存？#葡萄酒贮存方法@张裕葡萄酒 @酒仙网董事长鸿峰 @莫堡葡萄酒" data-nonceid="9236134762867510114" data-type="video"> <div class="wxw_wechannel_card appmsg_card_context js_wechannel_video_card js_wechannel_video_context"> <div class="wxw_wechannel_card_bd"> <div class="wxw_wechannel_video_context" style="background-image:url(https://findermp.video.qq.com/251/20350/stodownload?encfilekey=XGocBFxVWK5dcyOOqpEU4yZ0ia4qlCRBBmNwYHfLdE1v1nialKO8z29sDfrW09YsFSicWVNE9pblxfjyicbSsAtXFpCc8hROb7MRzYez7pIo3ZxxkXsy8tmFyibrzgeAeDNvZI9xIuEx4s0L6qzVKrY0FSs3iaet0CCdbUnvibXPLKLeFhkia7X4MWNfMg&adaptivelytrans=0&bizid=1023&dotrans=0&hy=SZ&idx=1&m=b2f86b06849231328cdddbe6361d94f4&token=x5Y29zUxcibBiaGHtmXXicGxl6KYQLh32dEtg25OvkVd5scoKmjENBTBV5s2ia6fhPHC)"> <i class="weui-play-btn_primary"></i> </div> <div class="wxw_wechannel_profile weui-flex"> <img class="wxw_wechannel_avatar" src="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-disable-preview="1"> <strong class="wxw_wechannel_nickname">懂点君</strong></div> <div class="wxw_wechannel_desc">为什么有的葡萄酒需要卧放贮存？#葡萄酒贮存方法@张裕葡萄酒 @酒仙网董事长鸿峰 @莫堡葡萄酒</div> <!-- 不可引用时show出来即可 --></div> <div class="wxw_wechannel_card_ft weui-flex"> <i class="wxw_wechannel_logo"></i>视频号</div> </div> </mpvideosnap> </section> </section> <!-- 手机视频号内容 --> <section style="height: 0;"> <p style="font-size: 0;pointer-events: none;"> <svg data-author="懂点君：关注我，从此让你多懂点" style="display: block;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 1338" ></svg> </p> <section style="width: 90%;margin-left: auto;margin-right: auto;text-align: center;opacity: 0;"> <mpvideosnap class="js_uneditable" data-pluginname="videosnap" data-id="export/UzFfAgtgekIEAQAAAAAAOPglSl1vBgAAAAstQy6ubaLX4KHWvLEZgBPEgaEYYGhHENP5zNPgMIuyUzPW-LM1K0sxuc9YtonF" data-url="https://findermp.video.qq.com/251/20350/stodownload?encfilekey=RBfjicXSHKCOONJnTbRmmlD8cOQPXE48ibbr1Sx6EVFJ10ogeQDuNalnONvhunicAPfibkmQDJ0kibuSLAiaFGPwU7kV0Ciawia8InTwibm07xiakk1dQL506bzqTibyWCDDibl0HicwjcC7RSUz9mhCbCOttBLcLbEgtE8C8qxSy&bizid=1023&dotrans=0&hy=SH&idx=1&m=2546556c2e921301c140ee4f48e8c529&token=cztXnd9GyrHT1jF33iahtWyVHhSfGf68E66tXvoctnz4DflEYZBlJ1ZiapwNa5GDyM" data-headimgurl="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-username="v2_060000231003b20faec8c4e28d1acad1cd02ef34b077c70190f5f900c8396039066e5eb8e724@finder" data-nickname="懂点君" data-desc="手机这样充电，能延长电池寿命#手机充电#@腾讯手机管家 @小米公司 @vivo" data-nonceid="17063860744833517984" data-type="video"> <div class="wxw_wechannel_card appmsg_card_context js_wechannel_video_card js_wechannel_video_context"> <div class="wxw_wechannel_card_bd"> <div class="wxw_wechannel_video_context" style="background-image:url(https://findermp.video.qq.com/251/20350/stodownload?encfilekey=RBfjicXSHKCOONJnTbRmmlD8cOQPXE48ibbr1Sx6EVFJ10ogeQDuNalnONvhunicAPfibkmQDJ0kibuSLAiaFGPwU7kV0Ciawia8InTwibm07xiakk1dQL506bzqTibyWCDDibl0HicwjcC7RSUz9mhCbCOttBLcLbEgtE8C8qxSy&bizid=1023&dotrans=0&hy=SH&idx=1&m=2546556c2e921301c140ee4f48e8c529&token=cztXnd9GyrGhE2iaHGOXDiaMFhYeGFkNb5P2l9MN7R8gmzVl1q5JQaKBTcx4uNKib3s)"> <i class="weui-play-btn_primary"></i> </div> <div class="wxw_wechannel_profile weui-flex"> <img class="wxw_wechannel_avatar" src="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-disable-preview="1"> <strong class="wxw_wechannel_nickname">懂点君</strong></div> <div class="wxw_wechannel_desc">手机这样充电，能延长电池寿命#手机充电#@腾讯手机管家 @小米公司 @vivo</div> <!-- 不可引用时show出来即可 --></div> <div class="wxw_wechannel_card_ft weui-flex"> <i class="wxw_wechannel_logo"></i>视频号</div> </div> </mpvideosnap> </section> </section> <!-- 大长图 --> <section style="line-height: 0;font-size: 0;pointer-events: none;"> <svg data-author="懂点君：关注我，从此让你多懂点" style="display: block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size:100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRr4AxwPic4JzhlhXuZtWJ1RsFZ6G7hOXyWYGeQHJTszvjnCS8Ol0q02S1emYqibdnhjibDNWF9ETIhQ/0?wx_fmt=png);vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;pointer-events:none;" viewBox="0 0 750 2300"></svg> </section></section>
模板分析
先用一张大长图作为背景图，再把视频号卡片定位在大长图上面，最后隐藏视频号卡片；
每一个视频号卡片最外层容器的高度设置为0，目的是防止视频号卡片之间产生影响，便于各自单独定位，因此每一个视频号卡片的与顶部的距离都需要重新计算设置；
