程序猿超级欣 - 使用 Craft CMS 搭建blog模型

使用 Craft CMS 搭建blog模型

2017-07-18

CraftCMS

Craft CMS站点的搭建可以参考这篇：[使用Docker镜像服务来搭建 craft cms 站点](/Coding/Details/setup-craftcms-using-docker)

# Template功能简介

使用Template，可以自定义网站的呈现样式。

Template的保存位置在：craft/templates，可以在此目录下任意建立template，或者文件夹+Template，假如现在有Template：craft/templates/news/index.html，则此Template对应的url为：http://ip/news/。

要注意的是，Craft 的Template使用的是twig，且不允许直接使用php代码，关于twig，可以参考：[Twig Primer](https://craftcms.com/docs/twig-primer)。

# 创建field

blog需要的栏位：Title, Body, Tag, Published, PublishDate：

![](http://cdn.supperxin.com/images/upload/2017/7/ece1f056-1a51-4a04-9544-5414a0bb182f.jpg)

# 创建Section

创建名为Blog的section，并将如下选项去除： Entries in this section have their own URLs

![](http://cdn.supperxin.com/images/upload/2017/7/1298ca06-08b7-45f5-81b8-4c27fa89a935.jpg)

# 添加field到section

编辑section的Entry Types，将之前添加的栏位全部添加进来。

![](http://cdn.supperxin.com/images/upload/2017/7/ec7c90ed-aeaf-4c8a-a37f-4846039d00ae.jpg)

# 添加template

在template目录下，新建blog目录，建立文件：

index.html，用于呈现blog列表，内容如下：

```php
{% set blogs = craft.entries.section('blog') %}

{% extends "_layout" %}

{% block content %}
<main role="main">

  <section class="content">
    <ul class="download-links">
        {% for blog in blogs %}
            <li><a href="/blog/{{blog.slug}}">{{blog.title}}</a></li>
        {% endfor %}
    </ul>
  </section>
</main>
{% endblock %}
```

details.html，用于呈现blog内容，内容如下：

```php
{% set blog = craft.entries.section('blog').slug(craft.request.lastSegment).first %}

{% extends "_layout" %}

{% block content %}
<main role="main">
  <section class="content">
    <h1>{{blog.title}}</h1>
    <p>{{blog.body}}</p>
  </section>
</main>
{% endblock %}
```

# 为blog配置route

在route中添加：blog/slug --> blog/details的映射关系，这样就可以通过/blog/slug来访问一篇具体的blog。

![](http://cdn.supperxin.com/images/upload/2017/7/91daf7a8-9056-416e-b2e4-8cd26a06248f.jpg)

# 最终的呈现效果如下：

![](http://cdn.supperxin.com/images/upload/2017/7/d0b41486-ac99-4dcf-8351-96456517569b.jpg)

![](http://cdn.supperxin.com/images/upload/2017/7/ff3147d3-5f69-4a4f-90c1-2154e83360b4.jpg)

# 参考：

* [Templating Overview](https://craftcms.com/docs/templating-overview)

本文为博主原创，如需转载，请注明出处：http://www.supperxin.com

返回博客列表