STUDY4U

STUDY4U

메뉴보기

October CMS Theme 만들기

2020.04.04 11:17

Admin Views:289

1. 관리자 페이지 > 왼쪽 패널 상단의 CMS > Front-end theme 클릭

 

2. 우측 테마 목록 하단에서 'Create a blank theme' 클릭

 

3. 출력된 Create theme 테마창에 기본 테마 정보를 입력한다.

createtheme.jpg

4. 생성된 테마 디렉토리 구조와 테마 정보 파일(theme.yaml)

 

createtheme1.jpg

 

name: Mangoapple

description: 'October Theme'

author: Caleb

homepage: 'http://study4you.kr'

code: mangoapple

 

5. pages 폴더에 본문에 출력될 파일(home.htm)을 생성한다.

 

title = "브라우저 제목"

url = "/"

layout = "default"

meta_description = "October CMS for Laravel framework"

meta_title = "October CMS"

==

<div class="container">

 

    <div class="page-header">

        <h2>Overview <small>Basic concepts</small></h2>

    </div>

    <p>

        This page demonstrates the basic CMS features.

        Usually each page built with October is a combination of a layout, page, partials and content blocks,

        although in simple cases you can just use a page without anything else.

    </p>

 

</div>

 

[설명]

  • url = "/" 

http://localhost/ 기본 URL 에 출력된다.

만약 같은 URL 을 사용하는 파일이 2개 이상일 경우, 처음 등록한 파일이 우선적으로 출력이 된다.

 

  • layout = "default"

화면 출력에 사용되는 레이아웃 파일명을 지정해 준다.

 

 

6. layouts 폴더에 위에서 지정한 레이아웃 (default.htm) 파일을 생성한다.

 

description = "Default layout"

==

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>{{ this.page.title }}</title>

        <meta name="description" content="{{ this.page.meta_description }}">

        <meta name="title" content="{{ this.page.meta_title }}">

        <meta name="author" content="STUDY4U">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Styles -->

        {% styles %}

    </head>

    <body>

 

        <!-- Header -->

        <header id="layout-header">

            HEADER

        </header>

 

        <!-- Content -->

        <section id="layout-content">

            {% page %}

        </section>

 

        <!-- Footer -->

        <footer id="layout-footer">

            FOOTER

        </footer>

 

        <!-- Scripts -->

        {% scripts %}

 

    </body>

</html>

 

 

[설명]

  • {% styles %} 

레이아웃에 스타일 문서 파일과 구문이 지정한 위치에 출력된다.

 

페이지 파일에 다음과 같이 등록하면 된다.

{% put styles %}

<link href="{{ [

    'assets/css/style.css',

    'assets/css/custom.css',

    ]|theme }}" rel="stylesheet" />

 

<style type="text/css">

body {width:100%;}

</style>

{% endput %}

 

  • {% scripts %}

레이아웃에 스크립트 문서 파일과 구문이 지정한 위치에 출력된다.

 

페이지 파일에 다음과 같이 등록하면 된다.

{% put scripts %}

    <script src="{{ [

        'assets/js/jquery.min.js',

    ]|theme }}"></script>

{% endput %}

 

I want to
Update Delete List
List
Write
Tag