Erstellen Sie Ihre eigenen automatisierten sozialen Bilder mit Resoc

Erstellen Sie automatisierte soziale Bilder mit HTML und CSS und integrieren Sie sie in den elfweitigen Blog und stellen Sie schließlich auf der Netlify -Plattform ein. Dieser Artikel führt Sie Schritt für Schritt durch den gesamten Prozess und erreicht soziale Bildautomatisierung auf hoher Ebene ohne komplexes Code-Schreiben.

In letzter Zeit sind automatisierte Sozialbilder zu einem heißen Thema geworden, und Github, Jetpack und andere haben verwandte Tools gestartet. Entwickler wie Ryan Filler und Zach Leatherman haben diese Funktion auch auf ihren Websites implementiert, benötigen jedoch viel benutzerdefinierten Code. Heutzutage können wir diesen Prozess mit einigen neuen Tools vereinfachen.

In diesem Tutorial werden Sie mithilfe von HTML und CSS benutzerdefinierte automatisierte soziale Bilder erstellt, sie durch die Konfiguration in das elfwenty -Blog integriert und schließlich für Netlify bereitgestellt.

Wenn Sie es kaum erwarten können, das Endergebnis zu sehen, besuchen Sie bitte den Projektlink oder durchsuchen Sie den Projektcode!

Was sind soziale Bilder?

In HTML Teilweise fügen wir einige offene Graph -Metadaten ein:

<meta content="Die Strategie der Blue Sky" property="og:title">
<meta content="Weniger Wolken, mehr blau" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

Wenn wir diese Seite auf Facebook teilen, werden wir und unsere Freunde sehen:

LinkedIn, Twitter, WhatsApp, Slack, Discord, IMessage… Alle diese Websites verhalten sich ungefähr genauso: Sie bieten einen Link mit einer visuellen "Karte", um räumliche und kontextbezogene Informationen zu machen.

Twitter hat seine eigenen Metadaten -Tags - Twitter -Karten, aber sie sind sehr ähnlich. Wenn Twitter Twitter -Karten nicht finden kann, fällt es zurück, um Diagramme zu eröffnen.

Seiten Titel und Beschreibungen sind unerlässlich, aber in den obigen Screenshots erscheinen sie im Vergleich zu den Himmel- und Wolkenbildern sehr klein, ganz zu schweigen von der Größe des klickbaren Bereichs. Dies ist die Kraft der sozialen Bilder. Wenn Links geteilt werden, ist es leicht, den Einfluss dieser Bilder zu verstehen.

Von Stufe 0 bis Level 3

Nicht alle sozialen Bilder sind gleich. Das Folgende sind keine offiziellen Begriffe, aber berücksichtigen wir den Einfluss des Einflusses dieser sozialen Bildkarten:

Stufe 0

Das grundlegendste soziale Bild ist, dass es keine Bilder gibt. Links können mit vielen Inhalten überflutet werden, mit kleinen visuellen Bereichen und fehlenden visuellen Anziehungskraft.

Stufe 1

Eine klassische Technologie besteht darin, ein einheitliches soziales Bild auf der gesamten Website zu erstellen. Diese Lösung scheint zwar ein gutes Eingangs-Output-Verhältnis zu haben, aber man könnte denken, dass sie schlechter ist, als keine Bilder zu haben. Natürlich werden wir etwas Aufmerksamkeit bekommen, aber die Reaktion kann negativ sein, insbesondere wenn die Leute sehen, dass viele Links von derselben Website gleich aussehen. Es ist anfällig für Wiederholung und unnötig.

Stufe 2

Die nächste Stufe ist die Standardpraxis für Blogs und Medienwebsites: Jeder Beitrag hat ein eigenes Bild und unterscheidet sich voneinander. Diese Praxis ist für Nachrichten -Websites völlig angemessen, da Fotos den Seiteninhalt ergänzen können. Der potenzielle Nachteil hier ist die Notwendigkeit, für jeden veröffentlichten Artikel Bildmaterial zu finden und zu erstellen.

Dies kann zu Faulheit führen. Wir haben alle Bilder gesehen, die offensichtlich Stock Fotos sind. Es mag Aufmerksamkeit erregen, aber es ist vielleicht nicht die Aufmerksamkeit, die Sie wirklich wollen.

Stufe 3

Letzte Stufe: Jede Seite hat reichhaltige und aussagekräftige soziale Bilder. Das macht CSS-Tricks. Die sozialen Bilder des Teams sind markenähnlich. Sie teilen das gleiche Layout. Sie erwähnen den Titel des Artikels sowie das Name und das Profilbild des Autors, das für normale Titel und Beschreibungen nicht sichtbar ist. Sie sind auffällig und unvergesslich.

Für diesen Ansatz gibt es eine offensichtliche Voraussetzung: Automatisierung. Es ist unmöglich, ein eindeutiges Bild für jeden möglichen Link zu erstellen. Überlegen Sie, wie viel zusätzliche Arbeit das erfordert. Wir brauchen einige programmatische Lösungen, mit denen wir das schwere Heben durchführen können.

Erstellen wir einen Blog mit einzigartigen sozialen Bildern

Um sich einen guten Grund (und Sandbox) zu geben, einzigartige soziale Bilder aufzubauen, werden wir einen einfachen Blog erstellen. Wenn ich Artikel in diesem Blog schreibe und poste, folge ich einem einfachen zweistufigen Prozess:

1. Artikel schreiben und veröffentlichen
2. Post veröffentlichte URL in mein soziales Netzwerkkonto

Soziale Bilder müssen zu dieser Zeit eine Rolle spielen. Wir möchten unseren Blog so auffällig wie möglich machen. Aber das ist nicht unser einziges Ziel. Dieser Blog sollte unsere persönliche Marke aufbauen. Wir hoffen, dass unsere Freunde, Kollegen und Fans sich an uns erinnern werden, wenn sie unsere sozialen Beiträge sehen. Wir wollen etwas wiederholbares, erkennbares und repräsentatives.

Das Erstellen eines Blogs erfordert viel Arbeit. Obwohl automatisierte Sozialbilder cool sind, ist es unklug, zu viel Zeit damit zu verbringen. (Chris kam Ende 2020 zu dem gleichen Schluss). Um effizienter zu sein, machen wir eine elfwentische Website. ELEDSY ist ein einfacher statischer Website -Generator. Verwenden Sie anstatt von vorne von vorne zu beginnen, ein vorhandenes Starterprojekt. Tatsächlich wählen wir den ersten, elektronischen Basis-Blog.

Besuchen Sie die Electronic-Base-Blog-Github-Seite und verwenden Sie sie als Vorlage:

Erstellen wir das Repository und legen Sie den Namen und die Beschreibung des Repositorys fest. Wir können es öffentlich oder privat einstellen, es spielt keine Rolle.

Als nächstes klonen wir das Repository lokal, installieren das Paket und führen die Site aus:

 Git -Klon [Ihre Repository -URL]
CD My-Demo-Blog ### oder welcher Namen Sie NPM Installation genannt haben
NPM Run Serve

Unsere Website läuft unter http: // localhost: 8080.

Lassen Sie es uns nun einsetzen. Netlify macht diese Aufgabe sehr schnell (und kostenlos!). (OH, Spoiler -Warnung: Unsere soziale Bildautomatisierung basiert auf der Netlify -Funktion.)

Lassen Sie uns Netlify besuchen und ein Konto erstellen, wenn Sie noch kein Konto haben. In jedem Fall erstellen Sie eine neue Website:

Ermöglichen Sie Netlify, auf das Blog -Repository zugreifen zu können.

Netlify bereitstellt unsere Website:

Nach ungefähr einer Minute wurde der Blog eingesetzt:

Eine Bildvorlage dominiert alle

Unsere sozialen Bilder basieren auf einer Bildvorlage. Um diese Vorlage zu entwerfen, werden wir Techniken verwenden, die wir bereits kennen und lieben: HTML und CSS. HTML konvertiert sich nicht automatisch in Bilder, aber es gibt Tools, die dies tun können, insbesondere mit Puppenspielern.

Anstatt sich selbst einen sozialen Image -Stapel zu erstellen, verwenden Sie das Entwicklungskit der Resoc Image Template. Aus dem Projekt Root Directory können wir es also im Terminal ausführen:

 NPX ITDK Init Resoc-Templates/Standard -M-Titelbeschreibung

Dieser Befehl erstellt eine neue Bildvorlage im RESOC-Templates/Standard-Verzeichnis. Es wird auch in einem neuen Browserfenster geöffnet.

Wir können diese Vorlage so verwenden, wie es ist, aber dies ermöglicht es uns nur, Level 2 innerhalb des "Einfluss" -Spandziums zu erreichen. Was wir brauchen, um es auf Stufe 3 zu bringen und die CSS-Tricks-Vorlage abzustimmen, ist:

• Der Titel ist rechts ausgerichtet und lässt links einen negativen Platz.
• Am Boden befindet sich eine Fußzeile, die einen Hintergrundgradienten enthält, der aus zwei Farben besteht, die wir im gesamten Blog verwenden werden.
• Name und Profilbild des Autors des Artikels.

Wenn wir zum Browser zurückkehren, können wir im "Parameters" des Vorlage -Betrachters sehen, dass die Vorlage zwei Parameter benötigt: Titel und Beschreibung. Dies ist genau die Vorlage, die wir ausgewählt haben, wenn wir im Terminal -m title-description ausführen. Wir können jedoch weitere Parameter hinzufügen, indem wir resoc-templates/default/resoc.manifest.json bearbeiten. Insbesondere können wir den zweiten Parameter löschen, um zu erhalten:

 {
  "Partials": {{
    "Inhalt": "./content.html.mustache",
    "Styles": "./styles.cs.mustache"
  },
  "Parameter": [
    {
      "Name": "Titel",
      "Typ": "Text",
      "Demovalue": "Ein Bild ist mehr als tausend Worte"
    }
  ]
}

Der Betrachter im Browser spiegelt die Änderungen wider:

Es ist Zeit, das Bild selbst zu entwerfen. Wir können es in resoc-templates/default/content.html.mustache entwerfen:

<div>
  <main><h1>{{title}}</h1></main>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="Erstellen Sie Ihre eigenen automatisierten sozialen Bilder mit Resoc">
  <h2>Philippe Bernard</h2>
</div>

Dies ist einfach nur HTML. OK, außer {{ title }} . Dies ist die Template -Engine, die Schnurrbart und Resoc verwendet, um Parameterwerte in Vorlagen zu injizieren. Wir können sogar einen Text in das Titelfeld eingeben, um zu sehen, wie es funktioniert:

Beachten Sie beim Anzeigen der Vorschau, dass uns ein Bild profil-pic.jpg fehlt. Kopieren Sie Ihr bestes Profilbild in resoc-templates/default/profil-pic.jpg :

Es ist Zeit, CSS in resoc-templates/default/styles.css.mustache zu schreiben. Der Punkt dieses Beitrags ist nicht , wie man die Vorlage stymt, sondern der Stil, den ich verwendete:

 @import url ('https://fonts.googleapis.com/css2?family=anton&family=raleway&display=swap');

/ * ... CSS -Code ... */

Die meisten Dimensionen hängen von VW- und VH -Einheiten ab, um die verschiedenen Kontexte, die die Vorlage vorliegen kann, zu helfen. Wir werden die Empfehlung von Facebook folgen, die 1200 × 630 beträgt. Twitter -Karten hingegen sind unterschiedlich. Wir können das Bild bei niedriger Auflösung (wie 600 × 315) rendern, verwenden wir jedoch 1200 × 630, sodass wir nur Pixel verwenden müssen.

Der Zuschauer macht eine Facebook -Vorschau bei 1200 × 630 und vergrößert sich auf den Bildschirm. Wenn die Vorschau auf Ihre Erwartungen erfüllt, wird das eigentliche offene Graphbild auch.

Bisher entsprechen die Vorlagen unseren Bedürfnissen:

(Der folgende Inhalt schreibt die verbleibenden Teile nach der ursprünglichen Textstruktur weiter um. Beibehaltung der Konsistenz des Inhalts passen Sie den Sprachausdruck und die Absatzstruktur an, um sie reibungsloser und natürlicher zu machen.)

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre eigenen automatisierten sozialen Bilder mit Resoc. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!