网站视图页面

网站视图页面是为网站访客提供的服务器渲染页面。

我们一直在使用Desk，这是系统用户可以访问的管理界面。通常，您会希望对客户的限制访问。在我们的例子中，我们希望图书馆成员能够从我们的网站查看他们可以借阅的文章。网站视图页面可以帮助我们实现这一点。

转到文章（Article）DocType，并滚动到网站视图部分。

1. 启用有网站视图和允许访客查看
2. 在路由字段中输入articles
3. 在字段表中添加名为Route和Published的字段
4. 点击保存

已发布字段将帮助过滤出不应在网站视图中显示的文档，否则您会遇到错误。

现在，我们已经为文章（Article）DocType启用了网站视图。这意味着您现在可以在不登录Desk的情况下，在网站上查看文章的详细信息。让我们通过创建一个新文章来测试一下。您应该在表单的左上角看到在网站查看。点击它以查看文章的网站视图。

自定义网站视图模板

生成的默认网站视图非常基础，只作为我们自定义的起点。当我们将文章设为网站视图时，创建了两个HTML文件：article.html 和 article_row.html

让我们先编辑 article.html。Frappe默认使用Bootstrap 4来构建网站视图。因此，您可以使用任何有效的Bootstrap 4标记来样式化您的页面。将以下HTML添加到 article.html。

{%  extends "templates/web.html" %}

{% block page_content %}

<div class="py-20 row">
<div class="col-sm-2">
<img alt="{{ title }}" src="{{ image }}"/>
</div>
<div class="col">
<h1>{{ title }}</h1>
<p class="lead">By {{ author }}</p>
<div>

            {%- if status == 'Available' -%}

            <span class="badge badge-success">可用</span>
            {%- elif status == 'Issued' -%}

            <span class="badge badge-primary">已借出</span>

            {%- endif -%}

        </div>
<div class="mt-4">
<div>出版社：<strong>{{ publisher }}</strong></div>
<div>ISBN：<strong>{{ isbn }}</strong></div>
</div>
<p>{{ description }}</p>
</div>
</div>

{% endblock %}

现在，转到任何文章并点击在网站查看。如果您已经填写了文章的所有字段，您应该会看到像这样的页面：

现在，打开 http://library.test:8000/articles。这应该会显示文章列表，但也非常基础。让我们自定义HTML。

编辑 article_row.html 并添加以下HTML：

<div class="py-8 row">
<div class="col-sm-1">
<img alt="{{ doc.name }}" src="{{ doc.image }}"/>
</div>
<div class="col">
<a class="font-size-lg" href="{{ doc.route }}">{{ doc.name }}</a>
<p class="text-muted">By {{ doc.author }}</p>
</div>
</div>

现在，文章列表应该看起来更漂亮了。您可以点击任何文章来查看它的详细信息。

到目前为止，您已经很好地跟随了本教程。

接下来： 接下来做什么.md