Work-around for making pages from data?

support
9

I did something similar for our team members page as seen here: https://perchsecurity.com/team/

I have a csv file with all our team members their bios linkedin etc. an entry in the csv looks like this:

Ben Marte,Nudist Developer,Sr. UI/UX Engineer,https://www.linkedin.com/in/benmarte/,"Ben Marte is a product of the dot com bubble era. He's worked with various companies in many industries throughout the years developing all sorts of products from web, print, video, 3D printing you name it he's probably done it. When he's not coding he's most likely playing video games in his boxer shorts all day and wishing he lived in Iceland."

I then use this for rendering a users bio on blog posts: https://perchsecurity.com/perch-news/what-were-gonna-do-right-here-is-go-back-wayback.../

Here’s what that looks like in my single template:

{{ if isset .Params "author" }}
        {{ $author := $.Params.author }}

        {{$team := getCSV "," "csv/team.csv"}}
        {{range $i, $r := $team}}
          {{if gt $i 0}}
            {{if eq $author (index $r 0)}}
              {{partial "author" (dict "name" (index $r 0) "title" (index $r 2) "linkedin" (index $r 3) "bio" (index $r 4))}}
            {{end}}
          {{end}}
        {{end}}
{{end}}

And this is what my author partial looks like:

<div class="flex-row around author">
  {{ if eq .type "contractor"}}
    <div class="flex-col">
        <p><b>{{.name}}</b> - {{.title}}</p>
        <p>{{.bio}}</p>
    </div>
  {{ else }}
    {{if .bio}}
        <p class="text-center">
            <img src="/images/team/{{.name | urlize}}.jpg" alt="{{.name}}" class="author-img">
        </p>
        <div class="flex-col">
            <p><b>{{.name}}</b> <br> {{.title}}</p>
            <p>{{.bio}}</p>
            {{ if .linkedin }}
                <p>
                    <a href="{{.linkedin}}">LinkedIn</a>
                </p>
            {{ end }}
        </div>
    {{else}}
        <div class="flex-col">
            <div class="author-no-bio">
                <p class="text-center">
                    <img src="/images/team/{{.name | urlize}}.jpg" alt="{{.name}}" class="author-img">
                </p>
                <p class="text-center">
                    <b>{{.name}}</b>
                    <br>
                    <span>{{.title}}</span>
                    <br>
                    {{ if .linkedin }}
                        <a href="{{.linkedin}}">LinkedIn</a>
                    {{ end }}
                </p>
            </div>
        </div>
    {{end}}
{{ end }}
</div>

So you can use the same approach just add an if statement where it matches your frontmatter param with a param in the data file and it should work.

Whats great about this approach is our content is version controlled and anyone in our company can edit the csv file in order to update team members, investors testimonials etc.

Hope that helps :slight_smile:

2 Likes