Verabschieden Sie sich von endlosen Kundeninhalts?nderungen! Dieser Artikel zeigt, wie Sie mit Google Sheets und Tabletop.js bearbeitbare Webseiten erstellen, sodass Kunden Inhalte selbst ?ndern k?nnen und Ihre wertvolle Zeit sparen k?nnen.

Wenn Sie Ihre Website mit statischen Dateien (HTML, CSS und JavaScript) anstelle von CMS (wie WordPress) erstellen, ben?tigen Sie andere L?sungen, um den Inhalt zu bearbeiten, ohne die Datei direkt zu ?ndern.

Mit Tabletop.js k?nnen wir Google Sheets als Datenspeicher verwenden, um über JavaScript problemlos auf Tabellenkalkulationsdaten zuzugreifen. Es liefert Google Sheets -Daten im JSON -Format und kann in Anwendungen verwendet werden, genau wie das Extrahieren von Daten von jeder anderen API. In diesem Artikel wird angezeigt, wie Sie Daten zu einer Tabelle hinzufügen und Tabletop einrichten, damit Daten von einer Datenquelle zu HTML extrahieren k?nnen. Gehen wir direkt in den Code!

Dieses Tutorial basiert auf einem realen Projekt, das ursprünglich zum Erlernen von Tabletop.js verwendet wurde. Ich schlage vor, dass Entwickler es selbst üben sollten, wenn sie neue Technologien lernen, auch wenn sie das Tutorial gelesen haben.

Wir werden das von mir erstellte Demo -Projekt verwenden, einschlie?lich des Quellcodes und der Tabelle. Zun?chst ben?tigen Sie ein Google -Konto, um auf die Tabelle zuzugreifen.

Erstellen Sie eine neue Tabelle und geben Sie Ihren eigenen Wert in die Spalte ein, genau wie mein Beispiel. Die erste Zelle jeder Spalte ist der Referenzname, der sp?ter in JavaScript verwendet wird, und die zweite Zelle ist der tats?chliche Inhalt der Website. Zum Beispiel ist "Header" der Referenzname und "Bitte bearbeiten Sie mich!" ist der tats?chliche Inhalt der ersten Spalte.

Klicken Sie in der Menüleiste anschlie?end auf "Datei" → "zur Webseite ver?ffentlichen, um die Daten im Netzwerk zu ver?ffentlichen.

Das System liefert einen Link, ist aber für uns nutzlos und kann ignoriert werden. Wichtig ist, dass Tabellenkalkulationen (und ihre Daten) jetzt ?ffentlich zug?nglich sind, damit wir sie für unsere Bewerbung erhalten k?nnen.

Wir brauchen jedoch einen Link. Klicken Sie in der oberen rechten Ecke der Seite auf die Schaltfl?che "Share" in der oberen rechten Seite, und ein Modalfenster wird angezeigt, wodurch ein gemeinsamer genutzbarer Link zur Tabelle bereitgestellt wird und dass wir Berechtigungen festlegen k?nnen. Lassen Sie uns den Link abrufen und Berechtigungen festlegen, damit jeder mit dem Link die Tabelle anzeigen kann. Auf diese Weise bearbeiten andere die Daten nicht versehentlich.

Initialisieren Sie nun die Tabletop im Projekt. Lassen Sie uns mit der komprimierten Datei, die sie hosten, verlinken. In ?hnlicher Weise k?nnen wir den ursprünglichen komprimierten Code kopieren, ihn in unsere eigene Skriptdatei einfügen und ihn selbst hosten.

Hier ist die mit Tabletop CDN verknüpfte Dokumentdatei und der Code aus dem Dokument:

 var publicsPreadsheeturl = 'https://docs.google.com/spreadsheets/d/1sbyminqhpsjcTjatMw0lcflrcpmqogMojj6an-snqrc/pubhtml';

  Funktion init () {
    Tabletop.init ({{
      Schlüssel: publicSpreadsheeturl,
      Rückruf: ShowInfo,
      SimpleSheet: Richtig 
    })
  }

  FunktionshowInfo (Daten, Tabletop) {
    console.log (Daten); // Konsole.log verwenden, um die Datenstrukturdaten anzuzeigen. Forach (Funktion (Zeile) {
      // Dynamisch Innerhtml gem?? der Datenstruktur festlegen
      document.getElementById ('Header'). Innerhtml = row.Header || '';
      document.getElementById ('Header2'). InnerHtml = row.Header2 || '';
      document.getElementById ('Body'). Innerhtml = row.body || '';
      // ... andere Elemente});
  }

  window.addeventListener ('Domcontentled', init)

Ersetzen Sie die variable publicSpreadsheetUrl im Code durch einen gemeinsam genutzbaren Link zur Tabelle.

Geben Sie nun den lustigen Teil ein. Weisen wir dem HTML -Element eine eindeutige ID zu und lassen Sie sie leer. In der showInfo -Funktion verwenden wir dann die forEach() -Methode, um jede Tabelle zu iterieren und sie mit der entsprechenden ID.innerHTML -Methode zu verknüpfen, die die Daten des Tabellenkalkulation über die ID in das HTML -Tag l?dt.

Hier ist ein Stück HTML -Code aus meinem Demo -Projekt, das ein leeres Tag zeigt:

<div>
    <h3 id="header"></h3>
    <p id="body"></p>
  </div>
  <div>
    <div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174433687496119.png" class="lazy" alt="Erstellen einer bearbeitbaren Webseite mit Google -Tabellenkalkulationen und Tabletop.js"></div>
    <div>
      <div>
        <h4 id="header2"></h4>
        <p id="body2"></p>
      </div>
      <div>
        <h4 id="header3"></h4>
        <p id="body3"></p>
      </div>
      <div>
        <h4 id="header4"></h4>
        <p id="body4"></p>
      </div>
    </div>
  </div>

Beachten Sie, dass ich id -Attribut zu jedem HTML -Element hinzugefügt habe. Dies erm?glicht es uns, sie genau zu finden und über JavaScripts document.getElementById() -Methode zu finden. Der ursprüngliche Code verwendet direkt Variablennamen, wodurch davon ausgegangen wird, dass die Variablennamen genau mit den Spaltennamen der Tabellenkalkulelle übereinstimmen und dass alle Spaltennamen als JavaScript -Variablen deklariert wurden, die nicht flexibel und robust genug sind.

Jetzt k?nnen wir den Inhalt auf der Website in Echtzeit ?ndern, indem wir den Inhalt in der Tabelle bearbeiten.

Das obige ist der detaillierte Inhalt vonErstellen einer bearbeitbaren Webseite mit Google -Tabellenkalkulationen und Tabletop.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!