💎 들어가며
지난 포스팅까지는 테마를 만드는 것 대해 간단히 생각했습니다.
레이아웃 적당한 테마를 하나 골라서 CSS만 변경하면 끝~!
딱 원하는 구성이 있는 테마를 찾기도 어려울 뿐더러, 레이아웃 적당한 테마를 골랐더니 CSS가 엉망이라 다뜯어고치게 생겼으니😣😣
궁금한게 생기면 결판을 지을때까지 생각이 드는 성격이라, 결론은 테마 개발의 A-Z까지 알아야겠다는 생각이 들었습니다. 🔥🔥
커스텀 테마 개발에 대해 본격적으로 공부해가며 포스팅해보고자 합니다. 🤗
우선, Pelican은 Jinja Template Engine을 기반으로 작동하기 때문에 Jinja에 대해 알필요가 있습니다.
1. Template
본격적으로 테마를 개발하기에 앞서 템플릿의 구조에 대해 살펴보겠습니다 🙌
1.1 Template Engine
Template Engine
A template processor (also known as a template engine or template parser) is software designed to combine templates with data (defined by a data model) to produce resulting documents or programs.
Template Engine이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어입니다.
쉽게 말해, 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식입니다.
1.2 Jinja
Definition
Jinja
Jinja is a web template engine for the Python programming language.
It was created by Armin Ronacher and is licensed under a BSD License.
Jinja is similar to the Django template engine but provides Python-like expressions while ensuring that the templates are evaluated in a sandbox.
It is a text-based template language and thus can be used to generate any markup as well as source code.
출저 - Wiki: Jinja
Jinja는 Python언어를 위한 템플릿 엔진입니다.
Armin Ronacher가 개발, BSD 라이센스를 두고 있습니다.
파이써닉한 문법을 갖고있으며, 템플릿 언어로 마크업을 만들어냅니다.
Jinja에 대한 추가적인 정보는 Jinja Docs에서 보실 수 있습니다.
Version
Pelican을 설치하면 dependency로 자동으로 Jinja가 설치됩니다.
Version Info
Pelican: 4.9.1Jinja: 3.1.2
2. Jinja Syntax
Jinja의 문법을 간략하게 정리해보면 아래와 같습니다.
- Statements: 제어 구조,
{% ... %} - Expressions: 표현식,
{{ ... }} - Comments: 주석,
{# ... #}
2.1 Statements
Statements는 제어 구조를 가지는 문법입니다.
제어 구조에는 조건문(if), 반복문(for), 매크로(macro), 블록(block) 등 프로그램의 흐름을 제어하는 모든 것을 나타냅니다.
syntax
{% ... %}if
if-elif-else 예시입니다.
{% if kenny.sick %}
Kenny is sick.
{% elif kenny.dead %}
You killed Kenny! You bastard!!!
{% else %}
Kenny looks okay --- so far
{% endif %}인라인 구조도 가질 수 있습니다.
{{ "[{}]".format(page.title) if page.title }}for
루프 필터링을 사용한 for문 예시입니다.
<ul>
{% for user in users %}
<li>{{ user.username|e }}</li>
{% else %}
<li><em>no users found</em></li>
{% endfor %}
</ul>macro
매크로는 함수와 유사한 기능을 합니다
{% macro input(name, value='', type='text', size=20) -%}
<input type="{{ type }}" name="{{ name }}" value="{{
value|e }}" size="{{ size }}">
{%- endmacro %}<p>{{ input('username') }}</p>
<p>{{ input('password', type='password') }}</p>filter
filter 구문을 이용하면 Jina 정규 Filter를 이용할 수 있습니다.
{% filter upper %}
This text becomes uppercase
{% endfilter %}혹은 Expressions에서 아래와 같이 사용할 수 있습니다.
{{ name|upper }}set
set 구문을 이용하면 변수를 할당할 수 있습니다.
{% set navigation = [('index.html', 'Index'), ('about.html', 'About')] %}block
block은 상속에 사용되며 동시에 자리 표시자 및 대체 역할을 합니다.
base.html으로 템플릿을 만들고 하위 템플릿에서 상속받습니다.
상위 템플릿 예시
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
{% endblock head %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>하위 템플릿 예시 - categories.html
{% extends "template/base.html" %}
{% block title %}
{{ super() + '- Categories' }}
{% endblock %}
{% block content %}
<dl id="tag_list">
<ul>
{% for category, articles in categories %}
<li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a></li>
{% endfor %}
</ul>
</dl>
{% endblock %}include
include는 다른 템플릿을 렌더링하고 결과를 현재 템플릿에 출력합니다.
{% include 'header.html' %}
Body goes here.
{% include 'footer.html' %}2.2 Expressions
Expressions 문은 값을 표현하는데 사용됩니다.
syntax
{{ ... }}- 리터럴(literal) 값 - Python 객체(
str,int,float,list,tuple,dict) - 사칙 연산(
+,-,*,/,%,*,**) - 비교 연산(
==,!=,>,>=,<,<=) - 논리 연산(
and,or,not) - 기타 연산(
in,is: 테스트 수행,|: 필터적용,~: 문자연결,(): 콜러블 호출,./[]: 객체 속성 가져옴,)
2.3 Comments
주석문을 표현하는데 사용됩니다.
{# note: commented-out template because we no longer use this
{% for user in users %}
...
{% endfor %}
#}💎 Rerferences
💎 마치며
지금까지 Jinja Template Engine에 대해 살펴보았습니다. 확실히 문법을 알게되니 템플릿 개발에 있어 한층 이해도가 올라가는 거 같습니다. 😎
