Power Apps Portals 中提供了很多配置功能,可以让我们制作出功能强大的 Portals 网站。但我们无法直接通过后端 http:// ASP.NET 来开发自己的页面模板。此时如果希望开发页面模板,就需要使用 Liquid 。
Liquid 可以让我们在 Power Apps Portals 中自定义网页模板,也可以在网页的内容片段中使用,还可以嵌入到 JavaScript 中。他的代码是在服务器端执行的,这意味着我们编写的代码逻辑会在页面呈现之前运行。
Liquid 的强大之处在于提供了一种在网页上显示动态数据的方法,这个功能最早是在 Adxtudio v7 中引入的,同时也是原先 Dynamics 365 Portals 的核心自定义功能。
我们今天学习什么?
在这篇文章中,我们将学习以下内容:
基础概念
Web Template
Web Teamplate 是我们用来编写代码的地方,包括 HTML , CSS , JS 和 Liquid 都需要在 Web Template 中编写。
Web Page 网站页面
网站页面就是我们最终在网站中的页面。我们可以通过导航或者 URL 来访问网站页面,但是网站页面本身和 Web Template 没有直接关系。
Page Template
Page Template 就可以将 Web Template 和 网站页面关联在一起。只需要我们将 Page Template 的类型选择为【Web Template】,然后指定所需要的 Web Template 即可。
一个 Page Template 可以在多个网站页面中重复使用,比如 Portals 默认提供的 Full Page 模板就应用在 Portals 的各种页面上。
在讲 Liquid 之前,我们先来看下我们之前做的网站底层到底是什么结构构成的。
在门户管理中找到网页,点击进入到主页当中。
在这里可以看到我们的主页使用的页面模板叫做 Default Studio Template 。
那我们进入到页面模板,看一下这个 Default Studio Template 。
可以看到它使用了一个叫做 Default Studio Template 的 Web 模板。
那我们最后在 Web 模板中找到 Default Studio Template ,就可以看到网页模板最原始的样子就是一个div ,而 div 里面的语法就是 Liquid ,这里是通过 Liquid 语法 include 引入了另外一个叫做 Page Copy 的 Web 模板。 从而将 Page Copy 模板的内容加载到 Default studio template 中。
而在 Page Copy 中则是通过 editable 让一个叫做 adx_copy 的页面呈现出 HTML 的格式并让拥有编辑权限的用户可以对齐进行编辑。
我们浏览网站,通过 F12 进入开发者模式,可以看到主页的源代码中除了顶部和下方的区域外,中间的内容都是包含在 mainContent 中。
那顶部和底部区域又是在哪里定义的呢?
我们在门户管理应用的网站中可以看到,当前网站分别配置了页眉模板和页脚模板。
而对应的 Header 和 Footer 也同样是通过 Web Template 来构建的。 这些 Template 中同样包含了 Liquid 和 HTML 代码。
由此我们可以看出 Liquid 代码可以用来动态渲染页面内容,而 Liquid 代码是写在 Web 模板上的。
创建 Web Template
既然要学习 Liquid ,那就需要先去创建 Web Template。
在门户管理应用,点击左侧导航【Web Template】,这里可以看到我们所有门户中的网页模板。
里面的每个网页模板都是通过 Liquid 编写的内容,这些模板也是很好的学习参考。
我们给新建的网页模板起一个名字,因为这是我们第一篇 Liquid 教程,所以网页模板的名字就叫 Hello World。
在 Source 里就可以写我们的 Liquid 代码了。
Liquid 的语法很简单,通过{%%}可以来写 Liquid 标签,比如下图中的条件判断就是{%if user%} 来判断用户是否登陆。
接着第二行我们写的就是如果用户存在那么显示的内容就是 Hello + 用户名,这里是通过{{}}来引用的 Liquid 对象。
(后面的文章会详细介绍 Liquid 的编写方式)
保存 Web Template ,
创建 Page Template
为了在网页中使用我们刚刚制作的 Web Template ,我们还需要创建一个 Page Template 。
在 Page Template 中,我们需要指定Type 为【Web Template】,并将我们之前创建的 Web Template 【Hello World】进行赋值。
保存以后,我们回到 Portals 的编辑界面。
在页面中使用 Page Template
此时我们新建页面的时候,就可以选择刚刚创建的 Page Template 页面模板 【Hello World】
创建页面后,我们浏览网站。
没有登陆时,页面上显示的就是 Hello 朋友。
登陆后显示的就是 Hello username
总结
这就是一个最简单的 Liquid 用法,通过本篇文章我们知道 Liquid 可以显示动态内容,并且带有逻辑语法。
Liquid 本身需要在 Web Template 中编写,网页中如果想要使用 Web Template 还需要借助 Page Template 。