Experience League

退出搜尋

Experience Cloud

Document Cloud

格式

JavaScript範本

JavaScript範本是包含JavaScript程式碼的HTML或文字檔案。其建構方式與傳送動作中的電子郵件內容相同。

JavaScript範本的識別

JavaScript範本的名稱和名稱空間與結構描述和表單一樣可識別。不過，建議將.js選項新增至範本名稱。

JavaScript範本的結構

以「cus:book」架構為基礎的JavaScript HTML格式範本範例：

<html>
  <body>
    <!-- Title of book -->
    <h1><%= content.@name %></h1>
    <ul>
      <% for each(var chapter in content.chapter) { %>
        <li><%= chapter.@name %></li>
      <% }%>
    </ul>
  </body>
</html>

各種JavaScript指令會以下列格式顯示：

合併欄位：以<%= <source> %>語法顯示資料內容，其中<source>是要顯示資料的源欄位。
指令塊：執行<%和%>標籤之間包含的一系列JavaScript指示。

content物件代表輸入XML檔案的主要元素。

在我們的範例中，下列行顯示名稱手冊名稱的內容：

<h1><%= content.@name %></h1>

下列程式碼會重複<chapter>系列元素：

<% for each(var chapter in content.chapter) { %>
  <li><%= chapter.@name %></li>
<% }%>

內容的屬性和元素會以JavaScript物件來表示，並尊重來源檔案的結構。

範例:

內容。@name:檢索主要元素的"name"屬性的值
內容。@['name']:與內容相同。@name語法
content.chapter.length:返回收集元素上的元 <chapter 素數
content.chapter[0]。@name:檢索第一個<chapter>元素的名稱
chapter.name():返回元素的名 <chapter> 稱
chapter.parent()。name():傳回的父元素名稱 <chapter>

注意

由於'-'字元是以JavaScript語言保留，因此必須透過['<field>']語法來復原包含此字元的任何屬性或元素的值。

例如：content.@['offer-id']。

程式設計語言（變數、回圈、條件測試、函式等）的全部功能。 )可用於構建輸出文檔。 SOAP API可供存取，讓輸出檔案更豐富。

範例:

條件測試：

<% if (content.@number == 1 || content.@language == 'en') { %>
<!-- Content to be displayed if test is true--> 
<% } %>

函式呼叫：

<!-- Displays a horizontal bar -->
;<% function DisplayHorizontalBar() { %>
  <hr/>
<% } %> 

<!-- The same function in a block  -->
<% 
function DisplayHorizontalBar2()
{
  document.write('<hr/>');
}
%> 

<!-- Returns the value in uppercase -->
<% 
function formatName(value)
{ 
  return value.toUpperCase(); 
}
%>

<!-- Call functions -->
<%= DisplayHorizontalBar1() %>
<%= DisplayHorizontalBar2() %>
<%= formatName(content.@name) %>

聲明和變數呼叫：

<%  var counter = 0; %>

<%= counter += 10 %>

使用靜態方法擷取和顯示收件者名稱：

<% var recipient = nms.recipient.get(1246); %>
<%= recipient.lastName %>

使用非靜態方法恢復和顯示收件者名稱：

<% var query = xtk.queryDef.create(
  <queryDef schema="nms:recipient" operation="get">
    <select>
      <node expr="@lastName"/>
    </select>
    <where>
      <condition expr="@id=1246"/>
    </where>
  </queryDef>);

  var recipient = query.ExecuteQuery();
%>

<%= recipient.@lastName %>

包含JavaScript範本

您可以組成函式或變數的程式庫，以供日後使用。若要這麼做，請匯入具有eval函式的JavaScript範本。這可讓您運用其他JavaScript範本中宣告的其他函式來豐富內容。

範例:導入 common. jsptemplate。

<% eval(xtk.javascript.get("cus:common.js").data);  %>

編輯JavaScript範本

編輯區可讓您填入JavaScript範本的內容：

注意

必須填入關聯的資料模型架構，才能初始化JavaScript物件。

要隨時生成輸出文檔的預覽，請選擇內容和輸出格式(HTML、Text、XML)，然後按一下Generate :

注意

不必保存更改即可預覽輸出文檔。

如何建立和使用JavaScript範本的範例

以下是使用JavaScript範本實作下列內容管理所需的設定：

此範例包含下列步驟：

建立以下模式(在本例中為：neo:news:

<srcSchema _cs="Invitation (neo)"   entitySchema="xtk:srcSchema" img="xtk:schema.png" label="Invitation" mappingType="sql" name="news" namespace="neo" xtkschema="xtk:srcSchema">

  <enumeration basetype="string" default="en" name="language">
    <value label="Français" name="fr" value="fr"/>
    <value label="English" name="gb" value="gb"/>
  </enumeration>

  <enumeration basetype="string" name="css">
    <value label="Blue" name="bl" value="blue"/>
    <value label="Orange" name="or" value="orange"/>
  </enumeration>

  <element label="Intervenants" name="attendee">
    <key internal="true" name="id">
      <keyfield xpath="@id"/>
    </key>
    <attribute label="Name" name="name" type="string"/>
    <element label="Image" name="image" target="xtk:fileRes" type="link"/>
    <attribute label="Description" name="description" type="string"/>
    <attribute default="Gid()" label="Id" name="id" type="long"/>
  </element>

  <element label="Invitation" name="news" template="ncm:content" xmlChildren="true">

    <compute-string expr="@name"/>
    <attribute enum="language" label="Language" name="language" type="string"/>
    <attribute enum="css" label="Stylesheet" name="css" type="string"/>
    <attribute label="Title" name="title" type="string"/>
    <element label="Presentation" name="presentation" type="html"/>
    <attribute label="Date" name="date" type="date"/>
    <element label="Attendees list" name="attendeesList" ordered="true" ref="attendee" unbound="true"/>

  </element>
</srcSchema>

建立連結的Content management類型表單(neo:news)

<form _cs="News (neo)" entitySchema="xtk:form"  img="xtk:form.png" label="News"  name="news" namespace="neo" type="contentForm" xtkschema="xtk:form">

  <container type="iconbox">
    <container label="Invitation">
      <input xpath="@langue"/>
      <input xpath="@css"/>
      <input xpath="@title"/>
      <input xpath="@date"/>
      <input xpath="presentation"/>
    </container>

    <container label="Intervenants">
      <container toolbarCaption="Liste des intervenants" type="notebooklist" xpath="attendeesList" xpath-label="@nom">
        <container>
          <input xpath="@nom"/>
          <input img="nl:sryimage.png" newEntityFormChoice="true" xpath="image">
            <sysFilter>
              <condition expr="@isImage = true"/>
            </sysFilter>
          </input>
          <input xpath="@description"/>
        </container>
      </container>
    </container>
  </container>

</form>

使用HTML和文字格式的訊息內容建立JavaScript範本。

在我們的範例中，針對HTML:

<html>     
  <head>         
    <title>Newsletter</title>
     <style type="text/css">
      .body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#514c48; margin-left: auto; margin-right: auto;}
      .body table {width:748; border: solid 1px; cellpadding:0; cellspacing:0"}
     </style>
  </head>     
  <body>
    <p><center><%= mirrorPage %></center></p>
    <center>
      <table>      
       <tr>
        <td>                                                         
          <img src="[LOGO]"/>                                   
        </td>
        <td>
          <h1><%= content.@title %></h1>
        </td>
       </tr>
       <tr>

       <td>
        <div >                                    
          <h0><%= hello,</h0>                              
          <p><%= content.presentation %></p>                                          

          <h0>Useful information</h0>                              
          <p>                                  
            <img src="[IMAGE 1]"/>When? <br/><%= formatDate(content.@date, "%2D %Bl %4Y") %> From 10 AM in your bookshop.</p><br/>                                       
          <p>                                  
            <img src="[IMAGE 2]"/>Who? <br>Meet our favorite authors and illustrators and get a signed copy of their book.</p><br/>                                                         
          <p>                                  
            <img src="[IMAGE 3]"/>Attendance is free but there is a limited number of seats: sign up now!</p>
      </div>
      </td>

        <td>                                                    
         <div style="text-align:left; width:210; height:400px; background:url([IMAGE DE FOND])">

            <h0><%= participant %></h0>
            <%
            var i
            var iLength = content.attendeesList.length()
            for (i=0; i<iLength; i++)
            { %>
            <p>
              <%= generateImgTag(content.attendeesList[i].@["image-id"]) %>  <%= content.attendeesList[i].@description %>
            </p>  
            <% }  
            %>                              
         </div2>
        </td>
    </tr>
  </table>
</center>
</body>    
</html>

對於文本：

<%= content.@title %>
<%= content.presentation %>

*** When? On <%= formatDate(content.@date, "%2D %Bl %4Y") %> From 10 AM in your bookshop.

*** Who? Come and meet our favorite authors and illustrators and get a signed copy of their books. 

*** Attendance is free but there is a limited number of seats: sign up now!

Guests:
******************
<%
var i
var iLength = content.attendeesList.length()
//for (i=(iLength-1); i>-1; i--)
for( i=0 ; i<iLength ; i++ )
  { %>
  Description <%= i %> : <%= content.attendeesList[i].@description %>
  <% }  
%>

現在，請建立用於兩種格式的出版物範本：
- HTML:
- 對於文本：
然後，您可以在傳送中使用此內容範本。

有關詳細資訊，請參閱使用內容模板。

XSL樣式表

XSLT語言可讓您將XML檔案變更為輸出檔案。根據樣式表的輸出方法，可以在HTML、純文字檔案或其他XML樹中生成生成的文檔。

此轉換在XML中，又在稱為樣式表的文檔中詳細介紹。

標識樣式表

樣式表由其名稱和名稱空間標識，與模式和表單一樣。不過，建議您將.xsl副檔名新增至樣式表的名稱。

樣式表的標識鍵是由命名空間和名稱以冒號分隔的字串；例如：cus:book.xsl。

樣式表的結構

HTML格式樣式表的示例基於模式"cus:book":

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output encoding="ISO-8859-1" method="html"/>
  <!-- Point of entry of the stylesheet -->
  <xsl:template match="/book">
    <html>
      <body>
        <!-- Book title -->
        <h1><xsl:value-of select="@name"/></h1>
        <lu>
          <!-- List of chapters -->
          <xsl:for-each select="child::chapter">
            <li><xsl:value-of select="@name"/></li>
          </xsl:for-each>
       </lu>
      </body>
    </html>
   </xsl:template>
</xsl:stylesheet>

樣式表是遵循下列規則的XML文檔：

屬性的值在引號之間，
元素必須有開啟標籤和關閉標籤，
以'或'&'實體取代'<'或'&'字元，
每個XSL元素都必須使用xsl命名空間。

樣式表必須以XSL根元素標籤<xsl:stylesheet>開頭，並以</xsl:stylesheet>標籤結尾。 XSL命名空間必須定義在開啟標籤中，如下所示：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output>元素指定生成的文檔的格式。指定所需的字元集和輸出格式。

<xsl:output encoding="ISO-8859-1" method="html"/>

以下說明輸出文檔格式化樣式表的配置。

<xsl:template match="/book">
  <html>
    <body>
      <!-- Book title -->
      <h1><xsl:value-of select="@name"/></h1>
      <lu>
        <!-- List of chapters -->
        <xsl:for-each select="child::chapter">
          <li><xsl:value-of select="@name"/></li>
        </xsl:for-each>
      </lu>
    </body>
  </html>
</xsl:template>

預設情況下，XSLT處理器會搜索應用於輸入XML文檔的根節點或主節點的template。輸出文檔的構建從此模板開始。

在我們的範例中，HTML頁面是透過顯示書籍名稱和章節清單，從「cus:book」架構產生。

注意

有關XSLT語言的詳細資訊，請參閱XSLT參考文檔。

顯示HTML/XML

若要顯示html欄位，請使用<xsl:value-of>指令中的disable-output-egleine="yes"選項。這可讓您避免以字元的XML實體取代字元（例如<與<）。

<xsl:text>指令及disable-output-egleine="yes"選項可讓您插入個人化欄位或條件測試的JavaScript標籤。

範例:

顯示"html"類型欄位的內容：

<xsl:value-of select="summary" disable-output-escaping="yes"/>

插入個人化欄位<%= recipient.email %>:

<xsl:text disable-output-escaping="yes"><%= recipient.email %></xsl:text>

新增條件測試<% if(recipient.language == 'en'){ %>:

<xsl:text disable-output-escaping="yes"><% if (recipient.language == 'en') { %></xsl:text>

包括樣式表

可以建立範本或變數庫，以便在多個樣式表之間共用。上面顯示的"longMonth" template是一個典型的示例，說明了在樣式表中遠程查找模板以便以後可以重複使用的優點。

<xsl:include>指令指示要包含在文檔中的樣式表的名稱。

範例:包括"common.xsl"樣式表。

<? xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:include href="common.xsl"/> 
  <xsl:output encoding="ISO-8859-1" method="jsp" indent="yes"/>
  ...
</xsl:stylesheet>

注意

不能在要包括的樣式表的引用中輸入命名空間的名稱。作為標準，此樣式表使用用戶命名空間建立。

編輯樣式表

編輯區可讓您填入樣式表的內容：

要隨時生成輸出文檔的預覽，請選擇內容實例和格式(HTML、Text、XML)，然後按一下Generate :

注意

無需在樣式表中保存更改即可查看輸出文檔預覽。

映像管理

影像參照

在HTML輸出文檔中輸入的影像可以用絕對或相對參照引用。

相對引用可讓您在NcmRessourcesDir和NcmRessourcesDirPreview選項中輸入包含影像的伺服器的URL。這些選項包含影像在Adobe Campaign用戶端主控台中的發佈和預覽位置。

這兩個選項可透過Administration > Platform > Options資料夾中的選項管理畫面存取。

範例:

NcmResourcesDir = "https://server/images/"
NcmResourcesDirPreview = "x:/images/"

在樣式表處理期間，輸入XML文檔主要元素上的_resPath屬性會根據上下文（預覽或發佈）自動填充一個或多個選項。

如何使用影像放置選項及其與影像搭配使用的範例：

<img src="<%= content.@_resPath %>/newsletter/image.png"/>

注意

我們建議聲明一個變數，其中包含儲存影像的伺服器參考（在本例中為「resPath」）。

使用公共資源

您也可以使用Public resources來宣告影像，並根據在部署精靈中輸入的例項設定，將影像上傳至伺服器。

然後，您就可以在內容中呼叫這些影像。若要這麼做，請在內容管理架構中使用下列語法：

<element label="Image" name="image" target="xtk:fileRes" type="link"/>

在表單中，選取影像的欄位將透過下列語法新增：

<input img="nl:sryimage.png" newEntityFormChoice="true" xpath="image">
    <sysFilter>
      <condition expr="@isImage = true"/>
    </sysFilter>
  </input>

注意

有關Public resources以及如何配置和使用它們的詳細資訊，請參閱本節。

日期顯示

在XML輸入檔案中，日期會以內部XML格式儲存：YYYY/MM/DD HH:MM:SS（例如2018/10/01 12:23:30）。

Adobe Campaign提供JavaScript範本和XSL樣式表的日期格式化函式，詳見下文。

JavaScript日期格式

若要以所需格式顯示日期，Adobe Campaign會提供formatDate函式，以輸入日期內容，並提供以下語法指定輸出格式的字串：%4Y/%2M/%2D %2H%2N%2S

範例:

以31/10/2018格式顯示日期：

 <%= formatDate(content.@date, "%2D/%2M/%4Y") %>

以2018年7月格式顯示日期：

<%
 function displayDate(date)
  {
    var aMonth = 
    [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];

    var month = formatDate(content.@date, "%2M")
    var year = formatDate(content.@date, "%4Y")

    return aMonth[month-1]+" "+year;
  }
%>

<%= displayDate(content.@date) %>

XSL日期格式設定

XSLT語法中沒有標準的日期管理功能。若要以所需格式顯示日期，Adobe Campaign會提供外部函式date-format。此函式會作為其輸入，輸入日期的內容，並使用下列語法指定輸出格式的字串：%4Y/%2M/%2D %2H%2N%2S

範例:

要以01/10/2018格式顯示日期：

<xsl:value-of select="external:date-format(@date, '%2D/%2M/%4Y')"/>

要以2018年7月格式顯示日期：

<!-- Returns the month in the form of a string with the month number as input -->
<xsl:template name="longMonth">
  <xsl:param name="monthNumber"/>

  <xsl:choose>
    <xsl:when test="$monthNumber = 1">January</xsl:when>
    <xsl:when test="$monthNumber = 2">February</xsl:when>
    <xsl:when test="$monthNumber = 3">March</xsl:when>
    <xsl:when test="$monthNumber = 4">April</xsl:when>
    <xsl:when test="$monthNumber = 5">May</xsl:when>
    <xsl:when test="$monthNumber = 6">June</xsl:when>
    <xsl:when test="$monthNumber = 7">July</xsl:when>
    <xsl:when test="$monthNumber = 8">August</xsl:when>
    <xsl:when test="$monthNumber = 9">September</xsl:when>
    <xsl:when test="$monthNumber = 10">October</xsl:when>
    <xsl:when test="$monthNumber = 11">November</xsl:when>
    <xsl:when test="$monthNumber = 12">December</xsl:when>
  </xsl:choose>
</xsl:template> 

<!-- Display date -->
<xsl:call-template name="longMonth">
  <xsl:with-param name="monthNumber">
    <xsl:value-of select="external:date-format(@date, '%2M')"/>
  </xsl:with-param>
</xsl:call-template>
 <xsl:value-of select="external:date-format(@date, '%4y')"/>

adobe.com 上的資源

Analytics Integration Preference Centers Email Creation Campaign Management Email Deliverability Email Marketing

本頁內容

檢視下一個:

隱私權（已更新）

使用條款