构建你的第一个Sell应用程序-第2部分:设计用户界面

中的默认代码可以从清理开始iframe.html．

1. 开放iframe.html文本编辑器中替换< h2 >标签，并附上以下HTML:

                  
   
                   
   <h2>新领导为该组织h2><ul><李><一个href＝＂＂目标＝＂平等自愿＂>引领一个一个>李><李><一个href＝＂＂目标＝＂平等自愿＂>引领两个一个>李>ul>
                  

   目前，HTML包含占位符值。这些值与模型不匹配也没关系。您将在后面的教程中更新应用程序以使用实时数据。

2. 创建一个名为main.js在资产文件夹中。亚博电脑端HTML、JavaScript、CSS和图像文件等资源必须位于资产文件夹中。

3. 添加如下功能到main.js：

                  
   
                   
   （函数（）｛常量客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度：“100%”，高度：“150 px”｝）；｝）（）；
                  

   的(function(){…})();语句定义一个匿名的自调用函数。该函数在文档加载到浏览器后运行。函数的两个语句类似于< >脚本标签iframe.html．

4. 在iframe.html，删除以下内容< >脚本标签:

                  
   
                   
   <脚本>//初始化app框架客户端。参见:/ / https://developer亚博.zendesk.com/apps/docs/developer-guide/getting_startedvar客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度：“100%”，高度：“200 px”｝）；脚本>
                  

5. 将其替换为以下内容< >脚本标记，以导入main.js文件:

                  
   
                   
   <脚本src＝＂main.js＂>脚本>
                  

   插入标签后的< >脚本引用ZAF SDK的标记。这确保SDK在之前加载main.js运行。

   的<身体>标签的iframe.html现在应该是这样的:

                  
   
                   
   <身体><h2>新领导为该组织h2><ul><李><一个href＝＂＂目标＝“平等”>引领一个一个>李><李><一个href＝＂＂目标＝“平等”>引领两个一个>李>ul><脚本src＝＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本><脚本src＝＂main.js＂>脚本>身体>
                  

6. 保存iframe.html而且main.js．要查看更改，请单击应用程序上方的刷新图标。

   

添加页脚

根据模型，页脚应该显示一个报告错误链接。这个链接允许用户报告应用程序的错误。

添加页脚链接

1. 在iframe.html文件中，在脚本标签之前添加下面的页脚标签:

                  
   
                   
   <页脚><一个href＝＂https://example.com/support＂目标＝＂平等自愿＂>报告错误一个>页脚>
                  

2. 保存iframe.html然后单击刷新图标。

   

在模型中，页脚文本较小。在下一步中，您将添加一些CSS样式的页脚和应用程序UI的其他部分。

添加样式

默认情况下，ZCLI导入Zendesk Garden样亚博式表iframe.html：

             

              
<链接rel＝＂样式表＂href＝＂https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/<一个href＝＂https://developer.zendesk.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfeeeeeb0fff8f9eff2fef6dde5b3e4b3e7">(电子邮件保护)，npm亚博/ @zendeskgarden /<一个href＝＂https://developer.zendesk.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7c6c6c326a6b7673766b767a6c5f6731663165">(电子邮件保护)＂>
             

亚博Zendesk花园设计为所有Zendesk产品之间的样式和组件的公共基线。亚博上面的默认链接不包括所有Zendesk Garden资产，只包括Garden组件CSS亚博和CSS实用程序。您可以从jsDelivr CDN中获得可以导入的资产的完整列表。看到<一个href＝＂https://www.jsdelivr.com/?query=亚博zendeskgarden＂>https://www.jsdelivr.com/?query=亚博zendeskgarden．jsDelivr文件是npm包，也可以从<一个href＝＂https://www.npmjs.com/">npm．看到<一个href＝＂https://www.npmjs.com/search?q=亚博zendeskgarden＂>https://www.npmjs.com/search?q=亚博zendeskgarden．

改变logo

默认情况下，框架显示一个名为logo-small.png在你的资产文件夹中。如果要更改应用程序的logo，请替换logo-small.png在资产文件夹与您自己的图像。

你的替换logo-small.png文件应符合以下规格:

• 大小: 128x128像素。CSS将缩放图像以适应标题。同样的图像也将在Zendesk Sell UI中使用，并相应地缩放。亚博<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-gsWcmt jwhztf bMtobU">文件格式:透明的PNG-24。<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-gsWcmt jwhztf bMtobU">边境:没有。角将被CSS圆角化。

的资产文件夹还包括logo.png的形象。将此图像替换为320x320版本的logo。Zend亚博esk市场将显示这个版本的标志。销售管理员可以使用Zendesk Marketp亚博lace浏览要安装的公共或私人应用程序。

更换logo

1. 右键单击以下每个图像链接，并将它们下载到资产文件夹在你的应用程序文件夹。如果出现提示，则同意替换文件的现有版本。

   • ［<一个href＝＂https://zen-marketing-documentation.s3.amazonaws.com/docs/en/related_leads/logo-small.png">logo-small.png］<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-gsWcmt jwhztf bMtobU">［<一个href＝＂https://zen-marketing-documentation.s3.amazonaws.com/docs/en/related_leads/logo.png">logo.png］
   <李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-GvhzO jwhztf ftmEEP">

   单击刷新图标。

   如果没有显示更新后的图像，则需要对页面进行硬刷新。参见<一个href＝＂https://support.mozilla.org/en-US/kb/how-clear-firefox-cache">火狐或<一个href＝＂https://support.google.com/accounts/answer/32050">铬在他们各自的网站上。还可以将页面URL粘贴到另一个浏览器中。

   

如果要转到下一个教程，可以让ZCLI服务器继续运行。如果完成了这个会话，可以切换到命令行界面并按Ctrl+C来关闭服务器。

在下一篇教程中，您将创建模板，在应用程序中显示销售线索和其他数据。继续<一个href＝＂https://developer.zendesk.com/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/">第3部分:创建和插入模板．