2021年2月

春节马上到了,给博客加一个灯笼吧。牛年吉祥,万事顺利!

进入主题外观设置,放入以下代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.1/dl.css">
<div class="dengl">
        <div class="d-box">
        <div class="d1">
        <span></span>
        <span><p></p></span>
        <ul><li></li><li></li><li><span></span></li><li></li><li></li></ul>
        </div>
        <div class="d2">
            <span></span>
            <span><p></p></span>
            <ul><li></li><li></li><li><span></span></li><li></li><li></li></ul></div>
</div>
<div class="d-box1">
        <div class="d1">
        <span></span>
        <span><p></p></span>
        <ul><li></li><li></li><li><span></span></li><li></li><li></li></ul>
        </div>
        <div class="d2">
            <span></span>
            <span><p></p></span>
            <ul><li></li><li></li><li><span></span></li><li></li><li></li></ul></div>
</div></div>

保存,就可以了,手机端自适应,默认只显示一个灯笼!

项目地址:https://github.com/Rr210/Lantern

本来没插入音乐和视频的习惯,今天测试主题,网上找了下,不使用插件的话大概以下两种方法。

一、html5解析

1、插入音频

<audio width="100%" height="auto" src="音频地址" controls="controls"></audio>

2、插入音频

<video width="100%" height="auto" src="视频地址" preload="none" controls="controls"></video>

二、iframe插入

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=200 src="音乐或视频地址"></iframe>

有些网站分享的视频可以使用参数控制,比如哔哩哔哩。

:-:|:-:
key|说明
as_wide|是否宽屏 1: 宽屏, 0: 小屏
high_quality|是否高清 1: 高清, 0: 最低视频质量(默认);如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p,high_quality=1 是最高1080p
danmaku|是否开启弹幕 1: 开启(默认), 0: 关闭

同时,可以将frame 的 sandbox 属性禁止,然后阻止跳转到B站。

sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”

比如:下面我的需求是,默认最高清 不自动开启弹幕 且阻止跳转B站。

所以我的iframe应该这样写

<iframe src="//player.bilibili.com/player.html?aid=90659474&bvid=BV1D7411w7hf&cid=154821216&page=1as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"> </iframe>

参考文章:https://www.zrhxiaohao.com/archives/51.html