Hugo

Move data from config.toml to .yml

Hello guys, please help!

I’m trying to move data from config.toml to desktop.yml - and can’t do it.

Initial .html that picks values from config.toml:

{{ with .Site.Params.feature_list }}
<section class="feature-list section">
  <div class="container">
      <div class="row">
          <div class="col-md-12">
              <div class="heading">
                  <h2 class="section-title">{{ .title }}</h2>
              </div>
          </div>
      </div>
    {{ range $index, $element := .items }}
      {{- if ne (mod $index 2) 1 }}
      <div class="row">
        <div class="col-md-6 text-center">
          <img class="" src="{{ relURL $element.image }}" alt="">
        </div>
        <div class="col-md-6">
          <div class="content mt-100">
            <h4 class="section-title">{{ $element.title }}</h4>
            <p>{{ $element.text }}</p>
            <a href="{{ $element.button_link }}" class="btn btn-round btn-round-sm">{{ $element.button_text }}</a>
          </div>
        </div>
      </div>
      {{- else }}
      <div class="row">
        <div class="col-md-6">
          <div class="content mt-100">
            <h4 class="section-title">{{ $element.title }}</h4>
            <p>{{ $element.text }}</p>
            <a href="{{ $element.button_link }}" class="btn btn-round btn-round-sm">{{ $element.button_text }}</a>
          </div>
        </div>
        <div class="col-md-6 text-center">
          <img class="" src="{{ relURL $element.image }}" alt="">
        </div>
      </div>
      {{- end }}
    {{- end }}
  </div>
</section>
{{- end }}

config.toml:

  [params.feature_list]
    title = "Why Choose Apple Watch"
    [[params.feature_list.items]]
      image = "images/showcase/showcase-4.png"
      title = "Lorem ipsum dolor sit amet."
      text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, sed, assumenda. Tenetur sed esse, voluptas voluptate est veniam numquam, quis magni. Architecto minus suscipit quas, quo harum deserunt consequatur cumque!"
      button_link = ""
      button_text = "Check Features"
    [[params.feature_list.items]]
      image = "images/showcase/showcase-3.png"
      title = "Lorem ipsum dolor sit amet."
      text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, sed, assumenda. Tenetur sed esse, voluptas voluptate est veniam numquam, quis magni. Architecto minus suscipit quas, quo harum deserunt consequatur cumque!"
      button_link = ""
      button_text = "Check Features"

my .html that should pick values from data.yml:

{{ with .Site.Data.desktop.feature_list }}

<!-- the same code -->

{{ end }}

my desktop.yml:

feature_list:
  - title: 1Why Choose Lorem ipsum
feature_list.items:
  - image: img/showcase/pcnc4r.jpg
    title: 2Lorem ipsum dolor sit amet.
    text: 2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, sed, assumenda. Tenetur sed esse, voluptas voluptate est veniam numquam, quis magni. Architecto minus suscipit quas, quo harum deserunt consequatur cumque!
    button_link: #
    button_text: Check Features

  - image: img/showcase/pcnc5box.jpg
    title: 3Lorem ipsum dolor sit amet.
    text: 3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, sed, assumenda. Tenetur sed esse, voluptas voluptate est veniam numquam, quis magni. Architecto minus suscipit quas, quo harum deserunt consequatur cumque!
    button_link: #
    button_text: Check Features

Currently my code does not show any errors, but does not show any content either.

I think the technology I need is described here: https://novelist.xyz/tech/hugo-data-files/ - but there it works, and in my case it doesn’t. What am I doing wrong? :anguished:

The template is here: https://themes.gohugo.io/vex-hugo/

Try this tool ->
https://toolkit.site/format.html

Hi,

Just to clarify:

Do you mean that you want to read from /data/desktop.yml instead of config.toml?

It looks like your yaml file is not correctly “translated” from the toml version. Either change the yaml to match the toml format correctly, or change the layout file to reflect the different structure.

@ BayuAngora Thanks for the info! An interesting tool - but produced the code exactly like mine. Does not work.

@ pointyfar Yes Sir! I would agree with you that my .yml code needs to be corrected. I just don’t know how to do that.

feature_list.items:

Isn’t valid yaml. Yaml doesn’t use dot notation.

What you mean is

feature_list:
    title: Why choose
    items:
        -image: .1jpg
         title: blah
         button:
        -image: 2.jpg

etc.

Well, the easy way would be to copy the toml code into a converter like the one linked to above. Parse toml => build yaml. Note that you need to remove occurrences of “params.” as you don’t need to nest it under params.

It would probably also help to read up on toml/yaml notation more generally, but that is outside the scope of Hugo and these forums.

Thank you! I will try that. So far I’ve removed the if … else logic and got the script to work without it.

Thank you! I will try that.