In my last article about Digital Transformation, I explained how much it is important to have an excellent platform for implementing our digital strategy.

在上一篇有关数字化转型的文章中，我解释了拥有一个出色的平台来实施我们的数字化战略非常重要。

I don’t want to bore you again with the same old story, just a small recap to refresh why we are looking at Pimcore as a solution for the CMS\DPX :

我不想再用相同的旧故事让您感到厌烦，只是简要回顾一下我们为什么将Pimcore视为CMS \ DPX的解决方案：

Opensource

开放源代码 Decoupled\Headless presentation

解耦\无头演示MDM engine that avoids time-wasting on reading\writing data

MDM引擎可避免浪费时间读取/写入数据Powerful CMS Engine

强大的CMS引擎

That doesn’t mean that Pimcore is the solution to all evils, but

这并不意味着Pimcore是解决所有弊端的方法，但是

It is the right tool for who intend invest on a website

对于打算在网站上进行投资的人来说，这是正确的工具

In this article, I will try to show all the Pimcore capabilities building a blog from scratch.

在本文中，我将尝试展示从头开始构建博客的所有Pimcore功能。

I will cover the most important topic on Pimcore with a step by step explanation.

我将逐步介绍有关Pimcore的最重要主题。

After this tutorial, you will be able to start working on a Pimcore website. Moreover, reading this article will help to understand if this solution suits you.

之三本教程A F，你就可以开始Pimcore网站上的工作。 此外，阅读本文将有助于了解此解决方案是否适合您。

路线图 (The Roadmap)

I don’t’ want to annoy with a pure theoretical explanation, so I created a hands-on-code tutorial that leads to a blog site creation.

我不想惹恼纯粹的理论解释，所以我创建了一个动手代码教程，可以创建博客站点。

This article is divided into the following part:

本文分为以下部分：

How to install Pimcore

如何安装Pimcore Setup the theme (and manage CMS pages)

设置主题(并管理CMS页面) The Blog Data (custom data entry)

博客数据(自定义数据条目) The BlogRoll (Bricks and widget for custom UI)

BlogRoll(用于自定义UI的砖块和小部件)

All the source code is available on GitHub (link at the bottom).

所有源代码都可以在GitHub上找到(底部链接)。

Photo by Frank Vessia on Unsplash Frank Vessia在 Unsplash上 拍摄的照片

如何安装Pimcore(How to install Pimcore)

The easier solution is to use the docker image. You can use the following docker-compose file.

较简单的解决方案是使用docker映像。 您可以使用以下docker-compose文件。

Then running docker-compose up your environment will start in a while, downloading all required dependencies. The main issue relating to the setup about the meaning of “docker image.” The Pimcore docker image is not a ready-to-go setup, but an environment suitable for running a Pimcore environment. In simple words, you have the webserver, the right PHP version, all tuning done, but you have to install Pimcore inside the container.

然后运行docker-compose up您的环境将在一段时间后开始，下载所有必需的依赖项。 与有关“ docker image”含义的设置有关的主要问题。 Pimcore泊坞镜映像不是即用型设置，而是适合于运行Pimcore环境的环境。 简而言之，您已经完成了Web服务器，正确PHP版本和所有调优，但是您必须在容器内安装Pimcore 。

Installing Pimcore needs a few steps, and you can use the following commands:

安装Pimcore需要几个步骤，您可以使用以下命令：

# enter the containerdocker exec -it pimcore-php bashCOMPOSER_MEMORY_LIMIT=-1 composer create-project pimcore/skeleton tmpmv tmp/.[!.]* .mv tmp/* .rmdir tmp#run installer (need database credential, creates admin user)./vendor/bin/pimcore-install --mysql-host-socket=db --mysql-username=pimcore --mysql-password=pimcore --mysql-database=pimcore

Because the process needs a lot of files it can take a while, please be patient and do not shut down the console while it is thinking.

由于该过程需要大量文件，因此可能需要一段时间，请耐心等待，不要在考虑过程中关闭控制台。

The most tricky part is the installation one. When we create a folder for the install, the command-line tool does something like:

最棘手的部分是安装之一。 当我们为安装创建文件夹时，命令行工具会执行以下操作：

www\html +- your folder + web + other pimcore folder

The /web folder is the one that contains the bootstrap files and has to be set up as the document root. Because the standard Pimcore image uses […]/www/html/web as the document root, the script simply moves the files one step back to avoid changes in the apache settings.

/web文件夹是包含引导程序文件的文件夹，必须将其设置为文档根目录。 因为标准的Pimcore图像使用[…]/www/html/web作为文档根目录，所以该脚本只是将文件后移了一步，以避免更改apache设置。

Since that point, you are able to navigate Pimcore using any browser at HTTP://localhost:7080/admin.

从那时起，您便可以使用任何浏览器通过HTTP：// localhost：7080 / admin导航Pimcore。

体积映射 (The volume mapping)

This docker-compose file is intended for development purposes only and aims to keep all files self-contained and committable. The goal is to isolate all files in a folder and simplify all operations like switching from one project to another or sharing the project with a colleague. I used a folder for each container and inside a folder for each mapping topic.

此docker-compose文件仅用于开发目的，旨在保持所有文件独立且可提交。 目的是隔离文件夹中的所有文件，并简化所有操作，例如从一个项目切换到另一个项目或与同事共享项目。 我为每个容器使用一个文件夹，为每个映射主题使用一个文件夹。

pimcore + config + logs + wwwmysql + data + configredis + configdocker-compose.yml

Another big benefit of this configuration is that we can simply open the root folder with Visual Studio Code and get full control over all the parts of the project. This is good because you don’t need to switch tools or context during the development.

这种配置的另一个大好处是，我们可以简单地使用Visual Studio Code打开根文件夹，并获得对项目所有部分的完全控制。 这很好，因为您在开发过程中不需要切换工具或上下文。

For the production environment, this configuration is not optimal and needs some performance tuning.

对于生产环境，此配置不是最佳配置，需要进行一些性能调整。

设置主题 (Setting up your theme)

During the installation, we start from the skeleton scenario, that’s an empty website. This is very useful for learning Pimcore because you have anything ready, and you cannot improvise.

在安装过程中，我们从最基本的场景开始，那就是一个空的网站。 这对学习Pimcore很有用，因为您已经准备好一切，并且不能即兴创作。

The first point is to create a layout file and a default template.

第一步是创建布局文件和默认模板。

In this template, we can see:

在此模板中，我们可以看到：

the $this->template() helper that render some views, header, and footer in this case

$this->template()帮助器，在这种情况下呈现一些视图，页眉和页脚

the $this->slots()->output(‘_content’) that delegates to the page the content definition

$this->slots()->output('_content')委托页面定义内容

After we got a layout, we need a default template. Each page can have it’s own, but having a good fallback is good to avoid unnecessary work.

获得布局后，我们需要一个默认模板。 每个页面都可以拥有自己的页面，但是具有良好的后备功能可以避免不必要的工作。

In the snipped above, we refer to the layout we just created, and then we add a simple structure of blocks composed by header and text.

在上面的片段中，我们引用刚刚创建的布局，然后添加由标题和文本组成的简单块结构。

This snippet introduces the “editables”; these objects work in edit and view mode. For example, by using $this-input(“name”), you add a textbox that the user can fill in edit mode, and in the view mode, the text is used for rendering the page. Using the block editable, you get the result of replicating the format.

此代码段介绍了“可编辑内容”； 这些对象在编辑和查看模式下工作。 例如，通过使用$ this-input(“ name”)，您添加了一个文本框，用户可以在编辑模式下填写该文本框，而在视图模式下，该文本用于呈现页面。 使用可编辑的块，您可以获得复制格式的结果。

创建引导布局 (Creating a Bootstrap layout)

In the previous example, we see the editor in action. We were able to add a set of paragraphs on a page in WYSIWYG mode. That is very cool, but on modern websites, we need more flexibility. To prove how it is easy to create a template, I worked on the example above, getting a bootstrap grid layout.

在前面的示例中，我们看到了正在使用的编辑器。 我们能够在所见即所得模式下在页面上添加一组段落。 那很酷，但是在现代网站上，我们需要更大的灵活性。 为了证明创建模板的简便性，我在上面的示例中进行了工作，获得了引导网格布局。

The basic is to iterate over a set of rows (blocks) and then iterate over a set of columns (inner blocks). Then, I give the options to add any object inside the cell of the matrix. Easy, right?

基本是迭代一组行(块)，然后迭代一组列(内部块)。 然后，我给出了在矩阵单元格内添加任何对象的选项。 容易吧？

Note the part with the conditions print of the table element. This is because, during edit mode, there isn’t any bootstrap 4 support, so I fall back to the table for dividing horizontal space.

注意带有表格元素条件打印的零件。 这是因为在编辑模式下，没有任何bootstrap 4支持，因此我回到了划分水平空间的表格。

Another tricky part is the computation of CSS col classes. When the division is not exact, I spread the rest to the right element. For example, if I have 5 cols, 12/5 = 2, and I have 2 columns left, so I will have the first 3 columns with class col-2 and the last two with length col-3.

另一个棘手的部分是CSS col类的计算。 当除法不精确时，我将其余部分分散到正确的元素上。 例如，如果我有5个cols，12/5 = 2，并且还剩下2列，那么我将获得前3列具有col-2类，后两列具有长度col-3。

This solution makes the right elements a little bit larger than others when the fit is not perfect but avoids the wrong spaces. An advanced solution would be adding a numeric input for overriding the sizes or adding the opportunity of overriding the class.

当拟合不完美但避免错误的空间时，此解决方案会使正确的元素比其他元素大一些。 一个高级解决方案是添加一个数字输入以覆盖大小或增加覆盖类的机会。

The result in the editor is the following:

编辑器中的结果如下：

And you can add how many rows and columns you want.

您可以添加所需的行和列数。

页眉和页脚 (Header and footer)

I created two templates for the header and footer, but I make them parametric.

我为页眉和页脚创建了两个模板，但是我将它们设为参数化。

Inside Settings > WebsiteSettings you I added the variables I need:

在Settings > WebsiteSettings您添加了所需的变量：

Then I can use these variable as follows:

然后，我可以使用这些变量，如下所示：

博客数据 (The Blog data)

For the blog article created two different object type:

为博客文章创建了两种不同的对象类型：

Article

文章 Category

类别

The category field is a relation to the category entity. After this setup, we are able to enter blog articles.

类别字段是与类别实体的关系。 完成此设置后，我们就可以输入博客文章。

At that point, we have data, but we have work on the presentation. As you know, Pimcore lets you create a document for each page, but in this case, we have a dynamic rendering.

到那时，我们已经有了数据，但是我们正在进行演示。 如您所知，Pimcore允许您为每个页面创建一个文档，但是在这种情况下，我们有一个动态渲染。

The solution is articulated in two steps

该解决方案分为两个步骤

Create the routing

创建Craft.io路线Creating the template

创建模板

For creating a custom route, you just need to enter your settings from admin.

要创建自定义路线，您只需从管理员输入设置即可。

The input is very simple, and you just need to specify:

输入非常简单，您只需指定：

a name for the rule

规则的名称 the regular expression that captures a link

捕获链接的正则表达式The name of the parameters extracted from the link

从链接中提取的参数名称The rule for generating an URL from parameters

根据参数生成URL的规则

The last point is essential for generating URL automatically and avoid hardcoded address or rules.

最后一点对于自动生成URL并避免使用硬编码的地址或规则至关重要。

In this example, I linked the /blog/{slug} address to the BlogController, and I pass the slug variable to it.

在此示例中，我将/blog/{slug}地址链接到BlogController，并将slug变量传递给它。

By convention, the BlogController uses the default.html.php template inside the blog folder in the /app/resources/views folder.

按照惯例，BlogController使用/app/resources/views folder夹中blog文件夹内的default.html.php模板。

The following code implements the controller, and fetch items basing on the slug field.

以下代码实现了该控制器，并基于slug字段获取了项目。

The method used to send data to the template is to set a property directly using $this->view->variablename

将数据发送到模板的方法是直接使用 $this->view->variablename

The following code implements the page render.

以下代码实现页面渲染。

After this step, we have a blog page visible.

完成此步骤后，我们将看到一个博客页面。

Blogroll (The Blogroll)

At that point, we have a CMS engine that can create custom pages, data entry for the article entity, and the rendering of a single article page. What we need next is a blog roll on the home page. A simple solution could be to edit the template directly, but I prefer another solution that gives us the opportunity to learn another important pillar of Pimcore CMS.

到那时，我们有了一个CMS引擎，它可以创建自定义页面，文章实体的数据输入以及单个文章页面的呈现。 接下来我们需要的是主页上的博客。 一个简单的解决方案是直接编辑模板，但是我更喜欢另一个解决方案，它使我们有机会学习Pimcore CMS的另一个重要Struts。

We are going to create a widget (brick in the Pimcore slang) that can be added to any CMS pages. This widget will be parametric and will work in WYSIWYG mode. Hard? Not so much.

我们将创建一个可添加到任何CMS页面的小部件(在Pimcore widget语中为砖)。 该小部件将是参数化的，并且将在“所见即所得”模式下工作。 硬？ 没那么多。

We need to follow a few steps:

我们需要遵循一些步骤：

Create the brick class (this have to be inside /src/AppBundle/Document/Areabrick/ folder)

创建砖块类(必须位于/src/AppBundle/Document/Areabrick/文件夹中)

Enable the Brick from bundles page

从捆绑包启用砖块页面 Reload the cache

重新加载缓存Create two templates (one for editing mode and one for the rendering mode)

创建两个模板(一个用于编辑模式，一个用于渲染模式)

Let’s start with the easier one.

让我们从简单一点开始。

Please remember: for auto-discovery, the namespace has to be the one specified in this sample, no matter where the file is. Otherwise, you will need manual registration. The override of getTemplateLocation lets you use the standard template folder instead of the bundle one.

请记住：对于自动发现，无论文件在哪里，名称空间都必须是此示例中指定的名称空间。 否则，您将需要手动注册。 重写getTemplateLocation可让您使用标准模板文件夹而不是捆绑包。

At that point, the brick is discovered but not enabled, and you can do it by the UI.

此时，发现但未启用该砖块，您可以通过UI进行操作。

After this step, a cache reload is needed.

此步骤之后，需要重新加载缓存。

Since the brick is active, you can select it into the CMS.

由于砖是活动的，因此可以将其选择到CMS中。

The brick is configured for working in edit mode, so you see the data rendered inside the editor, like in the public web site (of course, using different styles, some details may vary). By clicking the edit button, a popup with the view edit is shown, and you can set data.

砖块配置为在编辑模式下工作，因此您可以在编辑器内部看到渲染的数据，就像在公共网站中一样(当然，使用不同的样式，某些细节可能会有所不同)。 通过单击编辑按钮，将显示一个带有视图编辑的弹出窗口，您可以设置数据。

The result in edit mode is that one:

在编辑模式下的结果是：

And in view mode the page is something like this:

在查看模式下，页面如下所示：

For getting this result, I used the following templates.

为了获得此结果，我使用了以下模板。

Edit template

编辑范本

In the edit template, we use inputs to get the limit of the article numbers and the view mode. The $this->select command render a drop-down menu with two options.

在编辑模板中，我们使用输入来获取文章编号的限制和查看模式。 $this->select命令呈现一个带有两个选项的下拉菜单。

View template

查看范本

The view template fetches blog articles and includes the right template basing on the user selection. The entries could have also been filtered in the controller action. The article list is passed as an argument to the template (that manages only the presentation logic).

该视图模板获取博客文章，并根据用户选择包括正确的模板。 这些条目也可能已在控制器操作中被过滤。 文章列表作为参数传递给模板(该模板仅管理表示逻辑)。

List template

清单范本

The difference between list and grid is just some CSS class and markup, so I add here just the list template (all code available in GitHub).

list和grid之间的区别只是一些CSS类和标记，因此我在这里仅添加list模板(所有代码在GitHub中都可用)。

The important part of this script is the usage of $this->path() that creates the URL dynamically basing on the custom route (robust to changes to the route). Another good point is the image usage. I added the option of creating a thumbnail for the image, so using $entry->getImage()->getThumbnail(“small-grid”) i get the path automatically. The thumbnail is generated by Pimcore without any effort on your side, and you just need to add a preset.

该脚本的重要部分是使用$this->path() ，它基于自定义路由动态创建URL(对路由进行更改很健壮)。 另一个好处是图像用法。 我添加了为图像创建缩略图的选项，因此使用$entry->getImage()->getThumbnail(“small-grid”)我会自动获取路径。 缩略图是由Pimcore生成的，无需您费力，您只需添加一个预设即可。

带什么回家 (What to take home)

Pimcore is the perfect solution for implementing websites from scratch. Starting without any constraints or limitations is a benefit to make sure you will achieve all results.

Pimcore是从头开始实施网站的完美解决方案。 没有任何约束或限制的开始是确保您将获得所有结果的好处。

By the way, you need some extra work at the beginning to get something usable. Thanks to the Pimcore flexibility, if you work well, all the time you invest in the setup will save a lot of issues later, and you will be able to scale without any friction. Anyway, if you are looking for a quick and dirty approach like downloading a theme and be online in a day… well, this is not the right tool.

顺便说一句，您需要在开始时做一些额外的工作才能获得可用的东西。 借助Pimcore的灵活性，如果您工作得很好，那么您在设备设置上投入的所有时间都将在以后节省很多问题，并且可以进行扩展而不会产生任何摩擦。 无论如何，如果您正在寻找一种快速而肮脏的方法，例如下载主题并在一天之内在线……那么，这不是正确的工具。

In this article, we explored the pillars and the basics for creating web sites, covering all the topics for stating working in it.

在本文中，我们探讨了创建网站的基础和基础，涵盖了说明在其中工作的所有主题。

We covered:

我们介绍了：

Entities (Data Object\Classes)

实体(数据对象\类) CMS Pages (Documents)

CMS页面(文档) Templating (layouts and pages)

模板(布局和页面) Widgets (Bricks)

小部件(砖) Routing and MVC basics

路由和MVC基础 Installation

安装

Remember also that this solution is based on containers, this is good because you can easily deploy to cloud solutions like Google Cloud, Amazon AWS, Microsoft Azure, or IBM Cloud Stories.

还要记住，该解决方案基于容器，这很好，因为您可以轻松地将其部署到Google Cloud ，Amazon AWS，Microsoft Azure或IBM Cloud Stories等云解决方案。

Now you should be able to start playing with Pimcore!

现在您应该可以开始使用Pimcore了！

翻译自: https://medium.com/@daniele.fontani/pimcore-tutorial-3035ab7c911d

相关资源：pimcore：开源数字体验平台（DXP，MDMPIM，CDP，DAM，CMSUX和电子商务-源码