How to get YAML files to render in middleman with

2019-04-15 16:56发布

站内问答 / Ruby
1016 1 5

I have a file written in yaml that I would like to render with middleman using erb. How do I render this so that the yaml file will be translated to HTML. I would later like to style it using CSS. I have found no information of how to do this basic task online anywhere.

For example say I have the yaml file:

main_title: 'Ruby Operators'

sections:
  - section_title: 'Arithmetic'
    items:
      - title: '[ + ] Addition: '
        value: 'Adds values on either side of the operator'
      - title: '[ − ] Subtraction: '
        value: 'Subtracts right hand operand from left hand operand'
      - title: '[ * ] Multiplication: '
        value: 'Multiplies values on either side of the operator.'

  - section_title: 'Comparison'
    items:
      - title: '[ == ]'
        value: 'Checks if the value of two operands are equal or not, if yes then condition becomes true.'
      - title: '[ != ]'
        value: 'Checks if the value of two operands are equal or not, if values are not equal then condition becomes true.'

I would like to render something like this in html

<!DOCTYPE html>
<html>

<head>
    <title>Beautifyconverter.com Yaml To HTML Converter</title>
</head>

<body>
    <table>
        <tr>
            <td>main_title</td>
            <td>sections.0.section_title</td>
            <td>sections.0.items.0.title</td>
            <td>sections.0.items.0.value</td>
            <td>sections.0.items.1.title</td>
            <td>sections.0.items.1.value</td>
            <td>sections.0.items.2.title</td>
            <td>sections.0.items.2.value</td>
            <td>sections.1.section_title</td>
            <td>sections.1.items.0.title</td>
            <td>sections.1.items.0.value</td>
            <td>sections.1.items.1.title</td>
            <td>sections.1.items.1.value</td>
        </tr>
        <tr>
            <td>Ruby Operators</td>
            <td>Arithmetic</td>
            <td>[ + ] Addition: </td>
            <td>Adds values on either side of the operator</td>
            <td>[ − ] Subtraction: </td>
            <td>Subtracts right hand operand from left hand operand</td>
            <td>[ * ] Multiplication: </td>
            <td>Multiplies values on either side of the operator.</td>
            <td>Comparison</td>
            <td>[ == ]</td>
            <td>"Checks if the value of two operands are equal or not</td>
            <td> if yes then condition becomes true."</td>
            <td>[ != ]</td>
            <td>"Checks if the value of two operands are equal or not</td>
            <td> if values are not equal then condition becomes true."</td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
</body>

</html>

1条回答
一纸荒年 Trace。
2楼-- · 2019-04-15 17:37

I'll limit this answer strictly to accessing data from the YAML file. This will get you the data output you are after, and you can decide how to style it from there.

Assuming your file is named mydata.yaml and located in the /data folder of your Middleman app, the following code will work to generate the nested data loops you are looking for:

<h1><%= data.mydata.main_title %></h1>

<% data.mydata.sections.each do |section| %>
    <h2><%= section.section_title %><h2>
    <% section.items.each do |item| %>
        <h3><%= item.title %></h3>
        <h4><%= item.value %></h4>
    <% end %>
<% end %>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)