ruby 如何在jekyll markdown博客中包含视频

doinxwow  于 2022-11-04  发布在  Ruby
关注(0)|答案(7)|浏览(220)

我刚开始用jekyll写博客。我用markdown写我的帖子。现在,我想在我的帖子里包含一个youtube视频。我该怎么做呢?
另外,我不太喜欢jekyll默认提供的pygments高亮显示。有没有什么方法可以让我把它改成其他的样式?如果有的话,你能给我介绍一些不错的样式/插件吗?

pnwntuvh

pnwntuvh1#

你应该能够把HTML直接嵌入到你的markdown中。在视频下面,有一个“分享”按钮,点击这个,然后点击“嵌入”按钮,它应该会给予你一个看起来有点像:

<iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

只要复制并粘贴到你的帖子中,Markdown预处理程序不会碰它。
对于Pygments,this repository中有一大堆用于各种颜色主题的CSS样式表,您可以尝试使用它们。(请注意,您必须将.codehilite替换为.highlight,这些样式表才能在Jekyll中使用。)

jm81lzqq

jm81lzqq2#

我做了类似的事情,但在我的情况下,简单的复制和粘贴不起作用。错误信息如下:
REXML无法解析此XML/HTML:
为了避免这个错误,我删除了allowfullscreen从复制的源代码如下:

<iframe width="480" height="360" src="http://www.youtube.com/embed/WO82PoAczTc" frameborder="0"> </iframe>

在结束字符</iframe>之前添加一个空格是很重要的。
然后,我成功地将视频嵌入到我的网站。

um6iljoc

um6iljoc3#

插入youtube视频的html代码可以在Jekyll中使用https://gist.github.com/1805814中描述的一个简单插件生成。
语法变得非常简单:

{% youtube oHg5SJYRHA0 %}
i86rm4rw

i86rm4rw4#

在我的例子中,jQuery已经解决了这个问题:

jQuery查询器

$('.x-frame.video').each(function() {
  $(this).after("<iframe class=\"video\" src=\"" + ($(this).attr('data-video')) + "\" frameborder=\"0\"></iframe>");
});

用法

<div class="x-frame video" data-video="http://player.vimeo.com/video/52302939"> </div>

请注意,<div> </div>之间需要有空格

kmbjn2e3

kmbjn2e35#

WordPres的一个更好的特性是,你可以只在内容中粘贴一个Youtube URL(在新的一行上),然后WordPress将其转换为嵌入代码。
下面的代码对Jekyll做了同样的事情。只要把这段代码放在页脚中(或者使用Jekyll include),所有只包含Youtube URL的段落都会被Vanilla JS自动转换为响应性的Youtube嵌入。

<style>
.videoWrapper {position: relative; padding-bottom: 56.333%; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}    
</style>

<script>
function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}
function yt_url2embed() {
    var p = document.getElementsByTagName('p');
    for(var i = 0; i < p.length; i++) {
        var pattern = /^((http|https|ftp):\/\/)/;
        if(pattern.test(p[i].innerHTML)) {
            var myId = getId(p[i].innerHTML);
            p[i].innerHTML = '<div class="videoWrapper"><iframe width="720" height="420" src="https://www.youtube.com/embed/' + myId + '?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>';
        }
    }
}
yt_url2embed();
</script>

虽然仅仅将HTML代码添加到Markdown是一个非常好(甚至更好)和有效的解决方案,但这个解决方案可能更用户友好。
Source)(英文)

6rvt4ljy

6rvt4ljy6#

您经常在Google上搜索“如何在减价中嵌入视频?
虽然在markdown中嵌入视频是不可能的,但最好也是最简单的方法是从视频中提取一个帧。为了更容易地将视频添加到markdown文件中,我想下面的jekyll插件会帮助你,它会自动解析图像块中的视频链接。
jekyll-spuberate-🚀一个为table,mathjax,plantuml,emoji,youtube,vimeo,dailymotion等提供强大支持的Jekyll插件。
https://github.com/jeffreytse/jekyll-spaceship
现在,提供了这些视频链接解析:

  • Youtube视频
  • 维梅奥
  • 每日动态
  • ...

有两种方法可以在您的Jekyll博客页面中嵌入视频:
内嵌样式:

![]({video-link})

参考样式:

![][{reference}]

[{reference}]: {video-link}

然后,您成功地将视频嵌入到您的站点中。

n7taea2i

n7taea2i7#

在时下:

<iframe width="840" height="473" src="https://www.youtube.com/embed/IQf-vtIC-Uc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

或者
右键单击浏览器中的视频并复制过去的嵌入代码。

相关问题