October CMS Theme 만들기

Admin 2020.04.04 11:17 조회 수 : 49

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


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


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


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




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>



        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.






  • url = "/" 

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

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


  • layout = "default"

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



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


description = "Default layout"


<!DOCTYPE html>



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




        <!-- Header -->

        <header id="layout-header">




        <!-- Content -->

        <section id="layout-content">

            {% page %}



        <!-- Footer -->

        <footer id="layout-footer">




        <!-- Scripts -->

        {% scripts %}







  • {% styles %} 

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


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

{% put styles %}

<link href="{{ [



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


<style type="text/css">

body {width:100%;}


{% endput %}


  • {% scripts %}

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


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

{% put scripts %}

    <script src="{{ [


    ]|theme }}"></script>

{% endput %}