spout 和bolt关系

tech2022-09-02 116

spout 和bolt关系

Bolt is a lightweight CMS built on Silex with Symfony components that’s fast, easy, and fun to develop with. My recent affinity for Bolt has turned it into my CMS of choice as I make a conscious effort to choose wisely and step away from bloated frameworks. Previously, I gave a very detailed insight into what it’s like developing with Bolt.

Bolt是基于Silex的轻型CMS，具有Symfony组件，可快速，轻松且有趣地开发。我最近对Bolt的爱好将它变成了我的CMS选择，因为我有意识地做出了明智的选择，并远离了肿的框架。以前，我非常详细地介绍了使用Bolt进行开发的感觉。

Today, we’re going to break down a very popular task into steps in order to accomplish it with ease. Here’s what we’ll be doing:

今天，我们将把一个非常受欢迎的任务分解为几个步骤，以便轻松地完成它。这是我们要做的：

We’ll create a content type for news articles to include a title, excerpt, featured image, and body.

我们将为新闻文章创建一种内容类型，以包括标题，摘录，特色图片和正文。 We’ll retrieve the news articles, and display them “blog” style, including pagination.

我们将检索新闻文章，并向他们显示“博客”样式，包括分页。 Each news article in the feed will link to its dedicated page, where the full article will be displayed.

供稿中的每则新闻文章都将链接到其专用页面，在该页面上将显示完整的文章。 On the full article page, we’ll generate links to previous and next articles.

在完整的文章页面上，我们将生成指向上一篇和下一篇文章的链接。

Before we dive in, let’s outline the path we’ll take to make it all happen. First, we’ll grab a fresh install of Bolt via Git and Composer. We’ll be using an SQLite file-based database, as it’s ready to go out of the box and requires no configuration. For quick front-end templating, we’ll pull in a free Boostrap theme from Bootswatch. Bolt leverages Twig, which is a modern templating engine for PHP, so we’ll build a quick theme from scratch using Twig markup. Once we’re all set up, we’ll create our content type, add in some dummy data, and output it onto a page. We’ll keep adding dummy data until we have enough to apply paging, then we’ll link to individual articles and generate previous and next links. Without further ado, let’s dive in!

在我们深入研究之前，让我们概述实现所有目标的路径。首先，我们将通过Git和Composer来重新安装Bolt。我们将使用一个基于SQLite文件的数据库，因为它可以直接使用，并且不需要任何配置。为了快速进行前端模板制作，我们将从Bootswatch中获取免费的Boostrap主题。 Bolt利用了Twig ，这是PHP的现代模板引擎，因此我们将使用Twig标记从头开始构建一个快速主题。设置完毕后，我们将创建内容类型，添加一些虚拟数据，然后将其输出到页面上。我们将继续添加虚拟数据，直到我们有足够的应用分页的能力为止，然后我们将链接到各个文章并生成上一个和下一个链接。事不宜迟，让我们开始吧！

安装 (Installation)

As an environment, we’ll be using our own Homestead Improved but you’re free to use your own local configuration. This post will continue under the assumption that you have Composer installed globally, and have pointed a virtualhost to the appropriate folder generated by the commands below.

作为一种环境，我们将使用我们自己的Homestead Improvementd，但您可以自由使用自己的本地配置。在假定您已全局安装Composer的情况下，本文将继续进行，并且已将虚拟主机指向由以下命令生成的适当文件夹。

To install, we execute:

要安装，我们执行：

git clone git://github.com/bolt/bolt bolt cd bolt git checkout v2.0.6 composer install

At the time of writing, version 2.0.6 is the stable branch. If you see any permission errors, you’ll need to reset a few directories by running the following command:

在撰写本文时，版本2.0.6是稳定分支。如果看到任何权限错误，则需要通过运行以下命令来重置一些目录：

chmod -R 777 files/ app/database/ app/cache/ app/config/ theme/ extensions/

If you visit the CMS’ interface in the browser now, you should be presented with the “create user” screen. This will register the first user in the database and grant you access to the admin portal, where we can edit configuration files, set up content types, add content, and switch themes. Create that user, and log into the admin portal by going to /bolt. Check out the front end too – you should see Bolt’s default theme being displayed. Let’s move on to setting up and building our own theme.

如果您现在在浏览器中访问CMS的界面，则应显示“创建用户”屏幕。这将在数据库中注册第一个用户，并授予您访问管理门户的权限，我们可以在其中编辑配置文件，设置内容类型，添加内容和切换主题。创建该用户，然后通过/bolt登录到管理门户。还要检查前端-您应该看到显示了Bolt的默认主题。让我们继续设置和构建自己的主题。

快速主题设置 (A Quick Theme Setup)

Since we’re not going to focus much on the overall visual appearance of our test site, I won’t go in depth with front end stuff. What we will do, however, is create our own theme quickly using the Cosmo Bootstrap theme from Bootswatch, and break some of our files up into reusable partials. Inside the theme directory, create a new directory called my-theme, and create a new file called index.twig. Let’s leave it blank for now, and hop into the admin end of things.

由于我们不会过多地关注测试站点的整体视觉外观，因此我不会深入介绍前端内容。但是，我们要做的是使用Bootswatch中的Cosmo Bootstrap主题快速创建自己的主题，并将我们的某些文件分解为可重用的部分。在theme目录中，创建一个名为my-theme的新目录，并创建一个名为index.twig的新文件。让我们暂时将其保留为空白，然后跳到管理方面。

Navigate to Configuration -> Main configuration, and take a look around. A lot of your site’s options can be tweaked here. As mentioned before, we’re using SQLite out of the box, so there’s no need to change the database settings. Feel free to edit the site name and payoff, but switching the theme name is more important to us right now. Scroll down to the theme section, and switch it to my-theme. That’s all we’ll need to do in our main configuration file, so save it, and let’s get back to our index.twig file.

导航到Configuration -> Main configuration ，然后四处看看。您可以在此处调整网站的许多选项。如前所述，我们开箱即用地使用了SQLite，因此无需更改数据库设置。可以随意编辑站点名称和收益，但是现在切换主题名称对我们来说更重要。向下滚动到主题部分，然后将其切换为my-theme 。这就是我们在主配置文件中需要做的所有事情，因此保存它，然后回到我们的index.twig文件。

Using some of Bootstrap’s classes, here’s what I came up with to get us started (don’t use this code just yet – we need to break it up):

使用一些Bootstrap的类，这是我为入门而想出的(现在不要使用此代码-我们需要将其分解)：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Site</title> <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"> </head> <body> <header> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">My Site</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> </ul> </div> </div> </nav> </header> <main> <div class="container"> <h1>Welcome to my site</h1> <p class="lead">All the latest news, tips, and tricks for Bolt CMS.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ratione veniam esse earum, voluptatem itaque in aut reprehenderit nostrum aspernatur minus. Iste iusto, id expedita esse? Dolorem, iusto, ipsam. Incidunt.</p> </div> </main> <hr> <footer> <div class="container"> © 2015, My Site </div> </footer> </body> </html>

Of course, this isn’t really reusable. We’re going to want to break this up into partials so that we can include the main chunks in other templates. Because our site is simple, we’ll only need two:

当然，这并不是真正可重用的。我们将希望将其分解为多个部分，以便可以将主要块包含在其他模板中。因为我们的网站很简单，所以我们只需要两个：

_header.twig

_footer.twig

You’re free to name your partials whatever you want, but the Bolt convention is to underscore names to represent partials. Here’s what our _header.twig partial will look like:

您可以随意命名您的部分，但是Bolt约定是在名称下划线表示部分。这是我们的_header.twig部分的样子：

And here’s the footer.twig partial:

这是footer.twig部分：

Now, we can restructure our index.twig file and any future templates to include the partials like this:

现在，我们可以重组index.twig文件和任何将来的模板，以包括如下所示的部分内容：

{% include '_header.twig' %} <h1>Welcome to my site</h1> <p class="lead">All the latest news, tips, and tricks for Bolt CMS.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ratione veniam esse earum, voluptatem itaque in aut reprehenderit nostrum aspernatur minus. Iste iusto, id expedita esse? Dolorem, iusto, ipsam. Incidunt.</p> {% include '_footer.twig' %}

Refresh your browser, and you’ll notice that all is still intact – only we’re now using partials. Before we continue, you should take note that there are two ways to generate templates using Twig:

刷新您的浏览器，您会发现所有内容仍然完整无缺–仅现在我们使用了partials。在继续之前，您应注意，有两种使用Twig生成模板的方法：

The first is using includes, like we’ve done above. This is the default method in the Bolt documentation.

首先是使用include，就像我们上面所做的那样。这是Bolt文档中的默认方法。

The second is using template inheritance, which allows you to build base skeletons and have other template files extend it, injecting content into various blocks.

第二种是使用模板继承，它允许您构建基本框架并让其他模板文件对其进行扩展，从而将内容注入各种块中。

For this tutorial, we’ll stick with the default includes method, but I do recommend reading and learning about template inheritance, as it’s quite powerful. Let’s move on to creating content types.

对于本教程，我们将坚持使用默认的include方法，但是我建议您阅读并学习有关模板继承的内容，因为它非常强大。让我们继续创建内容类型。

创建内容类型(contenttypes) (Creating Content Types (contenttypes))

Contenttypes are at the heart of any Bolt website or application. They allow us to build up a content structure just how we want it, add as many entries as we want, store them in our database, retrieve them, sort them, search for them, and so on. In our app, we’re only going to need one contenttype: News. This will allow us to add multiple news articles that follow a particular format.

内容类型是任何Bolt网站或应用程序的核心。它们使我们能够按照所需的方式构建内容结构，添加所需数量的条目，将其存储在数据库中，检索它们，对其进行排序，搜索它们，等等。在我们的应用程序中，我们只需要一种内容类型：新闻。这将使我们能够添加遵循特定格式的多篇新闻文章。

Under Configuartion -> Contenttypes, you’ll notice that Bolt already comes packed with three content types to get you started. Let’s get rid of all three for now, so we can focus on building our own. For now, just note that we’ll want the following associated with each news article:

在Configuartion -> Contenttypes ，您会注意到Bolt已经附带了三种内容类型，可以帮助您入门。现在让我们摆脱这三个方面，以便我们专注于构建自己的。现在，请注意，我们希望每个新闻文章都具有以下内容：

A title

标题 An excerpt

摘录 A featured image

特色图片 A body

身体

We’ll also want a specific template to be used when viewing a single news article, and another template for retrieving all the news articles. These settings are defined by the following two parameters respectively:

我们还将希望在查看单个新闻文章时使用特定的模板，并在检索所有新闻文章时使用另一个模板。这些设置分别由以下两个参数定义：

record_template

listing_template

Here’s what our Contenttypes configuration now looks like:

这是我们的Contenttypes配置现在的样子：

# News news: name: News singular_name: News Item slug: news singular_slug: news listing_template: news.twig record_template: newsitem.twig default_status: published fields: title: type: text class: large slug: type: slug uses: title image: type: image excerpt: type: textarea height: 150px body: type: html height: 300px

At this point, we’ll need to update the database to reflect the changes, so head to Configuration -> Check database and hit the update button. You should now see News in the sidebar. Before we continue, let’s add a bunch of dummy articles. I added 20 – a process, I know, but it will be handy for paging. I just used lorem ipsum text, and a 120 by 120 pixel dummy image.

此时，我们需要更新数据库以反映更改，因此请转到“ Configuration -> Check database然后单击“更新”按钮。您现在应该在边栏中看到News 。在继续之前，让我们添加一堆虚拟文章。我添加了20 –一个进程，我知道，但这对于分页很方便。我只是使用了lorem ipsum文本和一个120 x 120像素的虚拟图像。

检索所有记录 (Retrieving All The Records)

As we defined above, we’ll be using the news.twig template file to retrieve all our news items. Create that file in your theme directory, and include the partials like before:

如上所定义，我们将使用news.twig模板文件来检索所有新闻项。在主题目录中创建该文件，并像以前一样包含部分内容：

{% include '_header.twig' %} <h1>News</h1> <p class="lead">View all the news articles here.</p> <hr> {% include '_footer.twig' %}

This template is now accessible via the URL /news, so we can hardcode that into our navigation (menus are beyond the scope of this tutorial). In Bolt, pages that are used for listings always have the {{ records }} variable available. However, because we will be paging content, we want a little bit more control. Instead, we’ll make use of the super important setcontent tag, which allows us to append little queries and rules to the content we intend on retrieving. Let’s loop over all our news articles, and output them with some Bootstrap classes:

现在可以通过URL /news访问此模板，因此我们可以将其硬编码到导航中(菜单超出了本教程的范围)。在Bolt中，用于列表的页面始终具有{{ records }}变量可用。但是，由于我们将分页内容，因此我们需要更多控制权。取而代之的是，我们将使用超重要的setcontent标记，该标记使我们可以向要检索的内容添加少量查询和规则。让我们遍历所有新闻文章，并通过一些Bootstrap类输出它们：

{% include '_header.twig' %} <h1>News</h1> <p class="lead">View all the news articles here.</p> <hr> {% setcontent news = 'news' %} {% for newsitem in news %} <article class="media"> <div class="media-left"> <a href="#"> <img src="{{ image(newsitem.image) }}" alt="{{ newsitem.title }}"> </a> </div> <div class="media-body"> <h2 class="media-heading">{{ newsitem.title }}</h2> <p class="media-excerpt">{{ newsitem.excerpt }}</p> <a href="#" class="btn btn-primary btn-sm">Read Full Article</a> </div> </article> {% endfor %} <hr> pagination {% include '_footer.twig' %}

Notice how we fetched the content based on the field names defined in the contenttype configuration. It doesn’t get much easier than that. We haven’t included any links to single news items just yet though. Let’s do that now. Bolt offers a helper function to fetch the link to the contenttype’s single record. We can use it and implement it like this:

请注意，我们如何根据contenttype配置中定义的字段名称获取内容。没有比这容易的多了。到目前为止，我们还没有包含任何指向单个新闻项的链接。现在开始吧。 Bolt提供了一个帮助程序功能来获取内容类型的单个记录的链接。我们可以使用它并像这样实现它：

We can now update all our href attributes in the loop to have working links to each single record. Here’s a screenshot of what the listing should look like by now.

现在，我们可以更新循环中的所有href属性，以具有指向每个记录的有效链接。这是该列表现在的样子的屏幕截图。

Before we develop the single news item template though, let’s page our records.

在开发单个新闻项目模板之前，让我们分页记录。

分页记录 (Paging The Records)

Paging records does not get any easier than this. No more confusing functions that break depending on your URL structure, nothing of the sort. In our template file, we first want to limit the number of news items per page to 5. Then, we want to output pagination links. To start with, we’ll need to update the setcontent tag to reflect our needs:

分页记录没有比这更容易的了。不再因您的URL结构而中断令人困惑的功能，这几乎没有。在我们的模板文件中，我们首先要限制每页新闻的数量为5。然后，我们要输出分页链接。首先，我们需要更新setcontent标记以反映我们的需求：

{% setcontent news = 'news/latest/5' allowpaging %}

Down below in our template, we can use the pager tag to output the pagination links. With the changes implemented, our template should now resemble this:

在模板的下面，我们可以使用pager标签输出分页链接。实施更改后，我们的模板现在应类似于以下内容：

{% setcontent news = 'news/latest/5' allowpaging %} {% for newsitem in news %}  {% endfor %} {{ pager() }}

Luckily for us, Bootstrap’s pagination styles play nicely with the HTML that’s output from Bolt’s pager function, so if all was successful, you should have a simple, working pagination output. Here’s a screenshot of the pagination in action.

对我们来说幸运的是，Bootstrap的分页样式可以与Bolt的pager功能输出HTML很好地配合使用，因此，如果一切顺利，则应该有一个简单而有效的分页输出。这是分页进行中的屏幕截图。

Simple, and beautiful. Let’s move on.

简单，美观。让我们继续。

检索和输出单个记录 (Retrieving & Outputting A Single Record)

By now, you should be getting the hang of the way Bolt runs. You’d be right then to assume that we need to create a newsitem.twig file in our theme directory. If you remember correctly, this is the file we specified in the contenttype configuration. Let’s create that, and pull in our partials like before:

到现在为止，您应该已经掌握了Bolt运行的方式。假设您需要在主题目录中创建newsitem.twig文件，这是对的。如果您没有记错的话，这就是我们在contenttype配置中指定的文件。让我们创建它，然后像以前一样拉入我们的局部函数：

{% include '_header.twig' %} {% include '_footer.twig' %}

Before, I mentioned that certain variables are available by default in record or listing templates. Since we’re viewing a single record here, we have the {{ record }} variable available to us. With that in mind, we don’t need to use the setcontent tag, because it’s already accessible. We can extract the data we need very easily, and output it into our template. Using some Bootstrap classes and a touch of inline CSS for the sake of efficiency, here’s what I came up with:

之前，我提到记录或列表模板中默认情况下某些变量可用。由于我们在此处查看单个记录，因此我们可以使用{{ record }}变量。考虑到这一点，我们不需要使用setcontent标记，因为它已经可以访问了。我们可以非常轻松地提取所需的数据，并将其输出到模板中。为了提高效率，使用一些Bootstrap类和一些内联CSS，这是我想到的：

Head to the browser, and navigate to any of your news articles. You should now see them being displayed in a consistent manner, in accordance with your template. Awesome! How easy was that? Check out the screenshot below for a visual of the single record listing.

转到浏览器，然后导航到您的任何新闻文章。现在，您应该看到根据模板以一致的方式显示它们。太棒了！那有多容易？请查看下面的屏幕快照，以查看单个记录列表。

We have one final piece of the puzzle to solve, and you guessed it, it’s a breeze.

我们有最后一个难题需要解决，您猜对了，这很容易。

添加上一个和下一个链接 (Adding Previous & Next Links)

Adding previous and next links to your news articles is probably something you’ll want to do. It encourages users to continue clicking through your site, ultimately engaging them easily in more content and keeping them around longer. Before we jump in, let’s set up a quick navigation section below our article for previous and next links. Again, I’ll use some Bootstrap styles to make it look nice. Here’s the edited template:

在新闻文章中添加上一个和下一个链接可能是您想要做的。它鼓励用户继续点击您的网站，最终使他们轻松参与更多内容的开发，并使他们停留的时间更长。在开始之前，让我们在文章下方设置一个快速导航部分，以获取上一个和下一个链接。同样，我将使用一些Bootstrap样式使它看起来不错。这是编辑后的模板：

{% include '_header.twig' %} <article>  </article> <hr> <nav class="row"> <div class="col-md-6"> <a href="#">Previous</a> </div> <div class="col-md-6 text-right"> <a href="#">Next</a> </div> </nav> {% include '_footer.twig' %}

Now we need to fetch those links. Bolt, as you may have guessed, offers functions to fetch previous and next records out of the box. All we have to do is this:

现在我们需要获取这些链接。您可能已经猜到了，Bolt提供了一些功能，可以立即获取上一个和下一个记录。我们要做的就是：

{% set prev = record.previous() %} {% set next = record.next() %}

This now gives us full access to the previous and next records’ content. As a result, we can update our navigation to output the links like this:

现在，我们可以完全访问上一条和下一条记录的内容。结果，我们可以更新导航以输出如下链接：

<nav class="row"> <div class="col-md-6"> <a href="{{ prev.link }}">« {{ prev.title }}</a> </div> <div class="col-md-6 text-right"> <a href="{{ next.link }}">{{ next.title }} »</a> </div> </nav>

We’re so close to completion, but we have one important thing to consider. On the first news item page, there will be no “next” record. Likewise, on the last one, there will be no previous record. Let’s just run a condition to check for this:

我们是如此接近完成，但是我们有一件重要的事情要考虑。在第一个新闻项页面上，将没有“下一个”记录。同样，在最后一个记录上，将没有以前的记录。让我们运行一个条件来检查一下：

<nav class="row"> <div class="col-md-6"> {% if (prev) %} <a href="{{ prev.link }}">« {{ prev.title }}</a> {% endif %} </div> <div class="col-md-6 text-right"> {% if (next) %} <a href="{{ next.link }}">{{ next.title }} »</a> {% endif %} </div> </nav>

For the sake of completion, and showing off the ease in which we can develop templates and output content with Bolt, here’s the final newsitem.twig template:

为了完整起见，并展示了我们可以轻松使用Bolt开发模板和输出内容的简便性，这里是最终的newsitem.twig模板：

{% include '_header.twig' %} <article> <header class="article__header"> <h1>{{ record.title }}</h1> <p class="lead">{{ record.excerpt }}</p> <hr> </header> <div class="article__body"> <img src="{{ image(record.image) }}" alt="{{ record.title }}" class="pull-left" width="120" height="120" style="margin-right: 12px;"> {{ record.body }} </div> </article> <hr> {% set prev = record.previous() %} {% set next = record.next() %} <nav class="row"> <div class="col-md-6"> {% if (prev) %} <a href="{{ prev.link }}">« {{ prev.title }}</a> {% endif %} </div> <div class="col-md-6 text-right"> {% if (next) %} <a href="{{ next.link }}">{{ next.title }} »</a> {% endif %} </div> </nav> {% include '_footer.twig' %}

Nice. We should be able to navigate through all our news articles now using the previous and next links. Here’s a screenshot of the previous and next links in action.

真好现在，我们应该能够使用上一个和下一个链接浏览所有新闻文章。这是运行中的上一个和下一个链接的屏幕截图。

结语 (Wrapping Up)

As the web continues to evolve in size, scope, complexity, and viewership, efficiency and speed play larger roles. We have to make an effort to strip away excess bloat as much as possible in order to keep our applications trim and lean. Aside from being a lightweight and solid CMS that lets you dictate the flow and operation of your site, Bolt also offers front-end and back-end developers a smooth, easy workflow when developing themes, contenttypes, and more. In this tutorial, we’ve seen how quickly and easily we can set up and access content just the way we want to. Before you begin your next project, ask yourself seriously if the need for a powerhouse feature-rich CMS is really necessary, or if you can keep it light with Bolt. Personally, I highly endorse Bolt, and am using it on all current personal projects that warrant a CMS. Feedback? Comments? Let us know!

随着网络规模，范围，复杂性和收视率的不断发展，效率和速度将发挥更大的作用。为了保持应用程序的整洁和精简，我们必须努力消除过多的膨胀。除了是一个轻量级的，坚固的CMS，它可以让您决定网站的流程和操作之外，Bolt在开发主题，内容类型等时，还为前端和后端开发人员提供了流畅，简单的工作流程。在本教程中，我们看到了可以按照所需方式快速轻松地设置和访问内容。在开始下一个项目之前，请认真问问自己，是否真的有必要使用功能强大的强大CMS，或者是否可以通过Bolt轻松解决这个问题。我个人非常支持Bolt，并将其用于所有当前需要CMS的个人项目中。反馈？注释？让我们知道！

翻译自: https://www.sitepoint.com/record-retrieval-pagination-bolt-cms/

spout 和bolt关系

最新回复(0)