HTML Hizmeti: Şablonlu HTML

Minimum düzeyde maliyetle dinamik sayfalar oluşturmak için Apps Komut Dosyası kodu ile HTML'yi birlikte kullanabilirsiniz. çaba sarf etmeniz gerekir. Kod ve HTML'yi bir araya getiren bir şablon oluşturma dili (ör. PHP, ASP veya JSP'de kullanıyorsanız söz dizimi size tanıdık gelmelidir.

Komut Dosyaları

Apps Komut Dosyası şablonları, komut dosyası adı verilen üç özel etiket içerebilir. İç mekan komut dosyasıyla normal bir Apps Komut Dosyası'nda çalışacak herhangi bir kod yazabilirsiniz dosya: komut dosyaları, diğer kod dosyalarında tanımlanan işlevleri çağırabilir, referans veya Apps Komut Dosyası API'lerinden herhangi birini kullanabilirsiniz. Bir projenin başarısını komut dosyalarında bulunan işlevleri ve değişkenleri kullanarak kod dosyalarında veya diğer şablonlarda tanımlanan işlevler tarafından çağrılır.

Aşağıdaki örneği komut dosyası düzenleyiciye yapıştırırsanız <?= ... ?> etiketi (bir yazdırma komut dosyası) italik. İtalik yazılmış kod, sayfa sunulmadan önce sunucuda çalışır teşekkür ederiz. Komut dosyası kodu, sayfa sunulmadan önce yürütüldüğü için Sayfa başına yalnızca bir kez çalıştırılabilir. istemci taraflı JavaScript veya Apps Komut Dosyası'ndan farklı olarak çağırdığınız işlevler google.script.run, komut dosyası uygulamaları yürütülebilir.

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World! The time is <?= new Date() ?>.
  </body>
</html>

Şablonlu HTML için doGet() işlevinin örneklerden farklı olduğuna dikkat edin temel HTML oluşturmak ve sunmak için. İşlev burada gösterilen resim, HTML'deki HtmlTemplate nesnesi dosyasını çağırır, ardından evaluate() yöntemini kullanarak komut dosyalarını çalıştırmak ve şablonu bir HtmlOutput kullanıcıya içerik sunabilir.

Standart komut dosyaları

<? ... ?> söz dizimini kullanan standart komut dosyaları, kodu net bir şekilde kodlayabilirsiniz. Ancak bu örnekte gösterildiği gibi komut dosyası içindeki kodun sonucu, HTML içeriğini yine de etkileyebilir komut dosyasının dışına ekleyin:

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? if (true) { ?>
      <p>This will always be served!</p>
    <? } else  { ?>
      <p>This will never be served.</p>
    <? } ?>
  </body>
</html>

Komut dosyalarını yazdırma

<?= ... ?> söz dizimini kullanan komut dosyaları, yazdırılan komut dosyalarını bağlamsal kaçış yöntemini kullanarak kodlarını sayfaya iletir.

Bağlamsal çıkış, Apps Komut Dosyası'nın çıktının bağlamını izlemesini sağlar. sayfada: bir HTML özelliğinin içinde, istemci tarafı script etiketinin içinde veya başka herhangi bir yere ekler ve otomatik olarak kaçış karakterlerini ekler. siteler arası komut dosyası çalıştırma (XSS) saldırılarına karşı koruma sağlamak için.

Bu örnekte, ilk yazdırma komut dosyası doğrudan bir dize üretir; bu ardından bir dizi ve döngü oluşturan standart bir komut dosyası ile devam eder. başka bir yazdırma komut dosyası kullanarak dizinin içeriğini çıkarır.

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'My favorite Google products:' ?>
    <? var data = ['Gmail', 'Docs', 'Android'];
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

Yazdırma komut dosyasının yalnızca ilk ifadesinin değerini ürettiğine dikkat edin; kalan ifadeler, standart bir komut dosyasıyla aynıdır. Bu nedenle, örneğin yalnızca <?= 'Hello, world!'; 'abc' ?> komut dosyası "Merhaba dünya!"

Komut dosyalarını zorla yazdırma

<?!= ... ?> söz dizimini kullanan komut dosyaları, zorla yazdırmaya benzer. komut dosyası uygulamalarını hariç tutabilirsiniz.

Komut dosyanız güvenilir olmayan kullanıcı girişine izin veriyorsa bağlamsal çıkış önemlidir. Ölçüt Öte yandan, komut dosyası çıktınızı kasıtlı olarak ürettiyseniz zorla yazdırmanız gerekir. tam olarak belirtildiği şekilde eklemek istediğiniz HTML veya komut dosyaları içeriyorsa.

Genel bir kural olarak, komut dosyalarını zorla yazdırmak yerine komut dosyası uygulamalarını kullanın Ancak, HTML veya JavaScript'i değiştirmeden yazmanız gerektiğini bilmiyorsanız.

Komut dosyalarındaki Apps Komut Dosyası kodu

Komut dosyaları, normal JavaScript'i çalıştırmakla sınırlı değildir; kullanabileceğiniz şablonlarınıza Apps Komut Dosyası'na erişim izni vermek için aşağıdaki üç teknikten birini kullanabilirsiniz. verileri.

Ancak şablon kodu sayfa sunulmadan önce yürütüldüğü için bu teknikler bir sayfaya yalnızca başlangıç içeriğini sunabilir. Erişmek için Bir sayfadaki Apps Komut Dosyası verilerini etkileşimli olarak kullanmak için Bunun yerine google.script.run API'yi kullanın.

Bir şablondan Apps Komut Dosyası işlevlerini çağırma

Komut dosyası uygulamaları, Apps Komut Dosyası kod dosyasında veya kitaplığında tanımlanan herhangi bir işlevi çağırabilir. Bu örnekte, bir e-tablodan şablona veri çekmenin bir yolu gösterilmektedir. verilerden bir HTML tablosu oluşturma.

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

function getData() {
  return SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = getData(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

Apps Komut Dosyası API'lerini doğrudan çağırma

Apps Komut Dosyası kodunu doğrudan komut dosyalarında da kullanabilirsiniz. Bu örnek verileri şablonunun kendisidir.

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = SpreadsheetApp
        .openById('1234567890abcdefghijklmnopqrstuvwxyz')
        .getActiveSheet()
        .getDataRange()
        .getValues(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

Değişkenleri şablonlara aktarma

Son olarak, değişkenleri özellik olarak atayarak bir şablona aktarabilirsiniz (HtmlTemplate nesnesinin) Bir kez bu örnek, önceki örneklerle aynı sonucu verir.

Code.gs

function doGet() {
  var t = HtmlService.createTemplateFromFile('Index');
  t.data = SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
  return t.evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

Hata ayıklama şablonları

Yazdığınız kod yürütülmediğinden şablonlarda hata ayıklaması zor olabilir directly; bunun yerine sunucu, şablonunuzu koda dönüştürür ve ardından koda ekleyebilirsiniz.

Şablonun komut dosyanızı nasıl yorumladığı tam olarak anlaşılmıyorsa iki hata ayıklama yöntemlerini HtmlTemplate sınıfı size yardımcı olabilir daha iyi anlamaktır.

getCode()

getCode(), bir sunucunun şablondan oluşturduğu kodu içeren dize. Şu durumda: günlüğe kaydedin ve ardından komut dosyası düzenleyicisine yapıştırın. Ardından, bu kodu çalıştırabilir ve Normalde olduğu gibi hata ayıkla Apps Komut Dosyası kodu.

Burada, Google ürünlerinin listesini tekrar gösteren basit şablonu görebilirsiniz. ardından getCode() sonucunun sonucu:

Code.gs

function myFunction() {
  Logger.log(HtmlService
      .createTemplateFromFile('Index')
      .getCode());
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'My favorite Google products:' ?>
    <? var data = ['Gmail', 'Docs', 'Android'];
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

GÜNLÜK (DEĞERLENDİRİLDİ)

(function() { var output = HtmlService.initTemplate(); output._ =  '<!DOCTYPE html>\n';
  output._ =  '<html>\n' +
    '  <head>\n' +
    '    <base target=\"_top\">\n' +
    '  </head>\n' +
    '  <body>\n' +
    '    '; output._$ =  'My favorite Google products:' ;
  output._ =  '    ';  var data = ['Gmail', 'Docs', 'Android'];
        for (var i = 0; i < data.length; i++) { ;
  output._ =  '        <b>'; output._$ =  data[i] ; output._ =  '</b>\n';
  output._ =  '    ';  } ;
  output._ =  '  </body>\n';
  output._ =  '</html>';
  /* End of user code */
  return output.$out.append('');
})();

getCodeWithComments()

getCodeWithComments() getCode() öğesine benzer, ancak değerlendirilen kodu orijinal şablonla yan yana görünür.

Değerlendirilen kodların üzerinden geçme

Değerlendirilen kodların her iki örneğinde de ilk fark edeceğiniz şey, HtmlService.initTemplate() yöntemi tarafından output nesnesi oluşturuldu. Bu yöntem Yalnızca şablonların kullanması gerektiğinden belgelenmemiştir. output bir ikili özel HtmlOutput nesnesi çağırmanın kısaltmaları olarak kullanılan, alışılmadık şekilde adlandırılmış özellikler, _ ve _$ append() ve appendUntrusted()

output bir tane daha özel özelliğe sahiptir, $out ve bu özellik, HtmlOutput nesnesi bu özel özelliklere sahip değil. Şablon kodundaki normal nesneyi döndürür.

Bu söz dizimini anladığınıza göre kodun geri kalanı anlamak önem taşıyor. Komut dosyası uygulamalarının dışındaki HTML içeriği (b etiketi gibi) eklenir output._ = kullanarak (içeriğe dayalı çıkış olmadan), komut dosyaları JavaScript olarak eklenir (içeriğe dayalı çıkışlı ya da kapalı olsa da olmasa da) (ör. komut dosyasının türüne göre).

Değerlendirilen kodun şablondaki satır numaralarını koruduğunu unutmayın. Şu durumda: değerlendirilen kodu çalıştırırken bir hata alırsanız satır, eşdeğer içerik ekleyin.

Yorum hiyerarşisi

Değerlendirilen kod satır numaralarını koruduğundan, yorumlar otomatik olarak diğer komut dosyalarını ve hatta HTML kodlarını yorumlayabilmek için kullanabilirsiniz. Bu Aşağıda yorumların birkaç şaşırtıcı etkisine örnekler verilmiştir:

<? var x; // a comment ?> This sentence won't print because a comment begins inside a scriptlet on the same line.

<? var y; // ?> <?= "This sentence won't print because a comment begins inside a scriptlet on the same line.";
output.append("This sentence will print because it's on the next line, even though it's in the same scriptlet.”) ?>

<? doSomething(); /* ?>
This entire block is commented out,
even if you add a */ in the HTML
or in a <script> */ </script> tag,
<? until you end the comment inside a scriptlet. */ ?>