SVG排版公眾號(hào)文章『視頻號(hào)卡片定位和隱藏』模板代碼
模板代碼
<section style="background-color: #000;margin: 0 auto;"> ? ?<!-- 葡萄酒視頻號(hào)內(nèi)容 --> ? ?<section style="height: 0;"> ? ? ? ?<p style="font-size: 0;pointer-events: none;"> ? ? ? ? ? ?<svg data-author="懂點(diǎn)君：關(guān)注我，從此讓你多懂點(diǎn)" 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="懂點(diǎn)君" data-desc="為什么有的葡萄酒需要臥放貯存？#葡萄酒貯存方法@張?jiān)Ｆ咸丫?@酒仙網(wǎng)董事長(zhǎng)鴻峰 @莫堡葡萄酒" 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">懂點(diǎn)君</strong></div> ? ? ? ? ? ? ? ? ? ? ? ?<div class="wxw_wechannel_desc">為什么有的葡萄酒需要臥放貯存？#葡萄酒貯存方法@張?jiān)Ｆ咸丫?@酒仙網(wǎng)董事長(zhǎng)鴻峰 @莫堡葡萄酒</div> ? ? ? ? ? ? ? ? ? ? ? ?<!-- 不可引用時(shí)show出來(lái)即可 --></div> ? ? ? ? ? ? ? ? ? ?<div class="wxw_wechannel_card_ft weui-flex"> ? ? ? ? ? ? ? ? ? ? ? ?<i class="wxw_wechannel_logo"></i>視頻號(hào)</div> ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ?</mpvideosnap> ? ? ? ?</section> ? ? ? ? ? ?</section> ? ?<!-- 手機(jī)視頻號(hào)內(nèi)容 --> ? ?<section style="height: 0;"> ? ? ? ?<p style="font-size: 0;pointer-events: none;"> ? ? ? ? ? ?<svg data-author="懂點(diǎn)君：關(guān)注我，從此讓你多懂點(diǎn)" 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="懂點(diǎn)君" data-desc="手機(jī)這樣充電，能延長(zhǎng)電池壽命#手機(jī)充電#@騰訊手機(jī)管家?@小米公司?@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">懂點(diǎn)君</strong></div> ? ? ? ? ? ? ? ? ? ? ? ?<div class="wxw_wechannel_desc">手機(jī)這樣充電，能延長(zhǎng)電池壽命#手機(jī)充電#@騰訊手機(jī)管家?@小米公司?@vivo</div> ? ? ? ? ? ? ? ? ? ? ? ?<!-- 不可引用時(shí)show出來(lái)即可 --></div> ? ? ? ? ? ? ? ? ? ?<div class="wxw_wechannel_card_ft weui-flex"> ? ? ? ? ? ? ? ? ? ? ? ?<i class="wxw_wechannel_logo"></i>視頻號(hào)</div> ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ?</mpvideosnap> ? ? ? ?</section> ? ? ? ? ? ?</section> ? ?<!-- 大長(zhǎng)圖 --> ? ?<section style="line-height: 0;font-size: 0;pointer-events: none;"> ? ? ? ?<svg data-author="懂點(diǎn)君：關(guān)注我，從此讓你多懂點(diǎn)" 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>
模板分析
先用一張大長(zhǎng)圖作為背景圖，再把視頻號(hào)卡片定位在大長(zhǎng)圖上面，最后隱藏視頻號(hào)卡片；
每一個(gè)視頻號(hào)卡片最外層容器的高度設(shè)置為0，目的是防止視頻號(hào)卡片之間產(chǎn)生影響，便于各自單獨(dú)定位，因此每一個(gè)視頻號(hào)卡片的與頂部的距離都需要重新計(jì)算設(shè)置；
