【问题标题】:Embed media content in lektor pages?在 lektor 页面中嵌入媒体内容?
【发布时间】:2016-05-01 00:12:26
【问题描述】:

我目前正在使用 Nikola 作为页面生成器。

但是根据页面范围和用户,Lektor 似乎对最终用户来说更容易和更精简。这非常适合我计划的新页面。

Nikola 还嵌入了媒体(youtube、vimeo、soundcloud 等) https://getnikola.com/handbook.html#restructuredtext-extensions

Lektor 如何提供这样的功能?

【问题讨论】:

    标签: markdown media markup nikola lektor


    【解决方案1】:

    answer of @A. Jesse 是对的。由于Lektor 的核心保持简单,很像Flask,自动嵌入不是由“核心”完成的。

    但是,本着Flask 的精神,Lektor 具有高度可扩展性。这也适用于解析帖子中的MarkDown 格式化文本并呈现最终的 HTML。

    正如他已经说过的,您可以直接将 HTML 中的可嵌入代码粘贴到其他 MarkDown 文本中。而且,它会按原样包含在最终的 HTML 中。

    但是,我个人认为这损害了 MarkDown 的简单性和快速可读性的核心意图。

    易读易写的纯文本格式

    这就是为什么我觉得有必要使用 lektor-embed-x,作者只会在单独的段落中写下内容的链接。这个小插件将在可能的范围内完成其余的工作。它基本上是embedXLektor 之间的胶水库。

    • 如果内容是一个比较“流行”的网站,并且链接格式没问题,则会生成相关的必要嵌入代码并包含在最终的 HTML 中。
    • 否则,该链接将生成常规链接,即 <a href=... 链接。

    用法很简单。

    步骤 1 通过以下方式添加插件: $ cd path/to/lektor/project_folder $ lektor plugins add lektor-embed-x Package lektor-embed-x (0.1.2) was added to the project

    就是这样。你准备好了。 【截至目前,暂无新增配置】

    现在,在帖子中,您可以在MarkDown 格式的帖子中将链接添加到其自己段落的段落中,无需任何特殊标记或开始标志。

    contents.lr

    title: About this Website
    ---
    body:
    
    This is a website that was made with the Lektor quickstart.
    
    And it does not contain a lot of information.
    
    
    # **HEADING 1**
    
    ## 2nd head
    
    _italic slated text_
    
    ~~mess~~
    
    whatever text i need to write.
    
    https://twitter.com/codinghorror/status/686254714938200064
    
    Below is how I can embed in a post.
    
    http://www.youtube.com/watch?v=_lOT2p_FCvA
    
    
    So, that was what i wanted to say.
    

    通过Lektor生成最终的HTML后,上面的帖子会生成类似:

    注意

    请注意,这是一个非常新生的单人项目,正在积极开发中,刚刚结束了 pre-alpha 阶段。因此,提供者或链接格式并不多。然而。但是,我希望它会在短时间内成熟。

    【讨论】:

      【解决方案2】:

      它尚未在 Lektor 中提供。通常使用 Lektor,您可以在 Markdown 中编写内容。您可以简单地将 HTML 嵌入代码(来自 YouTube 或任何服务)直接粘贴到您的 Markdown 中。但是有一个刚刚发布的名为lektor-embed-x 的插件可以满足您的需求。

      【讨论】:

      • 嘿@DaCoEx 还有什么我可以帮助你的吗,或者你会接受这个答案是正确的吗?
      【解决方案3】:

      如果您可以使用流,您当然也可以为您的媒体定义流块。这也允许通过管理员中显示的选项进行更多控制。例如,一个非常简单(无功能)的 youtube 流块可能如下所示:

      flowblocks/youtube.ini:

      [block]
      name = Youtube
      button_label = Youtube Video
      
      [fields.ytid]
      label = Video ID
      type = string
      width = 1/2
      

      模板/块/youtube.html:

      <iframe width="560" height="315" src="https://www.youtube.com/embed/{{this.ytid}}" frameborder="0" allowfullscreen></iframe>
      

      这定义了一个名为“Youtube Video”的新块类型,内部名称为“youtube”。用户必须输入 youtube 视频 ID(视频网址中 ?v= 之后的字母/数字),然后通过 this.ytid 参考在模板中使用。

      使用这种技术,还可以添加更多选项。下面是一个几乎功能齐全的示例。

      flowblocks/youtube.ini:

      [block]
      name = Youtube
      button_label = Youtube Video
      
      
      [fields.ytid]
      label = Video ID
      type = string
      width = 1/2
      
      [fields.size]
      label = Video size
      type = select
      choices = 560x315, 640x360, 853x480, 1280x720
      choice_labels = 560 x 315, 640 x 360, 853 x 480, 1280 x 720
      default = 560x315
      width = 1/2
      
      [fields.rel]
      label = Show suggested videos when the video finishes
      type = boolean
      default = true
      width = 1/4
      
      [fields.controls]
      label = Show player controls
      type = boolean
      default = true
      width = 1/4
      
      [fields.showinfo]
      label = Show video title and player actions
      type = boolean
      default = true
      width = 1/4
      
      [fields.nocookie]
      label = Enable privacy-enhanced mode
      type = boolean
      width = 1/4
      

      模板/块/youtube.html:

      <iframe width="{{ this.size.split("x")[0] }}" height="{{ this.size.split("x")[1] }}" src="https://www.youtube{{ "-nocookie" if this.nocookie }}.com/embed/{{this.ytid}}?{{ "rel=0&" if not this.rel}}{{ "controls=0&" if not this.controls }}{{ "showinfo=0" if not this.showinfo }}" frameborder="0" allowfullscreen></iframe>
      

      在管理员中编辑时,这将如下所示:

      也许可以使用一些智能正则表达式来允许用户粘贴完整的 youtube 网址,这样他们就不需要手动提取视频 ID。但我还没有尝试过。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-06-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多