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.
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.
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> </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 %}