创作立场声明:分享软件操作过程
今天和大家分享的是在typecho中加入视频和音乐。
我们先看效果。
插入的b站视频,在博客网页里只能看360p,选择其它分辨率会跳转到b站网页。
1.插入音乐
在音乐客户端那里点击“分享”,复制链接,在网页端打开
在打开的网页里选择“生成外链播放器”
默认的就是这种样子。
播放器的样式有三种可以选,同时可以选择是否自动播放。
直接复制代码,然后在typecho里撰写文章,复制粘贴就可以看到效果。
搞定
2.插入视频
视频会略微麻烦一点,也是可以这样直接复制代码粘贴过来就行,但是那样会比较难看,是一个小窗口,我想弄漂亮一点,所以需要设置一下CSS。
而我用的免费主题pinghsu是没有这个功能的(handsome主题是有的,某些主题也会有),所以需要用到一个插件CustomCssAndJs
这个插件下载之后发放到typecho根目录usr-plugins下面
CustomCssAndJs下载链接
接着在控制台-插件管理中启用。
进入这个插件的设置里,在css那里输入以下代码
/*视频挂载*/
.iframe_video {
position: relative;
width: 100%;
}
@media only screen and (max-width: 767px) {
.iframe_video {
height: 15em;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.iframe_video {
height: 20em;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.iframe_video {
height: 30em;
}
}
@media only screen and (min-width: 1200px) {
.iframe_video {
height: 40em;
}
}
.iframe_cross {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%
}
.iframe_cross iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0
}
视频的接入,在b站视频下方的分享那复制代码
再粘贴到文章里,然后在
粘贴的文本里,添加这个代码class="iframe_video"
发布之后就是一个比较漂亮的界面。
如果不设置css,直接粘贴视频的代码,效果是这样的。
以上就是本文的全部内容。
如果本文对您有参考价值,可以关注、点赞、收藏、打赏、评论来支持作者,十分感谢!
markdown一直想学习,据说用了之后很高效,尝试过几次,还要学习的东西很多。
搞博客的、写的markdown文件渲染成静态网页
可以,学习了
我也是跟着学的。
这是2个插件吗?
这个好,跟着学
hugo和hexo也挺香的