li-cms-vue
In this tutorial, we will see how to use Cockpit CMS to set up a CMS backend and to use the API interface provided by Cockpit to build a customized functional frontend.
在本教程中，我们将看到如何使用Cockpit CMS设置CMS后端以及如何使用Cockpit提供的API接口来构建自定义的功能前端。
Not quite like other “heavy weight”, or “fully fledged” CMSes, Cockpit is lightweight and “bare”. It only provides a backend to manage meta-data and data entries, whilst the frontend is all in the developer’s hands.
与其他“重量级”或“完全成熟”的CMS不同，Cockpit重量轻且“裸”。 它仅提供一个后端来管理元数据和数据条目，而前端全在开发人员手中。
A copy of Cockpit CMS can be downloaded here in zip form. After downloading, just unzip the archive to a directory on your web server that is accessible. In my case, it is mapped to: http://vagrant/cockpit.
可以在此处以zip格式下载Cockpit CMS的副本。 下载后，只需将归档文件解压缩到Web服务器上可访问的目录即可。 就我而言，它映射到： http://vagrant/cockpit 。
Next, visit the installation page: http://vagrant/cockpit/install to start the installation process.
接下来，访问安装页面： http://vagrant/cockpit/install开始安装过程。
NOTE: Cockpit uses SQLite as its database engine by default. If you have not installed SQLite yet, please do so before the installation.
注意：默认情况下，Cockpit使用SQLite作为其数据库引擎。 如果尚未安装SQLite，请在安装前进行。
NOTE: Cockpit also requires that its /storage/data directory be writable. Please change the mode of that directory accordingly.
注意：座舱也要求其/storage/data目录可写。 请相应地更改该目录的模式。
The installation is just one click. When the installation is complete, you will be greeted with this page:
一键安装。 安装完成后，将看到以下页面：
Now we can log in with admin/admin and the backend administration dashboard page will be shown:
现在我们可以使用admin/admin登录，将显示后端管理仪表板页面：
Well, we don’t have anything set up yet. Before we create our own content, let’s learn about a few key modules in Cockpit.
好吧，我们还没有任何设置。 在创建自己的内容之前，让我们了解Cockpit中的一些关键模块。
The two most important modules in Cockpit are: Collections and Galleries.
驾驶舱中两个最重要的模块是：收藏和画廊。
We can treat “Collections” as a bunch of tables. All collections are defined in Cockpit with various fields of virtually all kinds of types. Collections are populated with “Entries“, which is similar to a record in a table.
我们可以将“集合”视为一堆表格。 所有集合都在Cockpit中定义，几乎包含各种类型的各个字段。 集合中填充了“ Entries ”，这类似于表中的记录。
Galleries are “photo albums”. A user creates a photo album which can contain pictures that can be used later, in the backend as well.
画廊是“相册”。 用户在后端创建相册，其中可以包含以后可以使用的图片。
Cockpit also has other modules: forms, regions (a kind of reusable snippets to be inserted in the frontend pages), media manager (to manage all the media files in the site). The detailed documentation for these modules (include collections and galleries) can be found on the official site.
Cockpit还具有其他模块：表单，区域(要在前端页面中插入的一种可重用代码段)，媒体管理器(用于管理站点中的所有媒体文件)。 这些模块的详细文档 (包括收藏和画廊)可以在官方网站上找到。
To start, I will create a collection to capture my trips made. We need to provide a name for the collection (Trips) and define what its entries will contain:
首先，我将创建一个集合来捕获我的旅行。 我们需要为集合提供一个名称( Trips )，并定义其条目将包含的内容：
It is a simple structure and consists of the followings fields:
它是一个简单的结构，由以下字段组成：
name: a Text field.
name ：一个Text字段。
date: a Date field.
date ： Date字段。
location: a Text field.
location ：一个Text字段。
diary: a Markdown field to capture some highlights of the trip.
diary ： Markdown字段，用于记录旅程的一些亮点。
pic: a Text field to link to a gallery of pictures associated with the trip.
pic ： Text字段，链接到与旅程相关的图片库。
The above screenshot shows how a user can visually define the structure and other options (like “What to show in an entry page and show by what order on which field”). Quite intuitive.
上面的屏幕截图显示了用户如何直观地定义结构和其他选项(例如“在输入页面中显示什么以及在哪个字段上按什么顺序显示”)。 非常直观。
NOTE: Cockpit also creates several other fields automatically to store information like ID, creation date, modification date, etc. We can also use these “meta” fields in our code.
注意： Cockpit还会自动创建其他几个字段来存储ID，创建日期，修改日期等信息。我们也可以在代码中使用这些“元”字段。
We have created a field diary to contain Markdown texts. Later, we will see how to display this in a web page.
我们创建了一个包含Markdown文本的diary本。 稍后，我们将看到如何在网页中显示此内容。
You may also notice that though Cockpit supports a field type “Gallery“, we are still using a “text” field. This is because Cockpit can’t yet link an existing gallery in a collection entry. Later, we will see how to get around this.
您可能还会注意到，尽管Cockpit支持字段类型“ Gallery ”，但我们仍在使用“ text ”字段。 这是因为Cockpit尚无法链接馆藏条目中的现有画廊。 稍后，我们将看到如何解决此问题。
We can create more collections, galleries, and drop some entries in there.
我们可以创建更多的集合，画廊，并在其中放置一些条目。
Now, let’s move to the “frontend” part.
现在，让我们转到“前端”部分。
NOTE: We’ll be using the Silex framework with Twig to build our front end, but you can pick your favorite – the logic is almost the same in any case, as long as you do the require we mention below.
注意：我们将使用Silex框架和Twig来构建前端，但是您可以选择自己喜欢的-在任何情况下，逻辑都是几乎相同的，只要您满足下面提到的require 。
Cockpit comes with a neat backend but it lacks a frontend to present the data. It is the programmer’s job to make this happen. To facilitate this, Cockpit exposes some fundamental APIs which are categorized by different modules and various Helpers. The official documentation contains a list of these functions. In this demo, we will only focus on some of them.
Cockpit的后端整齐，但缺乏用于显示数据的前端。 实现这一目标是程序员的工作。 为方便起见，Cockpit公开了一些基本的API，这些API按不同的模块和各种Helper进行分类。 官方文档包含这些功能的列表。 在此演示中，我们将仅关注其中的一些。
First, let’s see how to display a Welcome page with all the summary information.
首先，让我们看看如何显示带有所有摘要信息的欢迎页面。
NOTE: To use these APIs in our PHP code, please require_once __DIR__ . '/../cockpit/bootstrap.php';
注意：要在我们PHP代码中使用这些API，请require_once __DIR__ . '/../cockpit/bootstrap.php'; require_once __DIR__ . '/../cockpit/bootstrap.php';
The code is listed below:
下面列出了代码：
$app->get('/', function () use ($app) { $collections = cockpit('collections:collections', []); $galleries = cockpit('galleries:galleries', []); return $app['twig']->render('index.html.twig', ['collections' => $collections, 'galleries' => $galleries]); })->bind('home');We get all the collections and galleries through the Cockpit API interface. It is very straightforward.
我们通过Cockpit API接口获取所有收藏和画廊。 这很简单。
The collections section can be displayed using the below Twig code:
可以使用下面的Twig代码显示“收藏”部分：
<h2>Collections</h2> <p>There are total <strong>{{collections|length}}</strong> collection(s) in the CMS:</p> <ul> {% for col in collections|keys %} <li> <a href="{{ url('collection', {col: col})}}">{{col}}</a> </li> {% endfor %} </ul>With help from Symfony’s new VarDumper, it is very convenient to inspect the inner structure of a variable so that we can easily locate the correct members to be used.
在Symfony的新VarDumper的帮助下 ，非常方便地检查变量的内部结构，以便我们可以轻松地找到要使用的正确成员。
NOTE: VarDumper can be used in Silex too, as well as in any other framework or non-framework app. For a detailed introduction on this new tool from Symfony, please take a look at Bruno’s article on VarDumper. To use this in Silex, you need use Symfony\VarDumper; and add one line in your composer.json file:
注意： VarDumper也可以在Silex中使用，也可以在任何其他框架或非框架应用程序中使用。 有关Symfony的新工具的详细介绍，请参阅Bruno在VarDumper上的文章 。 要在Silex中使用此功能，您需要use Symfony\VarDumper; 并在composer.json文件中添加一行：
"symfony/var-dumper": "3.0.*@dev"We can now click an entry link and it will bring us to the entry page:
现在，我们可以单击一个输入链接，它将带我们进入输入页面：
Two points need to be highlighted here.
这里需要强调两点。
The notes (diary field) of the entry is a Markdown field and my input in the backend is:
条目的注释( diary字段)是Markdown字段，我在后端输入的内容是：
###Japan Trip **Japan trip** is done in Aug 2013. GR, PR and TR went there for a pleasant journey.With Markdown syntax, I can skip the configuration of an online editor and use “plain” text to achieve a certain level of formatting effect which, in most cases, is sufficient.
使用Markdown语法，我可以跳过在线编辑器的配置，而使用“纯文本”来达到一定程度的格式化效果，这在大多数情况下就足够了。
To display Markdown in our final HTML page, we need to install the Markdown bundle by adding one line in the composer.json file:
要在最终HTML页面中显示Markdown，我们需要在composer.json文件中添加一行来安装Markdown捆绑包：
"michelf/php-markdown": "~1.4"and reference it in our index.php file:
并在我们的index.php文件中引用它：
use Michelf\MarkdownExtra;NOTE: I am using Markdown Extra syntax in this demo. Details on Markdown (and Markdown Extra) syntax can be found here.
注意：我在此演示中使用Markdown Extra语法。 可在此处找到有关Markdown(和Markdown Extra)语法的详细信息。
The rendering of a Markdown string (text) is simple:
Markdown字符串(文本)的呈现很简单：
foreach ($entries as &$entry) { $text = $entry['diary']; $html = MarkdownExtra::defaultTransform($text); $entry['diary'] = $html; }The output of Markdown rendering is satisfying.
Markdown渲染的输出令人满意。
Next, we may want to display the picture galleries associated with that entry. As mentioned earlier, there is no easy way (or in my opinion, an intuitive way) to do so. In this demo, the pic field defined above acts as a “link” to the gallery containing the pictures. There are a few lines of code to be done to display the images.
接下来，我们可能要显示与该条目关联的图片库。 如前所述，没有简单的方法(或者我认为是一种直观的方法)来做到这一点。 在此演示中，上面定义的pic字段充当指向包含图片的画廊的“链接”。 需要执行几行代码才能显示图像。
$app->get('/gallery/{gal}', function ($gal) use ($app) { $images = cockpit("galleries")->gallery($gal); foreach ($images as &$img) { $image = $img['path']; $imgurl = cockpit('mediamanager:thumbnail', $image, 200, 200); $img['cache']=$imgurl; $path=$img['path']; $url=str_replace('site:', 'http://'.$app['request']->getHost().'/', $path); $img['url']=$url; } return $app['twig']->render('gallery.html.twig', ['images'=>$images, 'gal'=>$gal]); } )->bind('gallery');The first step is to get all images for a particular gallery by calling the Cockpit API: $images = cockpit("galleries")->gallery($gal);.
第一步是通过调用Cockpit API获取特定画廊的所有图像： $images = cockpit("galleries")->gallery($gal); 。
Next, we need to get two things out of each image: a thumbnail and the real path of that image.
接下来，我们需要从每个图像中获取两点：缩略图和该图像的真实路径。
To get a thumbnail, Cockpit provides an API: cockpit('mediamanager:thumbnail', $image, 200, 200);, where 200 specifies the width/height of the thumbnail. There are a few other options available to create a thumbnail, like to control the quality and cropping mode. Please consult the documentation for a detailed usage explanation.
为了获得缩略图，Cockpit提供了一个API： cockpit('mediamanager:thumbnail', $image, 200, 200); ，其中200指定缩略图的宽度/高度。 还有一些其他选项可用于创建缩略图，例如控制质量和裁切模式。 请查阅文档以获取详细的使用说明。
One thing is missing, though, from this API, which is an automatic rotation of pictures so that a picutre taken in portrait orientation can be properly recognized and displayed. Now the system displays all pictures in landscape mode, regardless of the orientation of the original picture.
但是，此API缺少一件事，它是图片的自动旋转，因此可以正确识别和显示以人像方向拍摄的照片。 现在，无论原始图片的方向如何，系统都会以横向模式显示所有图片。
Cockpit does not store the real path of the picture. This may make sense in my case, as my pictures are actually loaded in the backend using vagrant/cockpit and the frontend is vagrant/silex.
驾驶舱不存储图片的真实路径。 在我的情况下，这可能是有道理的，因为我的图片实际上是使用vagrant/cockpit加载到后端的，而前端是vagrant/silex 。
If we check the VarDumper dump of $images, the path is in fact something like: "path" => "site:cockpit/assets/images/IMG_3427.JPG". Hence, we use a str_replace to generate a real Web URI for that image: "url" => "http://vagrant/cockpit/assets/images/IMG_3548.JPG". Of course, to make this work, we must make sure the image is served properly via that URI.
如果我们检查$images的VarDumper转储，则path实际上类似于： "path" => "site:cockpit/assets/images/IMG_3427.JPG" 。 因此，我们使用str_replace为该图像生成一个真实的Web URI： "url" => "http://vagrant/cockpit/assets/images/IMG_3548.JPG" 。 当然，要使其工作，我们必须确保通过该URI正确提供了图像。
And that’s it! With not many lines of coding, we have a functional frontend powered by Cockpit CMS.
就是这样！ 由于没有多少行编码，我们有了由Cockpit CMS支持的功能性前端。
Cockpit is lightweight, easy to install and to set up. Its backend is tidy and intuitive. Creating collections and galleries is straightforward and I personally like the various field types it offers. Populating an entry in a collection and loading pictures into a gallery isn’t hard either.
驾驶舱重量轻，易于安装和设置。 它的后端整洁直观。 创建馆藏和画廊很简单，我个人喜欢它提供的各种字段类型。 填充集合中的条目并将图片加载到图库中也不难。
The lack of a frontend, in my opinion, is not a bad thing. Various collection structures will definitely require different presentations and layouts. For example, a book collection may use a tabular style while a trip collection may include a gallery section showing some pictures. A default dumping of all fields of an entry will simply be ugly and unfitting. Thus, I would say Cockpit is quite smart in not providing one. However, this will require the user to code a different layout for each collection structure. It could be troublesome and time consuming in some cases and it requires a certain level of programming skills, which is why CockpitCMS labels itself as the “developer’s CMS”.
我认为缺少前端并不是一件坏事。 各种集合结构肯定需要不同的表示形式和布局。 例如， book收藏可以使用表格样式，而trip收藏可以包括显示一些图片的画廊部分。 默认情况下，条目所有字段的转储将很丑陋且不适合。 因此，我想说Cockpit很聪明，没有提供一个。 但是，这将要求用户为每个集合结构编码不同的布局。 在某些情况下，这可能很麻烦且很耗时，并且需要一定水平的编程技能，这就是CockpitCMS将自己称为“开发人员CMS”的原因。
Its API is of great value when we do frontend development, but it is still not complete. For example, the lack of providing a usable real path to a picture and the lack of an option to rotate a picture based on its orientation are just a few I’ve noticed in my short time with the CMS. I would suggest the author of the CMS to make some further improvements in this aspect.
当我们进行前端开发时，它的API具有很大的价值，但是它仍然不完整。 例如，在我使用CMS的短时间内，我注意到了一些缺少提供可用的真实图片路径以及基于图片的方向旋转图片的选项。 我建议CMS的作者在这方面做一些进一步的改进。
Most critical of all, it does not provide APIs to CRUD an entry. This is probably because the collection structure is different from one to another and it is practically impossible to provide a universal CRUD API. But this also stops us from using PHP code to quickly and easily manage the data. All we are left with is the backend, which may not be convenient enough sometimes. I would love to see this part of the API come into being.
最关键的是，它不提供用于CRUD条目的API。 这可能是因为收集结构彼此不同，并且实际上不可能提供通用的CRUD API。 但这也使我们无法使用PHP代码来快速轻松地管理数据。 我们所剩下的只是后端，有时可能不够方便。 我希望看到API的这一部分应运而生。
Cockpit CMS is best for those PHP developers who possess a certain level of PHP, CSS and framework knowledge, who are unwilling to be bound by other heavier CMSes and want to create a simple, tidy and “everything-under-my-control” CMS to show off their work and life. However, it is important to highlight that this may increase the programming difficulty, especially when we need to add more features into the fronend.
Cockpit CMS最适合那些具有一定程度PHP，CSS和框架知识PHP开发人员，他们不愿被其他较重的CMS束缚，并希望创建一个简单，整洁和“我控制之下的一切”的CMS。炫耀他们的工作和生活。 但是，重要的是要强调这可能会增加编程难度，尤其是当我们需要在框架中添加更多功能时。
There are certain other areas provided by Cockpit that are not covered in this post – feel free to explore its potential and share what you have achieved.
Cockpit提供的某些其他领域在本文中未涉及-随时探索其潜力并分享您所取得的成就。
The demo code for this tutorial can be found in the Github repo here.
本教程的演示代码，可以发现在GitHub库在这里 。
翻译自: https://www.sitepoint.com/introducing-cockpitcms-cms-developers/
li-cms-vue
