ModStartCMS萬能建站系統主題開發教程

ModStart開源發表於2021-12-20

ModStart中的所有第三方統稱為模組,模板主題也是一個模組,以 CmsTheme 開頭,如 CmsThemeBlueCmsThemeGreen 等。

建立主題模組

使用 模組開發助手 可以快速的幫您建立模板主題模組。

通過 系統管理 → 模組開發助手 → 新建CMS主題模組 可以完成主題模組的快速建立。

如果您需要手動建立模板主題模組,請參照 CMS開發演示模板

主題模組結構

CmsThemeMyTest
├── Admin
│     ├── Controller
│     │     └── ConfigController.php             → 後臺配置檔案
│     └── routes.php
├── Asset                                        → 主題資原始檔
│     ├── css
│     │     └── theme.css
│     └── js
│         └── theme.js
├── Core
│     └── ModuleServiceProvider.php              → 模組核心註冊器
├── Docs                                         → 模組文件
│     ├── doc
│     │     └── Manual.md
│     ├── module
│     │     ├── content.md
│     │     ├── demo.md
│     │     ├── mobilePreview.md
│     │     └── preview.md
│     └── release
│         └── 1.0.0.md
├── Provider
│     └── ThemeSiteTemplateProvider.php         → 主題註冊器
├── View                                        → 模組檢視主目錄
│     └── pc                                    → 自適應預設為PC
│         ├── cms
│         │     ├── list                        → 列表檢視
│         │     │     ├── cases.blade.php
│         │     │     ├── default.blade.php
│         │     │     ├── job.blade.php
│         │     │     ├── news.blade.php
│         │     │     └── product.blade.php
│         │     ├── detail                      → 詳情檢視
│         │     │     ├── cases.blade.php
│         │     │     ├── default.blade.php
│         │     │     ├── job.blade.php
│         │     │     ├── news.blade.php
│         │     │     └── product.blade.php
│         │     ├── form                        → 表單檢視
│         │     │     └── default.blade.php
│         │     ├── page                        → 單頁檢視
│         │     │     └── default.blade.php
│         │     ├── index.blade.php
│         ├── footer.blade.php
│         ├── frame.blade.php                   → 模板框架檢視
│         └── header.blade.php
├── config.json                                 → 模組配置檔案
└── demo_data.php                               → 演示資料初始化

檢視檔案優先順序

主題的檢視檔案( .blade.php 結尾)可能出現在多個位置,系統在渲染檢視的時候會按照以下優先順序查詢直到匹配成功:

  1. 啟用的主題檢視目錄:如 module/CmsThemeMyTest/View
  2. 當前模組檢視目錄:如 module/Cms/View
  3. 系統檢視目錄:如 resources/views/theme/myTest
  4. 系統預設檢視目錄:如 resources/views/theme/default

舉例說明:

當前系統啟用了由CmsThemeMyTest主題模組提供的 myTest 主題。

Cms 模組的列表頁面呼叫 $this->view('cms.list.news')返回檢視檔案,

系統會按照如下順序進行檢視檔案的查詢:

  • module/CmsThemeMyTest/View/pc/cms/list/news.blade.php
  • module/Cms/View/pc/cms/list/news.blade.php
  • resources/views/theme/myTest/pc/cms/list/news.blade.php
  • resources/views/theme/default/pc/cms/list/news.blade.php

檢視資料實體

欄目Cat

{
  "id": 5,
  "created_at": "2021-11-02 20:53:18",
  "updated_at": "2021-12-19 10:03:07",
  "pid": 0,
  "sort": 0,
  "title": "新聞資訊",
  "url": "news",
  "modelId": 9,
  "listTemplate": "news.blade.php",
  "detailTemplate": "news.blade.php",
  "seoTitle": "11",
  "seoDescription": "22",
  "seoKeywords": "33",
  "icon": "",
  "cover": "",
  "subTitle": "為廣大企業提供更加輕便、高效、經濟的人力資源服務",
  "bannerBg": "",
  "pageTemplate": null,
  "formTemplate": null,
  "_model": {
    "id": 9,
    "created_at": "2021-11-02 20:42:42",
    "updated_at": "2021-12-19 10:03:07",
    "title": "新聞諮詢",
    "name": "news",
    "detailTemplate": "news.blade.php",
    "listTemplate": "news.blade.php",
    "pageTemplate": null,
    "mode": 1,
    "formTemplate": null,
    "_customFields": []
  }
}

內容ContentSimple

{
  "id": 102,
  "created_at": "2021-12-20 10:54:03",
  "updated_at": "2021-12-20 10:54:03",
  "catId": 5,
  "modelId": 9,
  "alias": null,
  "title": "2020整體櫥櫃十大品牌排行榜",
  "summary": "這是2020年評選出來的櫥櫃十大品牌排行榜,小編對這個排行沒有意見,只是仁者見仁,智者見智,排行自有一定的道理,至於其中有什麼",
  "cover": "vendor/image/news-3.jpg",
  "postTime": "2021-01-01 00:00:20",
  "wordCount": null,
  "viewCount": null,
  "status": 1,
  "commentCount": null,
  "likeCount": null,
  "isRecommend": 1,
  "isTop": null,
  "tags": [],
  "author": null,
  "source": null,
  "seoTitle": null,
  "seoDescription": null,
  "seoKeywords": null,
  "_url": "/a/102",
  "_day": "2021-01-01"
}

內容Content

{
  "id": 102,
  "created_at": "2021-12-20 10:54:03",
  "updated_at": "2021-12-20 10:54:03",
  "catId": 5,
  "modelId": 9,
  "alias": null,
  "title": "2020整體櫥櫃十大品牌排行榜",
  "summary": "這是2020年評選出來的櫥櫃十大品牌排行榜,小編對這個排行沒有意見,只是仁者見仁,智者見智,排行自有一定的道理,至於其中有什麼",
  "cover": "vendor/image/news-3.jpg",
  "postTime": "2021-01-01 00:00:20",
  "wordCount": null,
  "viewCount": null,
  "status": 1,
  "commentCount": null,
  "likeCount": null,
  "isRecommend": 1,
  "isTop": null,
  "tags": null,
  "author": null,
  "source": null,
  "seoTitle": null,
  "seoDescription": null,
  "seoKeywords": null,
  "_tags": [],
  "_data": {
    "id": 102,
    "created_at": "2021-12-20 10:54:03",
    "updated_at": "2021-12-20 10:54:03",
    "content": "<p>櫥櫃生產企業也由94年的20多家發展到現在的3000多家,規模企業100多家,行業前50家銷售額佔全行業的30%以上。也因此在櫥櫃行業內湧現出一批優秀的企業和品牌。</p>\n<p>但是關於中國櫥櫃十大品牌評選的版本卻有很多,但是不管是由誰提出的什麼版本,關鍵是要用重要資料說話。以品牌知名度、質量標準、產品研發、生產能力、銷售規模、品牌口碑、可持續發展能力等方面綜合來評定才有足夠說服力。質量標量是一個知名品牌的生命力,產品研發、生產能力、銷售規模、可持續發展能力是一個知名品牌的發展力,品牌知名度、品牌口碑是一個知名品牌的影響力。</p>\n<p>2018年從品牌知名度、質量標準、產品研發、生產能力、銷售規模、品牌口碑、可持續發展能力等方面綜合評定出的中國櫥櫃十大品牌名單榜中榜上,皮阿諾排列其中,但是,如果單純以櫥櫃終端實際網點,實際銷售額來評估,皮阿諾憑藉700家終端專賣店和售後服務中心可以位列十大櫥櫃品牌之首,而在新近由騰訊舉辦的網友“十大櫥櫃品牌評選”活動中,皮阿諾更是以高票位居三甲。</p>"
  }

模型Model

{
  "id": 9,
  "created_at": "2021-11-02 20:42:42",
  "updated_at": "2021-12-19 10:03:07",
  "title": "新聞諮詢",
  "name": "news",
  "detailTemplate": "news.blade.php",
  "listTemplate": "news.blade.php",
  "pageTemplate": null,
  "mode": 1,
  "formTemplate": null,
  "_customFields": [
    {
      "id": 19,
      "created_at": "2021-12-19 15:48:57",
      "updated_at": "2021-12-19 15:48:57",
      "modelId": 20,
      "sort": 1,
      "title": "手機",
      "name": "phone",
      "fieldType": "text",
      "fieldData": [],
      "isRequired": 0,
      "isSearch": 0,
      "isList": 0,
      "placeholder": null,
      "listTemplate": null,
      "showTemplate": null,
      "maxLength": 100
    },
    {
      "id": 20,
      "created_at": "2021-12-19 15:48:57",
      "updated_at": "2021-12-19 15:48:57",
      "modelId": 20,
      "sort": 2,
      "title": "姓名",
      "name": "name",
      "fieldType": "text",
      "fieldData": [],
      "isRequired": 0,
      "isSearch": 0,
      "isList": 0,
      "placeholder": null,
      "listTemplate": null,
      "showTemplate": null,
      "maxLength": 100
    }
  ]
}

列表檢視

內建變數 cat

當前欄目資訊,資料結構結構參考 欄目Cat

內建變數 catChildren

當前欄目的子欄目,為欄目Cat陣列,資料結構參考 欄目Cat

內建變數 catRoot

當前欄目的根級欄目檢視,資料結構結構參考 欄目Cat

內建變數 catRootChildren

當前欄目的根級欄目檢視子欄目,為欄目Cat陣列,資料結構參考 欄目Cat

內建變數 catChain

當前欄目從根欄目到當前欄目的鏈路,為欄目Cat陣列,資料結構參考 欄目Cat

內建變數 records

當前欄目資料列表,為ContentSimple陣列,資料結構參考 ContentSimple

內建變數 pageHtml

當前列表分頁HTML資料

<div class="pages">
   <a href="?page=1">1</a>
   <span>2</span>
   <a href="?page=1">3</a>
</div>

詳情檢視

內建變數 record

當前顯示內容,資料結構參考 內容Content

內建變數 cat

當前欄目資訊,資料結構結構參考 欄目Cat

內建變數 catRoot

當前欄目的根級欄目檢視,資料結構結構參考 欄目Cat

內建變數 catRootChildren

當前欄目的根級欄目檢視子欄目,為欄目Cat陣列,資料結構參考 欄目Cat

內建變數 catChain

當前欄目從根欄目到當前欄目的鏈路,為Cat陣列,資料結構參考 Cat

內建變數 model

當前顯示內容的模型,資料結構參考 模型Model

單頁檢視

內建變數 record

當前顯示內容,資料結構參考 內容Content

內建變數 cat

當前欄目資訊,資料結構結構參考 欄目Cat

內建變數 catRoot

當前欄目的根級欄目檢視,資料結構結構參考 欄目Cat

內建變數 catRootChildren

當前欄目的根級欄目檢視子欄目,為欄目Cat陣列,資料結構參考 欄目Cat

內建變數 catChain

當前欄目從根欄目到當前欄目的鏈路,為欄目Cat陣列,資料結構參考 欄目Cat

表單檢視

內建變數 cat

當前欄目資訊,資料結構結構參考 欄目Cat

內建變數 catRoot

當前欄目的根級欄目檢視,資料結構結構參考 欄目Cat

內建變數 catRootChildren

當前欄目的根級欄目檢視子欄目,為欄目Cat陣列,資料結構參考 欄目Cat

內建變數 catChain

當前欄目從根欄目到當前欄目的鏈路,為Cat陣列,資料結構參考 Cat

內建變數 model

當前顯示內容的模型,資料結構參考 模型Model

CMS操作方法

欄目內容 MCms::paginateCatByUrl

根據欄目URL獲取列表

\MCms::paginateCatByUrl($catUrl, $page = 1, $pageSize = 10, $option = [])

欄目內容 MCms::paginateCat

根據欄目ID獲取列表

\MCms::paginateCat($catId, $page = 1, $pageSize = 10, $option = [])

欄目最近內容 MCms::latestCat

根據欄目ID獲取最近記錄

\MCms::latestCat($catId, $limit = 10)

欄目上一條內容 MCms::prevOne

獲取上一條記錄

\MCms::prevOne($catId, $recordId)

欄目下一條內容 MCms::nextOne

獲取下一條記錄

\MCms::nextOne($catId, $recordId)

友情連結 MPartner::all

按照位置獲取所有友情連結資料

\MPartner::all($position = 'home');

導航 MNav:all

按照位置獲取所有導航資料

\MNav::all($position = 'home');

輪播 MBanner:all

按照位置獲取所有輪播資料

\MPartner::all($position = 'home')

演示資料

一個優秀的模板需要攜帶完整的演示資料,這樣可以方便快捷的讓使用者快速的看到主題最終效果。

演示資料開啟

CMS整合了演示資料初始化填充功能,只需要簡單的配置即可完成。

在對應的模板設定頁面(如 功能設定 → 模板設定 → CMS開發測試模板),使用者點選初始化演示資料,勾選需要初始化的資料,即可完成資料填充。

演示1

演示2

演示資料參考配置

資料參考配置位於模組根目錄下的,如 module/CmsThemeMyTest/demo_data.php

<?php
return [
    'tables' => [
        'banner' => [
            'where' => [
                'position' => 'home',
            ],
            'records' => [
                [
                    'type' => \Module\Banner\Type\BannerType::IMAGE,
                    'image' => 'vendor/CmsThemeMyTest/image/banner-1.jpg',
                ],
                // ...
            ]
        ],
        'news' => [
            'records' => [
                [
                    'title' => '演示新聞標題',
                    'cover' => 'vendor/CmsThemeMyTest/image/news-1.jpg',
                    'summary' => '演示新聞描述',
                    '_data' => [
                        'content' => '<p>演示新聞內容</p>',
                    ]
                ],
                // ...
            ]
        ],
        'product' => [
            'records' => [
                [
                    'title' => '演示產品',
                    'cover' => 'vendor/CmsThemeMyTest/image/product-1.jpg',
                ],
                // ...
            ]
        ],
        'cases' => [
            'records' => [
                [
                    'title' => '演示案例',
                    'cover' => 'vendor/CmsThemeMyTest/image/cases-1.jpg',
                ],
                // ...
            ]
        ],
        'job' => [
            'records' => [
                [
                    'title' => '演示招聘',
                    '_data' => [
                        'content' => '<p>演示招聘說明</p>',
                    ]
                ]
            ]
        ],
        'nav' => [
            'where' => [
                'position' => 'head',
            ],
            'records' => [
                [
                    'name' => '產品',
                    'link' => modstart_web_url('product'),
                ],
                // ...
            ],
        ],
        'info' => [
            'records' => [
                'Cms_HomeInfoImage' => 'vendor/CmsThemeMyTest/image/about.jpg',
                'Cms_HomeInfoTitle' => '演示公司名稱',
                'Cms_HomeInfoContent' => '<p>演示公司介紹。</p>',
            ]
        ],
    ],
];
本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章