7

Ask DN: Can anyone help me with my Jekyll site?

7 years ago from , Frontend Software Engineer

Hey DN, I'm currently looking to update my side project OC Creative in Jekyll, so I can dynamically populate the lists by just updating the YML file.

However, I'm having trouble creating the correct for loops and populating the yml file correctly so it would automatically populated the categories themselves as well as all the names within the categories.

Can someone help me out with it? Or possibly point me to some decent Jekyll tutorials? I've only been able to find tutorials on the basics.

Thanks guys!

15 comments

  • Matt ColemanMatt Coleman, 7 years ago (edited 7 years ago )

    Considering the simple structure of the site, it might be easier just to write it all in Markdown – or a Markdown file for each Category.

    However, if you want to loop through... For your YAML file, just write it similarly to how you would write an outline. Category first, with nested Names and Links. You could also break them out into separate files.

    Then for your template, you would create a loop for each category, then output each name & link.

    {% for photographer in site.data.photography %} {{ photographer.name }} {{ photographer.link }} {% endfor %}
    2 points
    • Adam RasheedAdam Rasheed, 7 years ago

      Thanks! How do you nest things in a YAML correctly? Every time I try to do it, I get errors in my command line.

      0 points
      • Oliver PattisonOliver Pattison, 7 years ago

        Does your syntax look like this?

        - name: 'Designer name' src: 'http://example.com' - name: 'Designer name' src: 'http://example.com' - name: 'Designer name' src: 'http://example.com'

        Give that a shot.

        0 points
        • Adam RasheedAdam Rasheed, 7 years ago

          So I would have to have a separate YAML file for every category?

          How would I have everything in a single YAML file? So I can write a loop that populates the categories and the list within those categories from a single YML file.

          How would I go about doing that?

          0 points
          • Oliver PattisonOliver Pattison, 7 years ago (edited 7 years ago )

            The more that I think about this, the more that I think you should keep it simple and store it in YAML front matter (especially for a site without a lot of pages). You're just using this data on one page?

            Front matter for the page:

            designers: - name: 'Designer name' src: 'http://example.com' - name: 'Designer name' src: 'http://example.com' - name: 'Designer name' src: 'http://example.com' photographers: - name: 'Photographer name' src: 'http://example.com' - name: 'Photographer name' src: 'http://example.com'

            Reference within a for loop with: page.designers[forloop.index0].name or page.photographers[forloop.index0].src.

            You can use the same structure in a data YAML file. In that case you’d use a variable like site.data.people.designers[forloop.index0].name. But you can see why keeping it all in one file can be a bit difficult, especially if you’re only using the data once. A variable reference like that is a pain and is so specific that it’s unlikely to require reuse.

            If you’re really only referencing the data once, put the YAML data in the front matter (between the dashes at the start of the HTML or Markdown doc). If you’re reusing it elsewhere, make a new data file for each thing you want to reference on your site (like photographers.yml, designers.yml and so on).

            1 point
      • Oliver PattisonOliver Pattison, 7 years ago

        Also, the way I have YAML syntax listed here is not the only way that YAML can be formatted. But it should work for what you’re trying to do.

        Example from a pattern library:

        This example shows why assign is useful. By assigning the same swatch value in each loop, I can re-use a modular block component in three loops.

        1 point
  • Oliver PattisonOliver Pattison, 7 years ago (edited 7 years ago )

    You should definitely check out https://talk.jekyllrb.com (the official Jekyll discussion forum) and post a link to your site’s source. It’s not a guarantee that your problem will get solved, but the community is really helpful.

    It’s hard for me to give you an appropriate resource or gauge how to approach your problem without looking at a source, but Liquid templates can be challenging at first. This is one of my favorite resources for learning Liquid basics: https://github.com/shopify/liquid/wiki/liquid-for-designers

    2 points
    • Adam RasheedAdam Rasheed, 7 years ago (edited 7 years ago )

      Thanks Oliver! As far as source code goes, its just a simple one page HTML page so you can inspect element or check out the source code in Chrome.

      Essentially, the div structure of the page is:

      <main> <div class="category web-design"> <ul> <li><a href="website-link" target="_blank">DESGINER NAME</a></li> <li><a href="website-link" target="_blank">DESGINER NAME</a></li> <li><a href="website-link" target="_blank">DESGINER NAME</a></li> </ul> </div> </main>

      So, there's a category for each category, and an unordered list of name within it.

      0 points
      • Oliver PattisonOliver Pattison, 7 years ago (edited 7 years ago )

        You probably want something like this:

        <ul> {% assign designers = site.data.designers %} {% for designer in designers %} <li><a href="{{ designer.src }}" target="_blank">{{ designer.name }}</a></li> <li><a href="{{ designer.src }}" target="_blank">{{ designer.name }}</a></li> <li><a href="{{ designer.src }}" target="_blank">{{ designer.name }}</a></li> {% endfor %} </ul>

        Why assign? You can only sort a for loop when it is assigned – so it’s good to get into that practice. If you wanted to sort a for loop by anything other than the exact order you’ve specified, assigning is the way to go.

        I’m not sure if that exact code will work on your site, but given a file called designers.yml in a _data folder in the root of your project, it should.

        0 points
  • Jamie FangJamie Fang, 7 years ago

    Does anyone know some good Jekyll tutorials?

    1 point
    • Oliver PattisonOliver Pattison, 7 years ago (edited 7 years ago )

      I don’t know of a good list of Jekyll tutorials that would be appropriate for any skill level. Here are 30 or so articles that helped me out along the way: https://pinboard.in/u:opattison/t:jekyll/t:howto (may be out of date – I first started bookmarking them over three years ago). Viewing source on Jekyll sites was invaluable as well – star every site you like on GitHub and dig in.

      If you’re looking for help with something in particular, let me know. How to approach solving a problem in Jekyll depends on what your goal is. Most problems in Jekyll can be solved with either a foundation in Liquid (the templating language), some Ruby and project configuration, or a decent understanding of HTML, CSS and JavaScript, and pretty much everything can be solved with a combination of those disciplines. Let me know where you’re starting from and what you’re trying to do and I may be able to point you in the right direction.

      2 points