본 글은 심포니스테이션에 처음 게재되었습니다.
이 글을 읽고 계시다면 오늘날 콘텐츠 중심 웹사이트를 구축하는 것이 너무 복잡하다는 것을 아실 것입니다.
그런데 이를 더욱 쉽고 간편하게 만들어주는 콘텐츠 관리 시스템이 있습니다. 특히 프론트엔드 개발자에게는 더욱 그렇습니다. 그라브CMS입니다.
제 메인 비즈니스 사이트인 grav.mobileatom.net의 테마를 맞춤 제작해보겠습니다. 추측해 보세요. AI는 전혀 포함되지 않습니다.
그리고 이 글을 쓰는 것은 제가 그 방법을 배우고 커뮤니티에 도움을 줄 수 있는 방법이 될 것입니다. 그라브에 대한 글은 많이 보이지 않습니다.
다음 내용을 다룰 예정입니다.
(1) 구성/파일 구조
(2) 나뭇가지 템플릿
(3) CSS
(4) 나뭇가지 기능
(5) 커스터마이징
모르신다면 GravCMS는 Symfony 기반의 수많은 CMS 중 하나입니다.
이 기사의 기술적인 세부 사항은 대부분 Grav 문서에서 인용되었습니다. 방금 말씀드린 대로 제가 직접 배우고 있는 중입니다.
Grav의 말:
"Grav의 핵심은 콘텐츠용 폴더 및 마크다운 파일 개념을 중심으로 구축되었습니다. 이러한 폴더와 파일은 성능을 위해 자동으로 HTML로 컴파일되고 캐시됩니다.
전체 CMS를 뒷받침하는 폴더 구조와 직접적으로 관련된 URL을 통해 해당 페이지에 액세스할 수 있습니다. Twig 템플릿으로 페이지를 렌더링하면 거의 제한 없이 사이트의 모양을 완벽하게 제어할 수 있습니다."
자, 테마를 살펴보겠습니다.
Grav의 테마는 Twig 템플릿으로 구축되었으며 내 기사 Twig: 프리미어 PHP 템플릿 언어에 대한 최종 가이드에서 Twig에 대해 자세히 알아볼 수 있습니다. 또한 여기서 몇 가지 세부 사항을 살펴보겠습니다.
제가 썼듯이 Twig는 MVC(모델, 뷰, 컨트롤러) 프로그래밍에서 뷰의 HTML로 변수를 출력하는 PHP 템플릿 언어입니다. 따라서 웹사이트 프런트엔드 구조에 기여합니다.
Symphony를 만든 Fabien Ponticier가 만든 것이므로 Grav에서 사용되는 것은 놀라운 일이 아닙니다.
그는 "템플릿 언어는 이러한 (MVC) 관심 분리를 존중하는 템플릿을 작성하는 데 도움이 되는 것입니다. 템플릿 언어는 프레젠테이션 로직을 쉽게 구현할 수 있도록 충분한 기능을 제공하는 것과 고급 기능을 제한하는 것 사이에서 적절한 균형을 찾아야 합니다. 비즈니스 로직으로 인해 템플릿이 손상되는 것을 방지하는 기능입니다."
PHP 템플릿이란 정확히 무엇인가요? 위에서 언급한 대로, 이는 PHP 애플리케이션의 보기를 모델 및 개체와 분리하는 데 사용됩니다.
Twig의 주요 기능은 다음과 같습니다.
몇 가지 마지막 참고사항:
관리 인터페이스를 통해 Grav에서 생성하는 각 페이지는 Twig 템플릿 파일을 참조합니다. 가장 좋은 방법은 템플릿 파일 이름을 페이지 이름과 최대한 일치시키는 것입니다. 아니면 적어도 콘텐츠 파일의 폴더 구조입니다.
예를 들어 blog.md는 Twig 템플릿 blog.html.twig로 렌더링됩니다
그래, Grav 테마가 어떻게 구성되어 있는지 살펴보겠습니다.
각 테마에는 blueprints.yaml이라는 정의 파일이 있습니다. 또한 관리자 패널에 대한 양식 정의를 제공할 수도 있습니다.
테마 정의 옵션을 사용하려면 your_theme_name.yaml 파일에 기본 설정을 제공하세요.
테마 루트에 Thumbnail.jpg라는 303x300 jpg를 포함하세요.
Grav 페이지의 Twig 템플릿은 다음 항목에 대한 하위 폴더가 있는 template/ 폴더에 있어야 합니다.
가장 좋은 방법은 콘텐츠에 맞춰 테마를 개발하는 것입니다. 이 전략은 제가 Grav에 투자한 이유 중 하나입니다. 페이지 파일 = Twig 템플릿.
다시 말하지만, default.md, blog.md, error.md, item.md, module.md는 default.html.twig, blog.html.twig 등과 동일합니다.
테마에는 CSS용 css/ 폴더가 필요합니다.
이미지/, 글꼴/, js/ 폴더를 루트에 추가하고 사용자 정의 자산을 저장하세요.
blueprints/ 폴더에는 앞서 언급한 양식 정의가 포함된 파일이 보관됩니다.
플러그인은 후크를 통해 Grav 테마로 가져옵니다.
따라서 your_theme_name.php에는 Twig가 아닌 로직이 저장됩니다.
참고로, 다른 사람에게 판매할 상업용 테마를 구축하려면 다음 파일도 필요합니다.
Grav를 사용하면 기본 Twig 템플릿만 있으면 얻을 수 있습니다.
그러나 Twig Extends 태그를 사용하여 기본 템플릿의 블록을 통해 기본 레이아웃을 정의하는 것이 더 좋습니다. 이 파일은 부분/하위 폴더에 base.html.twig로 저장됩니다. 위 이미지를 참고하세요.
기본 및 기타 특수 템플릿에서 확장 태그를 사용하여 base.html.twig에서 기본 레이아웃을 가져옵니다.
따라서 Twig 구문을 사용하는 default.html.twig 파일의 경우 다음과 같이 코딩합니다.
{% extends 'partials/base.html.twig'%}
{%block content %}
{{page.content | raw}}
{%endblock%}
첫 번째 코드 세트는 기본 레이아웃이 포함된 기본 템플릿을 확장합니다.
두 번째는 새 템플릿의 코드로 기본 템플릿의 콘텐츠를 재정의합니다.
다음으로 Grav 테마의 CSS를 살펴보겠습니다. SCSS를 포함하여 이를 구현하는 방법에는 여러 가지가 있습니다. 그러나 간단하게 유지하기 위해 바닐라 CSS에 중점을 둘 것입니다. 짧습니다. custom.css 파일을 추가하고 마을로 가세요.
Twig가 어떻게 작동하는지 간단히 살펴보겠습니다.
확장과 같은 나뭇가지 태그는 템플릿의 논리를 제어합니다. 그들은 Twig에게 무엇을 해야 할지 알려줍니다. IMHO, Block이 가장 중요한 태그입니다.
기타 항목은 다음과 같습니다.
나뭇가지 필터는 텍스트와 변수의 서식을 지정하고 조작하는 데 유용합니다.
다음이 포함됩니다:
함수는 콘텐츠를 생성하고 기능을 구현할 수 있습니다(분명히). 또한 필터가 수행할 수 있는 것과 동일한 작업을 수행할 수도 있습니다.
따라서 템플릿에는 필요에 따라 Twig 태그, 필터, 기능을 사용하세요.
Grav에는 선택한 태그 외에도 기능을 확장하기 위한 사용자 정의 Twig 태그가 포함되어 있습니다.
다음이 포함됩니다:
Grav를 사용하면 Twig 및 PHP 파일에서 테마 구성 및 청사진 정보에 액세스할 수 있습니다. 테마 개체를 통해 이를 수행하거나 PHP 구문이 포함된 Grav 플러그인을 사용할 수 있습니다.
테마의 기본 your_theme_name.yaml 파일을 변경하지 않는 것이 가장 좋습니다(위 이미지 참조). user/config/themes 폴더에서 재정의하세요.
마지막으로 Twig에는 여기서 다루지 않는 사용자 정의 개체와 변수도 있습니다. 간단하게 설명하겠습니다.
Grav의 Asset Manager는 CSS 및 JavaScript 파일을 관리하는 유연한 방법을 제공합니다. 여기에는 자산을 축소, 압축 및 인라인하는 자산 파이프라인이 포함되어 있습니다.
플러그인 이벤트 후크에서 사용하거나 Twig 호출을 통해 테마에서 직접 액세스할 수 있습니다. user/config/system.yaml에 자체 구성 파일이 있습니다.
Asset Manager를 통해 엔터프라이즈 수준으로 세분화할 수 있으므로 여기서는 더 자세히 다루지 않겠습니다.
간단하게 유지하기 위해 자산 플러그인을 사용하는 것이 좋습니다(위 이미지 참조). Grav 관리자에서 다운로드하세요. 그런 다음 이를 사용하여 필요에 따라 자산을 업데이트하거나 추가합니다.
그래서 빠르고 간단한 Grav 테마를 구축하는 방법을 다루었습니다. 구조를 설정하고, Twig 템플릿을 구축하고, 필요에 따라 CSS 및 JavaScript를 추가하세요.
간단하거나 복잡한 요구 사항을 충족시키기 위해 Grav 테마를 만드는 다양한 방법이 있다는 것을 보셨겠지만 Grav는 이를 더욱 쉽게 만들 수 있는 특징과 기능을 제공합니다. 이것이 바로 내 사이트의 테마를 맞춤설정하는 방법입니다.
더 쉬운 방법은 테마 상속을 사용하는 것입니다. 제가 WordPress 및 Drupal 테마로 작업한 것과 비슷해서 마음에 듭니다.
테마를 맞춤설정하기 위해 Grav가 선호하는 방법이기도 합니다.
상속되는 기본 테마를 정의합니다. 예를 들어 기본 테마 Quark 또는 구매한 테마입니다. 그런 다음 맞춤설정할 내용을 추가하거나 편집하고 나머지는 기본 테마에서 처리하도록 하세요.
이 전략을 사용하면 상속 테마의 사용자 정의를 잃지 않고 기본 테마를 업데이트할 수도 있습니다.
상속 테마를 만드는 방법에는 여러 가지가 있습니다. 하지만 단순화를 위해 다시 수동 프로세스를 살펴보겠습니다.
새 폴더 만들기 -> 사용자 정의 테마를 보관하려면 user/themes/your_theme_name을 사용하세요.
그런 다음 상속할 테마의 YAML 파일을 새 폴더에 복사하세요. 이름을 your_theme_name.yaml로 지정하고 Quark가 표시되는 곳마다 새 테마 이름을 변경하세요.
다음으로 users/themes/quark/blueprint.yaml 파일을 user/themes/your_theme_name 폴더에 복사하세요.
이제 user/config/system.yaml 파일에서 기본 테마를 변경해 보세요.
페이지:
테마 : your_theme_name
마지막으로 고급 이벤트 기반 기능을 추가하려면 user/themes/your_theme_name/your_theme_name.php 파일을 생성하세요.
{% extends 'partials/base.html.twig'%}
{%block content %}
{{page.content | raw}}
{%endblock%}
이제 Grav의 스트림을 설정하여 먼저 your_theme_name을 찾은 다음 Quark를 시도합니다.
이제 필요한 CSS, JS, Twig 템플릿 수정 사항을 제공하세요.
완료되었습니다. 매우 간단합니다.
와우. 전체 기사를 읽어주셔서 감사합니다.
이제 Grav 테마에 대해 더 많이 알게 되었습니다.':
(1) 구성/파일 구조
(2) 나뭇가지 템플릿
(3) CSS
(4) 나뭇가지 기능
(5) 커스터마이징
특히 테마를 사용자 정의할 때 단순성을 위해 Grav를 사용하는 것이 좋습니다. PHP, Twig, 바닐라 CSS 및 JS에서 마음에 들지 않는 점은 무엇입니까? 마크다운으로 콘텐츠를 만들 수도 있습니다.
Symfonistas와 Gravinnauts를 계속해서 코딩하세요!
https://learn.getgrav.org/17/themes
https://twig.symfony.com/
https://twig.symfony.com/doc/3.x/
https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet
위 내용은 Twig, PHP 및 CSS를 사용하여 간단한 Grav CMS 테마 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
