2017-10-08 10 views
1

私は、erbを使用して仲介人と共にレンダリングしたいyamlで書かれたファイルを持っています。これをレンダリングしてyamlファイルをHTMLに変換します。後でCSSを使用してスタイルを設定したいと思います。私はどのようにこの基本的な仕事をどこでオンラインで行うのかについての情報は見つけていません。私はYAMLからのデータにアクセスするに厳密にこの回答を制限しますerbで仲介者でレンダリングするYAMLファイルを取得する方法

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.' 

は、私は、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> 
+0

:あなたのファイルを想定し

mydata.yamlを命名して、仲介アプリの/dataフォルダに配置され、以下のコードは、あなたが探しているループのネストされたデータを生成していきますあなたがテーブルをどのように見たいかについて、より詳細な情報を与えることができます。それはセルの数の点で固定幅または高さを持っていますか?列と行は何を表しますか? –

答えて

0

にこのような何かをレンダリングしたいと思います。たとえば

は、私はYAMLファイルを持っていると言いますファイル。これにより、後に続くデータ出力が得られ、そこからスタイルを設定する方法を決めることができます。あなたがあれば、それが参考になると思い

<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 %> 
関連する問題