Dake Design #Code - DAKE DESIGN

Record and tutorials for creating this website.
Code part.

Overview

2 years before, when I started to make my website, I chose WordPress, a CMS platform I used for about 10 years. However, I felt WordPress is bloated and includes many functions I don't need. At the same time, as a designer, I want to design separate layouts for my different projects. CMS's logic, building a template and fit different contents in the template is actually against my idea.

Therefore, I decided to code the website myself. I am excited because I have 100% control over the whole page. But as I did more and more projects. It's painful to make changes because I have to manually change everything. This wasted me a lot of time and made me cannot focusing on design a beautiful page to show my ideas.

In June 2020, I designed this version 3 website with completely new home page and layout. Check out design part here. I was creating a static website at first, but I later decided to use a CMS in order to help me organize pages easier and save me some time from infinite manual editing. I will show some process below. It is also a tutorial for building a website using Craft CMS.

This page is also available in Simplified Chinese.

Choose CMS base on your preferences and you requirements.

I'm only a designer with limited basic coding knowledge.

In this page, I will mainly talk about templating building.

Read Craft's documentation.

Process #Index Page

There are mainly two parts in the homepage, project list on left and project detail list on right.

For the project list, I referenced Oak Stduio's code and made an animated project list. They retrieve articles's info from json files, create placeholders and replace those animated placeholders by artciles' info. I did some changes to fit my circumstance.

Count the project number and create some list items.

							
								{* Count how many project *}
								{% set count = craft.entries().section('project').count() %}

							
								//create a custom tag for better control.
								//I call it link-test here.
								window.customElements.define('link-list', class extends HTMLElement {});
							
							
								//Create list items based on the number counted.
								var plistnumber = {{ count }};
								for (var i = 0; i < {{ count }}; i++) {
									$('ul#plist-ul').append('<li><link-list>&nbsp;</link-list></li>')
								}

Create a JSON file using Element API. I showed my setting below. If you want to use the same setting, remember to repalce filename.json and sectionname.

							
return [
    'endpoints' => [
        'filename.json' => function () {
            return [
                'serializer' => 'jsonFeed',
                'elementType' => craft\elements\Entry::class,
                'criteria' => ['section' => 'sectionname'],
                'transformer' => function (craft\elements\Entry $entry) {
                    return [
                        'id' => (string) $entry->id,
                        'url' => $entry->url,
                        'title' => $entry->title,
                        'date_published' => $entry->postDate->format(\DateTime::ATOM),
                    ];
                },
                'meta' => [
                    'description' => 'Your Description',
                ],
                'pretty' => true,
            ];
        },
    ]
];

I won't share the rest code for the animated list because it's not fully created by myself. Check by yourself if you are really interested in it.

For the project details list on right side, There are not a lot of javascript. I mainly used native Craft functions. I want to show a note for External Site, a note for Legacy Layout, Project Title, Project Description, and Project Image.

So, we need a loop to show all the projects. Here I only show how those info are called but not the detail page structure. Remember to replace yourEntry, imageHandle, yourEntryCheckbox by your handles' name.

							
								{% set posts = craft.entries.section('yourEntry').all() %}

								{% for yourEntry in posts %}
									{% set image = yourEntry.imageHandle.one() %}

									{# Get Post Title #}
									{{ yourEntry.title }}

									{# Get Feature Image and Image Title #}
									{{ image.url }}
									{{ image.title }}

									{# Get Post Date #}
									{{ yourEntry.postDate | date('M') }}
									{{ yourEntry.postDate | date('Y') }}

									{# Show elements by checkbox result #}
									{% if (yourEntry.yourEntryCheckbox|length == true) %}
										{# Do something #}
									{% else %}
										{# Do something else #}
									{% endif %}

								{% endfor %}