andrevanzuydam/tina4cms

Tina4 CMS 模块

安装: 112

依赖项: 1

建议者: 0

安全: 0

星级: 5

关注者: 2

分支: 17

开放问题: 6

语言:JavaScript


README

欢迎使用 Tina4CMS 模块,它是如何工作的?

composer require tina4stack/tina4cms

composer exec tina4 initialize:run

对于小型到中型网站,建议使用 Sqlite

composer require tina4stack/tina4php-sqlite3

将数据库连接添加到您的 index.php 文件中,该文件已被创建

require_once "vendor/autoload.php";

global $DBA;

$DBA = new \Tina4\DataSQLite3("test.db","", "", "d/m/Y");

echo new \Tina4\Tina4Php();

运行 CMS

composer start 8080

打开 CMS 来设置管理员用户

https://:8080/cms/login -> 这将帮助您开始

着陆页 - home

您需要创建一个名为 "home" 的着陆页,这是您开始工作的起始页面。

自定义

在您的 /src/templates 文件夹中创建一个 base.twig 文件,它需要以下块

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ title }}</title>
    <meta prefix="og: https://ogp.me/ns#" property="og:title" content="{{ title }}"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:type" content="website"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:url" content="{{ url }}"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:image" content="{{ image }}"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:description" content="{{ description }}"/>
{% block headers %}
    <link rel="stylesheet" type="text/css" href="/src/public/css/default.css">
{% endblock %}
</head>
{% block body %}
<body>
{% block navigation %}
    {% include "navigation.twig" %}
{% endblock %}

{% block content %}
{% endblock %}

{% block footer %}
{% endblock %}
</body>
{% endblock %}
</html>

或者一个例子,它扩展了 tina4-cms 中的现有基础

{% extends "@tina4cms/base.twig" %}

{% block headers %}
    <link rel="stylesheet" type="text/css" href="/src/templates/css/default.css">
{% endblock %}

{% block body %}
<body>
    <div class="content">
{% block navigation %}
    {%  include "navigation.twig" %}
{% endblock %}

{% block content %}
{% endblock %}
    </div>
</body>
{% endblock %}

一个可以覆盖的导航.twig 示例

在您的 src/templates 文件夹中创建一个 navigation.twig 文件

{% set menus = Content.getMenu("") %}
<nav>
    <ul>
        {% for menu in menus %}
            <li><a href="{{ menu.url }}">{{ menu.name }}</a>
                {% if menu.children %}
                    <ul>
                        {% for childmenu in menu.children %}
                            <li>
                                <a href="{{ childmenu.url }}">{{ childmenu.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>

在 CMS 中包含您的片段

您有两种方法可以实现这一点

当您想要包含内容而不希望片段通过 Twig 解析时,您可以直接使用以下内容:当您想要正确包含脚本或其他内容时,请使用原始过滤器

{{snippetName | raw}} or {{snippetName}}

以下是如何包含一个片段,其中您希望在页面中解析变量,例如在片段中

{{ include(getSnippet("snippetName")) }}

示例

"home" 页面的内容

  {% set world = "World!" %}
  
  {{ include (getSnippet("mySnippet")) }}

"mySnippet" 片段的内容

  Hello {{world}}!
  

将文章添加到页面中

{% set articles = Content.getArticles ("", 8) %}
{% for article in articles %}{% include "snippets/medium.twig" with {"article": article} %}{% endfor %}
{% set params = {"tag": "all", "skip": 4, "limit": 4, "template": "medium.twig"} %}
{% include "load-more.twig" with params %}

覆盖默认 CMS twig 命名空间 - 您自己的命名空间

CMS_TWIG_NAMESPACE=""

页面构建器

页面构建器应实现 GrapeJS,并允许您使用块和组件构建页面。块和组件应该易于加载。我们需要标记出已由页面构建器编辑的页面,以便通用 CMS 不要尝试渲染它们。

主题

谨慎使用,这目前是实验性的,但将来将作为页面基础被引入 CMS。目前的想法如下

主题结构

src
    templates
        themes
            theme-name
                blocks
                    block-name-1.json
                    block-name-2.json
                components
                    component-name-1.json
                    component-name-2.json
                theme.twig

默认主题可以被克隆来制作其他主题。

CMS 页面构建器扩展的示例

在您的 index.php 文件中,您的配置初始化处,您可以定义以下内容。

$config = new \Tina4\Config(function(\Tina4\Config $config) {
    (new Content())->addCmsMenu("/backend/program", "Products"); //Menu example
    $config->addTwigGlobal("Menu", new Menu()); //Adding a twig global class
    (new Theme())->addTwigView("product", "Products", "examples/products.twig"); //Adding different snippets for use in CMS views
    (new Theme())->addTwigView("menu", "Menu", "examples/menu.twig");
}