tina4stack/tina4cms

Tina4 CMS 模块

安装量: 1,838

依赖关系: 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");
}