发书模版常用代码

为了保持本站整体风格的统一性,方便各位书友快捷的发布排版展示,故在此说明。下面所涉及到的代码请在编辑器的文本模式下输入。

 

一、表格形式图片预览代码

代码如下:展开

  1. <table style="text-align: center; border: #fff;" border="1" width="600" cellspacing="1" cellpadding="1">
  2. <tbody>
  3. <tr>
  4. <td style="text-align: center; border: #fff;"><a href="图片链接1"><img class="aligncenter" src="图片链接1" width="190" height="340"  alt="图片说明1"/></a></td>
  5. <td style="text-align: center; border: #fff;"><a href="图片链接2"><img class="aligncenter" src="图片链接2" width="190" height="340"  alt="图片说明2"/></a></td>
  6. <td style="text-align: center; border: #fff;"><a href="图片链接3"><img class="aligncenter" src="图片链接3" width="190" height="340"  alt="图片说明3"/></a></td>
  7. </tr>
  8. </tbody>
  9. </table>

预览:

发书模版常用代码 发书模版常用代码 发书模版常用代码

请替换代码中的图片链接、图片说明等文字,如果加入更多图片请根据情况增加表格行,并调整图片宽度或者使用下面的相册模式。

二、文章中插入相册展示

代码如下:展开

  1. <div style="width: 400px; margin-left: 180px;">【img】<a href="图片链接1"><img class="aligncenter" src="图片链接1" alt="图片说明1" width="190" height="340" /></a><a href="图片链接2"><img class="aligncenter" src="图片链接2" alt="图片说明2" width="190" height="340" /></a><a href="图片链接3"><img class="aligncenter" src="图片链接3" alt="图片说明3" width="190" height="340" /></a>【/img】</div>

请替换【】为[]

演示:

在【img】和【img】标签中每个图片之间不能有空格等其他元素,否则无法识别图片。

知更鸟begin主题文章中放入哔哩哔哩视频自适应页面大小代码

将以下代码加入到style.css文件末尾,或者在主题设置-自定义风格里添加:

展开

  1. .smartideo { z-index: 0; text-aligncenterbackground#CCCline-height: 0; text-indent: 0; }
  2. .smartideo embed, .smartideo iframe { padding: 0; margin: 0; }
  3. .smartideo .player { width: 100%; height500pxoverflowhiddenpositionrelative; }
  4. .smartideo .player a.smartideo-play-link { displayblockwidth50pxheight50pxtext-decorationnoneborder: 0; positionabsoluteleft: 50%; top: 50%; margin: -25px; }
  5. .smartideo .player a.smartideo-play-link p { displaynone; }
  6. .smartideo .player .smartideo-play-button { width: 0; height: 0; border-top25px solid transparentborder-left50px solid #FFFborder-bottom25px solid transparent; }
  7. .smartideo .tips { background#f2f2f2text-aligncentermax-height32pxline-height32pxfont-size12px; }
  8. .smartideo .tips a { text-decorationnone; }
  9. @media screen and (max-width:959px){
  10.     .smartideo .player { height450px; }
  11. }
  12. @media screen and (max-width:767px){
  13.     .smartideo .player { height400px; }
  14. }
  15. @media screen and (max-width:639px){
  16.     .smartideo .player { height350px; }
  17. }
  18. @media screen and (max-width:479px){
  19.     .smartideo .player { height250px; }
  20. }

发视频代码:

展开

  1. <div class="smartideo">
  2. <div class="player"><iframe src="//player.bilibili.com/player.html?aid=53452583&amp;cid=93503857&amp;page=1" width="100%" height="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe></div>
  3. </div>

如果是其他主题,安装smartideo插件,也是一样的,将css引入主题,发帖代码一样即可。

更新:通用代码:

  1. <iframe id="spkj" src="https://player.bilibili.com/player.html?aid=视频AV号amp;page=1" width="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span> </iframe>
  2. <script type="text/javascript">
  3. document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
  4. </script>

视频代码:

  1. <figure class="wp-block-video"><video controls="" poster="https://cs.vmovier.com/Uploads/cover/2019-11-04/5dbfc186708fc_cut.jpeg@600w_400h_1e_1c.jpg" src="https://qiniu-xpc11.vmoviercdn.com/5c36aaa9e1ef7.mp4"></video></figure>
  • 发书模版常用代码已关闭评论
  • 11 次浏览
    A+