Pebble Templates
Pebble Templates Pebble is a Java templating engine inspired by Twig and similar to the Python Jinja Template Engine syntax. It features templates inheritance and easy-to-read syntax, ships with built-in autoescaping for security, and includes integrated s
pebbletemplates.io
1. Pebble Templates?
Pebble은 자바 템플릿 엔진으로 Twig에서 영향을 많이 받았고, 파이썬에서 사용하는 Jinja Template Engine과 유사하다.
2. Twig 맛보기
** Twig를 보니까 여기 문법이 많이 사용된듯 하다.
{{ var }}
{{ var|escape }}
{{ var|e }} {# shortcut to escape a variable #}Twig 템플릿에서 | (파이프)는 필터를 적용하는 구분자 역할을 한다. 즉 변수 var에 여러가지 필터를 달아서 변수의 값이 템플릿 엔진에 의해 원하는 형식으로 출력될 수 있다.
위 예시는
{{ var|escape }}var = `<script> ... `; 라고 변수를 선언했을 때, | (파이프) 뒤에 escape 필터를 달면,
<script>가 <script> 로 처리된다. 즉 특수문자가 escape 시퀀스로 바뀌어서 출력된다.
{{ var|escape|upper }}체인 필터 적용할 수 있는데. escape 처리한 후에 대문자로 변환한다. 따라서,
<script>가 <SCRIPT> 로 처리된다.
{{ var|raw }}raw라는 필터를 많이 사용하는데, escape 시퀀스 처리하지 않고 특수문자 그대로 출력한다. 즉 var 변수에 태그들이 무조건 HTML에 동작할 수 있도록 강제한다. 그리고 var라는 것이 HTML이나 CSS 겠구나 하는 추측도 할 수 있다.
{% for user in users %}
* {{ user.name }}
{% else %}
No users have been found.
{% endfor %}템플릿 지향 문법이라고 하는데, 이거 헷갈린다.
{% set users = [{'name': 'Alice'}, {'name': 'Bob'}] %}users 라는 객체가 있을 때, 'name'이라는 속성의 값을 출력한다.
// 값이 있을 때
* Alice
* Bob
// 값이 없을 때
No users have been found.{% else %}가 뒤지게 헷갈린데 {% if %}랑 같이 쓰이면 미친다. {% else %}는 여기서 users가 비어있을 때 실행되는 불록이다. 그리고 거의 모든 조건, 반복문의 긑은 {% endfor %}, {% endif %}가 들어간다. 자바나 다른 언어에서는 scope로 구분을 하는데 여기는 닫아주는 코드를 작성하지 않으면 에러발생한다.
{% extends "layout.html" %}
{% block content %}
Content of the page...
{% endblock %}위는 템플릿 상속인데 자바에서 사용하는 extends 키워드 처럼 다른 template를 상속받을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
<header>
<h1>저희 웹사이트에 오신 것을 환영합니다!</h1>
</header>
<nav>
<!-- nav -->
</nav>
// ----------------------
// 페이지 마다 다르게 들어갈 영역
// ----------------------
<main>
{% block content %}{% endblock %}
</main>
// 페이지 마다 다르게 들어갈 영역 끝
<footer>
<!-- footer -->
</footer>
</body>
</html>위를 layout.html라고 할 때 main 태그 안의 {% block content %} {% endblock %}가 페이지 마다 코드가 다르게 들어갈 영역이다.
{% extends "layout.html" %}
{% block content %}
<h1> Twig Template <h1>
<scirpt>
console.log("Twig Template);
</script>
{% endblock %}다른 페이지를 작성한다고 할 때, 위와 같이 와꾸를 잡아주고 {% block content %} {% endblock %} 안에다가 내용을 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
<header>
<h1>저희 웹사이트에 오신 것을 환영합니다!</h1>
</header>
<nav>
<!-- nav -->
</nav>
// ----------------------
// 페이지 마다 다르게 들어갈 영역
// ----------------------
<main>
<h1> Twig Template <h1>
<scirpt>
console.log("Twig Template);
</script>
</main>
// 페이지 마다 다르게 들어갈 영역 끝
<footer>
<!-- footer -->
</footer>
</body>
</html>실제 렌더링은 위와 같이 된다.
아무튼 Twig 문법이 정말 많이 사용되었고, 실제 사용한 것을 보면 위의 문법이 많이 사용되어져있다.
** Twig 문법 끝
3. Pebble 특징 및 사용방법
pebble의 특징은
- 다양한 내장 태그, 필터(Filters : 템플릿 엔진에서 제공하는 기능으로 함수이다.)
- 템플릿 상속 : 하나의 페이지에서 공통 영역을 뽑아 너가 사용하고 싶은 곳에 넣을 수 있다.
- 확장성 있는 언어
위 특징인데, 아무튼 그렇다 치고
<dependency>
<groupId>io.pebbletemplates</groupId>
<artifactId>pebble</artifactId>
<version>3.2.2</version>
</dependency>의존성을 추가하고 사용해야한다. 그리고 인텔리제이에서는 플러그인에서 pebble 다운로드 받아야 했던 것으로 기억한다. 추측인데 확장자가 peb으로 되어있는데 이것 때문에 다운로드 받아야 하는게 아닐까 하는 생각을 해본다. 그리고 문법이 살짝 개판인게 j
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
<div id="footer">
{% block footer %}
Copyright 2018
{% endblock %}
</div>
</body>
</html>위는 공통 layout이 될 코드인데 템플릿 상속을 할 때, {% block title %}My Website{% endblock %} 이렇게 문자열도 지정할 수 있나보다.
PebbleEngine engine = new PebbleEngine.Builder().build();
PebbleTemplate compiledTemplate = engine.getTemplate("templates/home.html");
Map<String, Object> context = new HashMap<>();
context.put("name", "Mitchell");
Writer writer = new StringWriter();
compiledTemplate.evaluate(writer, context);
String output = writer.toString();이걸 도대체 어떻게 사용하란 건지 감이 안왔는데, https://shanepark.tistory.com/197 여기에서 사용 방법이 나와있다.
PebbleEngine 객체를 생성해서 templates/home.html 경로에 있는 템플릿 파일을 로드한다. home.html은 Pebble 문법을 포함하고 있고 실제 데이터와 결합되어 클라이언트에게 보여진다. Map 객체 템플릿에서 사용될 데이터를 담을 객체이다. compiledTemplate.evaluate(writer, context);에서 템플릿과, 데이터를 결합하고 이를 문자열로 바꿔서 반환한다.
MVC와의 차이점은 Model 객체를 생성하면 알아서 담아서 return에 사용할 View의 이름만 지정하면 되는데 여기는 View를 갖고와서 직접 객체를 생성한다. 그리고 데이터도 내가 주입해야 한다. 왜,,,? 이걸 사용해야 하는지는 차차 공부하다 보면 알게 될까?
<html>
<head>
<title> Home </title>
</head>
<body>
<div id="content">
<h1> Home </h1>
<p> Welcome to my home page. My name is Mitchell.</p>
</div>
<div id="footer">
Copyright 2018
</div>
</body>
</html>렌더링된 결과이다.
[결론] 날라가서 다시씀, pebble 안쓰는 데 이유가 있지 않을까? 난 몰라^^;;
'Web' 카테고리의 다른 글
| [API 통신] Application/x-www-form-urlencoded VS Application/json 도대체 이거 뭘까? (0) | 2024.11.01 |
|---|
Pebble Templates
Pebble Templates Pebble is a Java templating engine inspired by Twig and similar to the Python Jinja Template Engine syntax. It features templates inheritance and easy-to-read syntax, ships with built-in autoescaping for security, and includes integrated s
pebbletemplates.io
1. Pebble Templates?
Pebble은 자바 템플릿 엔진으로 Twig에서 영향을 많이 받았고, 파이썬에서 사용하는 Jinja Template Engine과 유사하다.
2. Twig 맛보기
** Twig를 보니까 여기 문법이 많이 사용된듯 하다.
{{ var }}
{{ var|escape }}
{{ var|e }} {# shortcut to escape a variable #}Twig 템플릿에서 | (파이프)는 필터를 적용하는 구분자 역할을 한다. 즉 변수 var에 여러가지 필터를 달아서 변수의 값이 템플릿 엔진에 의해 원하는 형식으로 출력될 수 있다.
위 예시는
{{ var|escape }}var = `<script> ... `; 라고 변수를 선언했을 때, | (파이프) 뒤에 escape 필터를 달면,
<script>가 <script> 로 처리된다. 즉 특수문자가 escape 시퀀스로 바뀌어서 출력된다.
{{ var|escape|upper }}체인 필터 적용할 수 있는데. escape 처리한 후에 대문자로 변환한다. 따라서,
<script>가 <SCRIPT> 로 처리된다.
{{ var|raw }}raw라는 필터를 많이 사용하는데, escape 시퀀스 처리하지 않고 특수문자 그대로 출력한다. 즉 var 변수에 태그들이 무조건 HTML에 동작할 수 있도록 강제한다. 그리고 var라는 것이 HTML이나 CSS 겠구나 하는 추측도 할 수 있다.
{% for user in users %}
* {{ user.name }}
{% else %}
No users have been found.
{% endfor %}템플릿 지향 문법이라고 하는데, 이거 헷갈린다.
{% set users = [{'name': 'Alice'}, {'name': 'Bob'}] %}users 라는 객체가 있을 때, 'name'이라는 속성의 값을 출력한다.
// 값이 있을 때
* Alice
* Bob
// 값이 없을 때
No users have been found.{% else %}가 뒤지게 헷갈린데 {% if %}랑 같이 쓰이면 미친다. {% else %}는 여기서 users가 비어있을 때 실행되는 불록이다. 그리고 거의 모든 조건, 반복문의 긑은 {% endfor %}, {% endif %}가 들어간다. 자바나 다른 언어에서는 scope로 구분을 하는데 여기는 닫아주는 코드를 작성하지 않으면 에러발생한다.
{% extends "layout.html" %}
{% block content %}
Content of the page...
{% endblock %}위는 템플릿 상속인데 자바에서 사용하는 extends 키워드 처럼 다른 template를 상속받을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
<header>
<h1>저희 웹사이트에 오신 것을 환영합니다!</h1>
</header>
<nav>
<!-- nav -->
</nav>
// ----------------------
// 페이지 마다 다르게 들어갈 영역
// ----------------------
<main>
{% block content %}{% endblock %}
</main>
// 페이지 마다 다르게 들어갈 영역 끝
<footer>
<!-- footer -->
</footer>
</body>
</html>위를 layout.html라고 할 때 main 태그 안의 {% block content %} {% endblock %}가 페이지 마다 코드가 다르게 들어갈 영역이다.
{% extends "layout.html" %}
{% block content %}
<h1> Twig Template <h1>
<scirpt>
console.log("Twig Template);
</script>
{% endblock %}다른 페이지를 작성한다고 할 때, 위와 같이 와꾸를 잡아주고 {% block content %} {% endblock %} 안에다가 내용을 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
<header>
<h1>저희 웹사이트에 오신 것을 환영합니다!</h1>
</header>
<nav>
<!-- nav -->
</nav>
// ----------------------
// 페이지 마다 다르게 들어갈 영역
// ----------------------
<main>
<h1> Twig Template <h1>
<scirpt>
console.log("Twig Template);
</script>
</main>
// 페이지 마다 다르게 들어갈 영역 끝
<footer>
<!-- footer -->
</footer>
</body>
</html>실제 렌더링은 위와 같이 된다.
아무튼 Twig 문법이 정말 많이 사용되었고, 실제 사용한 것을 보면 위의 문법이 많이 사용되어져있다.
** Twig 문법 끝
3. Pebble 특징 및 사용방법
pebble의 특징은
- 다양한 내장 태그, 필터(Filters : 템플릿 엔진에서 제공하는 기능으로 함수이다.)
- 템플릿 상속 : 하나의 페이지에서 공통 영역을 뽑아 너가 사용하고 싶은 곳에 넣을 수 있다.
- 확장성 있는 언어
위 특징인데, 아무튼 그렇다 치고
<dependency>
<groupId>io.pebbletemplates</groupId>
<artifactId>pebble</artifactId>
<version>3.2.2</version>
</dependency>의존성을 추가하고 사용해야한다. 그리고 인텔리제이에서는 플러그인에서 pebble 다운로드 받아야 했던 것으로 기억한다. 추측인데 확장자가 peb으로 되어있는데 이것 때문에 다운로드 받아야 하는게 아닐까 하는 생각을 해본다. 그리고 문법이 살짝 개판인게 j
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
<div id="footer">
{% block footer %}
Copyright 2018
{% endblock %}
</div>
</body>
</html>위는 공통 layout이 될 코드인데 템플릿 상속을 할 때, {% block title %}My Website{% endblock %} 이렇게 문자열도 지정할 수 있나보다.
PebbleEngine engine = new PebbleEngine.Builder().build();
PebbleTemplate compiledTemplate = engine.getTemplate("templates/home.html");
Map<String, Object> context = new HashMap<>();
context.put("name", "Mitchell");
Writer writer = new StringWriter();
compiledTemplate.evaluate(writer, context);
String output = writer.toString();이걸 도대체 어떻게 사용하란 건지 감이 안왔는데, https://shanepark.tistory.com/197 여기에서 사용 방법이 나와있다.
PebbleEngine 객체를 생성해서 templates/home.html 경로에 있는 템플릿 파일을 로드한다. home.html은 Pebble 문법을 포함하고 있고 실제 데이터와 결합되어 클라이언트에게 보여진다. Map 객체 템플릿에서 사용될 데이터를 담을 객체이다. compiledTemplate.evaluate(writer, context);에서 템플릿과, 데이터를 결합하고 이를 문자열로 바꿔서 반환한다.
MVC와의 차이점은 Model 객체를 생성하면 알아서 담아서 return에 사용할 View의 이름만 지정하면 되는데 여기는 View를 갖고와서 직접 객체를 생성한다. 그리고 데이터도 내가 주입해야 한다. 왜,,,? 이걸 사용해야 하는지는 차차 공부하다 보면 알게 될까?
<html>
<head>
<title> Home </title>
</head>
<body>
<div id="content">
<h1> Home </h1>
<p> Welcome to my home page. My name is Mitchell.</p>
</div>
<div id="footer">
Copyright 2018
</div>
</body>
</html>렌더링된 결과이다.
[결론] 날라가서 다시씀, pebble 안쓰는 데 이유가 있지 않을까? 난 몰라^^;;
'Web' 카테고리의 다른 글
| [API 통신] Application/x-www-form-urlencoded VS Application/json 도대체 이거 뭘까? (0) | 2024.11.01 |
|---|
