关于page--front.html.twig的详细解释

By chenyi, 3 June, 2024

Forums

{#
/**
* @file
* Theme override to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
*   "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
*   administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
*   linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - messages: Status and error messages. Should be displayed prominently.
* - node: Fully loaded node, if there is an automatically-loaded node
*   associated with the page and the node ID is the second argument in the
*   page's path (e.g. node/12345 and node/12345/revisions, but not
*   comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer: Items for the footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}

{% if logged_in %}

{% set btn_text = 'My account' %}

{% else %}

{% set btn_text = 'Login/Create new account' %}

{% endif %}

</svg>

</a>

</div>

</div>

</header>

<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

<p class="display-4">Torreya grandis is endemic to eastern and south-eastern China; it is found in the coastal provinces Fujian, Zhejiang, and Jiangsu, as well as in Anhui, Guizhou, Hunan, and Jiangxi inland.</p>

<p>Its natural habitat are mountains and open valleys, often by streams, between 200–1,400 metres ASL. </p>

<a href="/user" class="btn btn-info">Contribute Data</a>

</div>

</div>

<h3>Welcome to TorreyaAtlas!</h3>

<p> One common name is Chinese nutmeg yew, which refers to its edible seeds that superficially resemble nutmeg and its yew-like foliage.</p>

</div>

</div>

</div>{# /.layout-content #}

</main>

</footer>

</div>{# /.layo47ut-container #}

47-55行：

最上面，即注释结束之后，是一个if else的判断，判断条件是logged in。这个变量我们之前已经讲过了，他用于判断用户是否注册并登陆网站。如果登陆了，将btn text的值设置为“我的账户”，如果没有登陆则设置为“登陆、注册”。这里的btn text是一个新声明的变量，意思是按钮上的文字。

49行：

注意这里是用set命令来实现为变量赋值。赋值之后，你可以像使用其它变量一样的方式来使用这个变量，比如用双大括号把它打印出来：{{ btn_text }}

第60行：

然后接着我们输出header区域，在我们之前对区域和区块的设置中，目前这个区域没有任何东西，所以是空的。

第63行：

接着是2个等宽的div，每个占用bootstrap中的6栏，即class="col-sm-6”（第63和78行）。第一个的div里面是一个svg图片，也就是我们的logo，并且这个logo是可以点击的一个link，因此被包含在a标签中，其href属性被直接设置为”/”，使得链接指向网站的首页。

第78行:

第二个div中是另一个link，并且这个link是一个button也就是按钮。按钮的文字是我们之前在if判断中设置的文字。这里的一个细节是，无论你是否登录，href="/user"

这个属性都会将你带到相应的页面上，如果没有登录则跳转至登录页面，要求用户输入账号和密码来登录。如果已经登录了，则跳转到用户账户页面，会显示用户名称、注册时间以及一些操作链接。因为模板开头的if判断，在两种情况下，按钮上所显示的文字是不同的。

第88-94行：

然后这里是首页的一个大背景全屏区域

接着下面分两边，一边是主内容区域（第100-102行），占据7栏（col-md-7），一边是侧边栏（第104-114行），占据5栏（col-md-5）。

第123-126行

最后打印footer区域（第124行）。因为，我们的footer区域也是空的，因此，我们没有像原始文件那样添加if判断语句，不然下面那行语句（第125行）就打印不出来了。

精华部分，即：

设计页面。
把设计的页面写成静态页面（包括，html、css和js）
然后用drupal规定的方式引入css和js
再通过模板覆写将html搬到相应的模板文件中，并在这个过程中灵活使用drupal为你提供的各种功能、方法和变量去替换原始静态页面中的文字内容。