Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Evernote
Webdesign

Erstellung und Gestaltung einen Blog auf Evernote mit Postach.io

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

Postach.io ist ein System von Blogs mit einem Unterschied.  Sie hat eine Funktion, die es besonders interessant macht: statt dem Admin-Panel erstellen Sie einfach Ihre Themen in Evernote.

Sie können jede Evernote-Anwendung verwenden, was bedeutet, dass die Postach.io-Blogs eine Multi-Plattform sind, auf der es eine automatische Sicherung gibt (wenn Sie bereits ein Evernote-Benutzer sind), ist es sehr üblich.

In dieser Lektion lernen Sie, wie Sie Ihren eigenen führenden Blog von Postach.io/Evernote einrichten und wie Sie ein Thema dafür erstellen können. einrichten und wie Sie ein Thema dafür erstellen können.

1. Einstellung eines Blogs

Von Anfang an, wenn Sie Evernote-Konto nicht haben, müssen Sie es erstellen.  Sobald Sie ein Konto in Evernote erstellt haben, gehen sie zu Postachi.io und klicken Sie auf „LOG IN“, bei Verwendung von Evernote-Schaltfläche

Sie werden auf eine Seite weitergeleitet, auf der Sie Postach.io autorisieren und auf Ihr Evernote-Konto zugreifen können.  Klicken Sie auf die grüne Schaltfläche "Autorisieren", um fortzufahren.

Geben Sie auf dem nächsten Bildschirm Ihren Namen, Ihre E-Mail-Adresse, Ihren Namen und Ihre Subdomain ein, die Sie für Ihre Site ausgewählt haben, und klicken Sie dann auf den gelben Button "Site erstellen".

Nach ein paar Sekunden ist die Installation Ihres Blogs abgeschlossen und Sie sehen einen Bildschirm mit einem Link, über den Sie zu Ihrer neuen Site gelangen können:

Standardmäßig sieht Ihr neues Blog wie folgt aus:

Wenn Sie in den Notizbuchbereich von Evernote schauen, sehen Sie einen neuen Eintrag mit einem Namen, der mit dem Namen Ihrer Website übereinstimmt.  Sie schreiben alle Inhalte Ihres Blogs in diesem Notizbuch auf.

Tadaaa!

Erstellung der Posts 

Sie können Themen für Ihr Blog mit einer beliebigen Evernote-Anwendung erstellen, die für Sie am bequemsten ist, d.h. Sie können sie auf Ihrem Desktop, mobilen Gerät oder mit einer browserbasierten Anwendung bearbeiten.  Postach.io empfiehlt, die Browser-Anwendung zu verwenden, um auf andere Tools zuzugreifen.  Aufgrund meiner Erfahrung kann ich jedoch sagen, dass es keine großen Unterschiede zwischen dem Browser und der Desktop-Version des Mac gibt. .Die Auswahl hängt also von den persönlichen Vorlieben ab. 

Das Hinzufügen eines Blogs über Postach.io ist lächerlich einfach. Erstellen Sie einfach eine neue Notiz in dem Notizbuch, das Ihrem Blog zugewiesen ist, schreiben Sie Ihr Thema und fügen Sie es dann zur "Veröffentlichung" hinzu.

Klicken Sie in Evernote auf die Schaltfläche "Synchronisieren" und das Thema wird an Ihr Blog gesendet.

Umgekehrt, wenn Sie ein Thema löschen möchten, löschen Sie es einfach aus dem "veröffentlicht" und synchronisieren Sie es erneut.

Bilder hinzufügen

Die Bilder hinzufügen, ist auch sehr einfach.  Ziehen Sie ein Bild von Ihrem Computer in eine Notiz und es wird automatisch in die Cloud heruntergeladen und Ihrem Thema hinzugefügt.  Außerdem können Sie auf das kleine Büroklammersymbol klicken, um direkt zur Datei zum Einfügen zu gelangen.

Formatierung der Themen

Es gibt zwei Möglichkeiten, den Inhalt Ihrer Artikel auf Postach.io zu formatieren.  Sie können die Formatierungstools in Evernote standardmäßig verwenden:

.. oder Sie können Markdown über die Registerkarte Details im Control Panel Ihres Postach.io aktivieren:

Hinweis: Wenn Sie Markdown noch nicht kennen, werfen Sie einen Blick auf Markdown: The Ins and Outs

Mit jeder dieser Optionen können Sie Inline-HTML-Code einfügen, um mehr Kontrolle über Ihre Themen zu erhalten. Es gibt jedoch einige offensichtliche Unterschiede zwischen den beiden Ansätzen, die Ihnen dabei helfen zu entscheiden, welche Sie bevorzugen.

Vorteile von Markup:

Markup ist viel besser

Mit dem enthaltenen Markup erhalten Ihre Artikel das korrekte Layout der Tags h und p usw.  Das Standardformat verwenden, können Sie feststellen, dass jede Zeile in einem div-Tag eingeschlossen ist, alle Transfers, gebrochene Zeilenumbrüche durch <br/> Tag (es kann zu Chaos in den Lücken führen), und kann veraltete Tags wie <b>  anstelle des gewünschten <strong>  detektieren.

Einfaches Einfügen von H-Tags

Mit dem mitgelieferten Markup können Sie einfach H-Überschriften verschiedener Ebenen einfügen, indem Sie die # -Zeichen platzieren.  Jedoch nur die Standardformatierung ist möglich, eine größere Schriftgröße einzufügen, nicht die Header.  Die Formatierung der Standardeinstellung können Sie einen Header H-Tags in Form von HTML hinzufügen, aber wahrscheinlich werden sie in einem div-Tag eingeschlossen werden.

Die Vorteile der Formatierung standardmäßig:

Artikel mit WYSIWYG bearbeiten

Wenn Sie in der Standardformatierung einen Artikel bearbeiten, sehen Sie einen Satz mit einem Strich, einer Ausrichtung usw.  Wenn Sie jedoch Markup verwenden, hat Evernote noch nicht die Möglichkeit einer nativen oder plattformübergreifenden Vorschau, und Sie werden nicht sehen können, wie Ihre Artikel aussehen werden, bis sie veröffentlicht werden.

Einfache Text- und Bildausrichtung

Die Standardformatierung können Sie ein Bild oder Text auswählen und sie nach links und rechts ausrichten oder in der Mitte.  Im Markup gibt es keine systemeigene Ausrichtungsfunktion, daher muss HTML eingebettet werden.

Einer von zwei

Es sollte beachtet werden, dass mit dem aktivierten Markup in Evernote die Standardformatierung nicht funktioniert und umgekehrt, weshalb Sie im Moment auswählen sollten, welche Vorteile Sie mehr benötigen.

Persönlich empfehle ich die Verwendung von Markup, da Sie sonst möglicherweise feststellen, dass die erstellten Tags div und br es nicht erlauben, die Absätze des Artikels korrekt zu trennen.

Tipp: Wenn Sie einen Zeilenumbruch feststellen, bei dem der Absatz enden soll, wählen Sie den gesamten Text aus, und doppelklicken Sie dann auf die Schaltfläche "Bestellen" in der Liste.  Wenn Sie eine Liste hinzufügen oder entfernen, wird der Inhalt formatiert.

Einbetten der Medien

Postach.io bietet mehrere eingebaute Codes, mit denen Sie Komponenten wie YouTube-Videos, Gist-Code-Snippets, Tweets, Tracks auf Soundcloud usw. einfügen können.  Auf den ersten Blick sieht es aus wie eine Menge verschiedener eingebauter Codes, die Sie verwenden können, aber das Format ist für jeden von ihnen genau dasselbe, was ihnen hilft, sich leichter zu merken:

[<service name> url="<item url>"] 

YouTube-Video wird auf diese Weise hinzugefügt:

[youtube url = "http://www.youtube.com/watch?v=07ds8iv1XPM"]

... ein Code-Snippet zu Gist hinzufügen:

[gist url = "https://gist.github.com/postachio/9059890"]

.. usw.  Die vollständige Liste der integrierten Codes finden Sie in Postach.io docs.

2. Erstellen Sie ein benutzerdefiniertes Design.

Es gibt mehrere fertige Designs, die Sie in Ihrem Design auf der Registerkarte Design-Browser in Ihrem Control Panel auf Postach.io verwenden können.  Da das Thema Design ziemlich einfach ist, werden wir den Prozess der Erstellung einer einfachen Skin für einen Blog auf Postach.io überspringen.

Wir werden dieses wunderbare Design von Tomas Laurinavicius kodieren:

Wie Themen in Postach.io funktionieren

Was ich an Postach.io am meisten mag, ist, dass es vollständig in einer einzigen Dateivorlage enthalten ist.  Bedingte Prüfungen werden durchgeführt, um festzustellen, welcher Inhaltstyp den Besuchern angezeigt werden soll, und entsprechend wird der entsprechende Code geschrieben.  Bald werden Sie in der Lage sein, es in Aktion zu sehen.

Das wird getan, um sicherzustellen, dass das System sehr klar und genau ist.  Die gesamte Vorlagendatei, die Sie erstellen, ist nur 170 Zeilen.

Die Vorlage, die im Design für Postach.io verwendet wird, ist Jinja2, mit der Sie Tags in die Vorlage einfügen und eine Programmlogik hinzufügen können.

Die benutzerdefinierte Registrierung wird zu Postach.io hinzugefügt, indem Benutzercode direkt kopiert und eingefügt wird.  Es gibt keinen eigentlichen Download des Designs in zip, wie man es auf anderen Plattformen findet.  Stattdessen müssen Sie auf die Registerkarte „Quelltext-Editor“ in Ihrem Control Panel gehen und Code hier einfügen:

Da wir davon ausgehen, dass Sie den HTML-Code in das Design-Thema müssen eingefügt werden, empfehle ich das Erstellen einer Datei namens „theme.html“,  arbeiten Sie in dieser Datei, dann kopieren Sie und aus ihm heraus, nach dem Ende jeder Etappe einfügen.

Bevor Sie anfängen

Für die Zwecke dieser Lektion, gehen Sie zum Control Panel auf Postach.io und auf der Registerkarte Details, legen Sie den Titel Ihrer Website im "Journal für kreatives Denken und Design" und Beschreibung Ihrer Website in "Dinge, die Sie normalerweise nicht lesen.

Wir tun das, weil diese Felder verwendet werden, um den Kopfbereich der Website mit einer Textanzeige zu füllen, wie in unserem PSD-Design-Blog.

CSS-Thema, Bilder und Hosting Dropbox

Das Fehlen eines direkten Ansatzes  zum Bearbeiten des Thema-Codes auf Postach.io ist, dass es keine Möglichkeit gibt, eine separate CSS-Datei mit Ihrem Thema hochzuladen.  Das bedeutet, dass Sie zwei Optionen haben:

  1. Schreiben Sie alle Ihre CSS direkt in den Hauptteil
  2. Platzieren Sie Ihre Stylesheets an anderer Stelle und verknüpfen Sie sie.

Daher bevorzuge ich immer den CSS-Präprozessor und daher muss ich eine separate Datei für die Kompilierung haben, daher empfehle ich die zweite Option zu wählen.  Also müssen wir unser Stylesheet irgendwo platzieren.  In diesem Fall werden wir Dropbox verwenden.  Wir werden auch Dropbox verwenden, um das Bild des Themalogos zu veröffentlichen.

Mit Dropbox lassen sich statische Assets sehr einfach platzieren.  Erstellen Sie einfach einen Ordner für das Projekt in Ihrem lokalen Dropbox-Ordner. Wenn Sie Ihre Änderungen speichern, werden sie automatisch in Ihr Konto heruntergeladen.

Um die URL für ein CSS- oder Asset-Image zu erhalten, klicken Sie mit der rechten Maustaste in Ihren Dropbox-Ordner und wählen Sie "Dropbox-Link freigeben":

Dadurch werden öffentlich sichtbare Links zu Ihrer Datei im Cache hinzugefügt.

Wichtig: Um eine URL in ein Format zu konvertieren, das im Code Ihrer Site verwendet werden kann, fügen Sie den Link ein und ändern Sie dann www in dl.

Einstellung des Projektordners

Um den Prozess zu starten, erstellen Sie einen Projektordner im Dropbox-Ordner und erstellen Sie dann eine Datei mit dem Namen theme.html (gemäß den obigen Informationen).

Als nächstes werden wir unsere Stile in LESS schreiben, zwei Unterordner innerhalb des Projektordners erstellen, einen Namen css, den anderen LESS.  Erstellen Sie im Ordner LESS eine Datei namens style.less.  Alle Stile für Ihre Website werden in diese Datei geschrieben und dann in css> style.css kompiliert.

Wir werden die kostenlose Prepros-Anwendung zur Kompilierung verwenden.  Ich habe die folgenden Schritte in Betracht gezogen, die in der letzten Lektion getroffen werden müssen, so wenden Sie sich bitte den Anweisungen im Abschnitt mit dem Titel Setup-Autocompiling mit Prepros und Integrieren LESSHat und Normalize.less besuchen und folgen.

Nach Abschluss dieser beiden Abschnitte sollten Sie eine Datei- und Ordnerstruktur für Ihr Projekt haben, die wie folgt aussieht:

Der Haupt-HTML-Wrapper und Titel

Wir beginnen damit, die grundlegende HTML5-Installation sowie head einzufügen.  Fügen Sie der Datei theme.html Folgendes hinzu und vergessen Sie nicht, sie in das Kontrollfeld "Source Editor" von Postach.io zu kopieren und einzufügen, wenn Sie fertig sind:

Hier finden Sie eine kurze Beschreibung dessen, was Sie oben sehen:

  • Die Ausgabetitel ist abhängig davon, wo sich der Benutzer auf der Site befindet.
  • {{header_meta}} Template-Tag zur Ausgabe der Standard-Meta-Tags   an Postach.io.
  • Meta-Tags, um den richtigen Modus auf mobilen Geräten sicherzustellen.
  • Herunterladen von Google-Schriftarten, die im Projekt verwendet werden; Bentham und PT Serif.
  • Laden von FontAwesome-Styles (für Font-Icons) von Postach.io in statische Ressourcen.
  • Laden Sie unsere benutzerdefinierten Styles von Dropbox herunter.
    Wichtig: Sie müssen Ihr eigenes URL-Muster mit der oben beschriebenen Methode erstellen.
  • Integration von Google Analytics mit Daten aus dem Control Panel von Postach.io.

Jetzt werden wir den Basiscode zum Body-Abschnitt hinzufügen.  Fügen Sie Folgendes zwischen den öffnenden und schließenden Tags des Bodys hinzu:

Lassen Sie uns das aufreißen.  Zuerst verwenden wir die Jinja2-Syntax, um die Bedingungen zu erfüllen, um zu überprüfen, ob sich der Besucher auf dem Anmeldebildschirm von Postach.io befindet oder nicht.  Wenn das der Fall ist, wird ihnen ein Login-Formular angezeigt. Wenn nicht, gehen wir zum Blog auf dem Bildschirm.

Der Bereich, der unseren Blog-Display-Code enthält, ist mit den Kommentaren <! -- Start blog display --> und <! -- End blog display --> gekapselt.  Wir beginnen mit einem div auf einem wrapper-Klasse basiert, die wir die Breite unseres Layout zu steuern, verwenden und dann legen wir den header-Code-Header unserer Website.

Das Element in der Öffnung header-Tag, überprüfen wir, ob der Benutzer auf die Website Deckungscode hinzugefügt wird {% if site.cover_photo%} ... {% endif %}.  Wenn ein Titelbild vorhanden ist, verwenden wir die integrierten Stile, um es als Hintergrundbild zu verwenden. Verwenden Sie dazu die Vorlagevorlage {{site.cover_photo }}, um ihre URL auszugeben.

Im Header-Element platzieren wir ein Logo.  Es geschieht, indem zuerst das Logo-Bild vom PSD-Blog-Design als transparentes PNG exportiert wird.  Dann müssen wir das Bild in den Projektordner innerhalb unseres lokalen Dropbox-Ordners legen und die öffentliche URL im Code verwenden.  

Auch hier sollten Sie die URL hinzufügen, die Sie mit der oben beschriebenen Methode aus dem Dropbox-Ordner erhalten.

Beachten Sie das "Logo" -Feld in der Systemsteuerung auf Postach.io: Es gibt Platz in der Systemsteuerung, um das Logo Bild herunterzuladen, aber es hat eine Beschränkung, es muss mindestens 256 x 256 Pixel sein.  Das ist aufgrund der Tatsache, dass es dient auch als Ihr Bild Blog avatar, da Sie eine Vorlage Tag {{ site.avatar }} verwenden, das Bild zu platzieren.  Darüber hinaus kann dieses Feld transparente Bilder nicht als weißen Hintergrund verarbeiten und wird während des Startvorgangs hinzugefügt.  Aus diesen Gründen setzen wir das Logo auf Dropbox und laden es von dort.

Danach platzieren wir den Namen mit der Vorlagenvorlage {{site.name}}  und wenn es eine Bio / Beschreibung der Site über das Tag {{site.bio}} gibt.

Nach der Prüfung auf bedingte Schließung {% endif %} lassen wir Postach.io schließlich die erforderlichen Fußzeilenskripts mit dem Schablonentag {{ footer_meta }} laden.

Fügen Sie Basis- und Titelstil hinzu

Da Sie Prepros so eingerichtet haben, dass Ihre LESS-Datei automatisch kompiliert wird und Sie über eine Dropbox verfügen, die automatisch für Sie herunterlädt, können Sie sehen, dass die Formatänderung innerhalb einer oder zwei Sekunden auf Ihre Site angewendet wird, nachdem Sie sie gespeichert haben.

Wir beginnen mit dem Erstellen eines grundlegenden Stils für einige Elemente sowie ein Shell-Programm.  Fügen Sie diesen Code Ihrer style.less-Datei entsprechend den beiden zuvor hinzugefügten Zeilen hinzu.

Schauen wir uns an, was wir bekommen haben.

In unserer PSD ist die Größe der Basisschrift 18px, aber für unseren Code werden wir nicht die gleiche Größe 18px einstellen, und wir werden nicht die Fähigkeit der Benutzer oder des Browsers überschreiben, die beste Schriftgröße zu bestimmen.  Sie können mehr über meine Überlegungen im Artikel "Readability First" lesen.

Stattdessen setzen wir den Wert 18 auf die Variable @base_font_size und führen ihn dann mit dieser Berechnung aus:

Die am häufigsten verwendete Standardschriftgröße für den Browser ist 16px. Bei dieser Berechnung wird @base_font_size einem Wert zugewiesen, der auf den meisten Geräten 18px entspricht, in diesem Fall 1.125em.  Dieser Wert bleibt jedoch flexibel und Geräte oder Benutzer müssen mit einer anderen Schriftgröße als 16px arbeiten.

Wir wenden diese grundlegende Schriftgröße auf das HTML-Element mit der folgenden Zeile an: font-size: @base_font_size_ems;

Die nächste Variable, die Sie sehen werden, wird mit diesem Code erstellt:

Diese Berechnung berechnet den Wert von rem entsprechend der Größe eines Pixels, abhängig vom Wert der Basisschriftgröße.

Wir können diese Variable überall dort verwenden, wo wir normalerweise px verwenden, indem wir sie einfach mit der Anzahl der Pixel multiplizieren, die wir anvisieren, zum Beispiel 50 * @px anstelle von 50px.  Dann können wir in Pixeln denken, was die Arbeit mit PSD wesentlich erleichtert, aber wir werden rem basierend auf den Daten in unserem CSS erhalten, so dass alle Designelemente voll skalierbar und flexibel bleiben.

Die verbleibenden Variablen werden verwendet, um die Namen und Kopfzeilen von Schriftarten und Farben aus der PSD zu speichern, die wir in unserer Site, dem Shell-Programm, im Titel und im Text der Kopfzeile verwenden werden.

Der verbleibende Code wendet die neu erstellten Variablen in den Stildeklarationen an, um die Breite, Hintergrundfarbe, Textfarbe usw. zu bestimmen.  Beachten Sie, dass wir das Attribut width in der Site-Shell auf 100% setzen, sodass die Site verkleinert wird, damit sie dem kleineren Bildschirm entspricht, und das Attribut max-width zur Festlegung der Breite der Site auf größeren Bildschirmen angezeigt wird.

Wir installieren auch Images mit img, entfernen Unterstreichungen aus den Links, wenden den im PSD-Design für den Header-Text verwendeten Textstil an und verwenden display: table; und display: table-cell; vertical-align: middle; in den Formaten .header_wrap und .site_header, um den Inhalt des Headers vertikal auszurichten.

Wir haben das Cover-Bild unserer Website noch nicht hochgeladen. Wenn Sie alle oben genannten Punkte auf Ihr Blog angewendet haben, sollte es folgendermaßen aussehen: 

Fügen Sie das Cover Ihrer Website hinzu

Jetzt müssen Sie das Coverbild der Seite aus Ihrem PSD Design Blog exportieren.  Sie sollten Bilder mit einer Breite von 1200 Pixel und einer Höhe von 600 Pixeln erhalten.  Mein eigener Export war ungefähr 55 Kb.

Um es in Ihr Blog hochzuladen, gehen Sie zum Control Panel auf Postach.io, und klicken Sie dann auf die Registerkarte Einstellungen.  Dort sehen Sie eine Verknüpfung mit der Bezeichnung "Photo Cover" und eine Schaltfläche zum Auswählen einer Datei auf Ihrem Computer.  Sehen Sie sich die Fotodatei des Fotos an und laden Sie sie hoch:

Klicken Sie auf den Button Save Site Settings, gehen Sie zurück zu Ihrem Blog, dort sollten Sie sehen:

Footer und soziale Verbindungen

Als nächstes werden wir einen weiteren Aspekt der Website hinzufügen, der auf allen Seiten, sozialen Links und Fußzeilen sichtbar sein wird.

Fügen Sie den folgenden Code zu Ihrer theme.html unterhalb von .header_wrap div und höher hinzu .wrapper schließen Sie das div und aktualisieren Sie dann Ihren Editor auf Postach.io:

Fügen Sie diese drei Variablen Ihrer style.less-Datei hinzu:

Auch fügen Sie diese neuen Stile hinzu:

Es gibt einige grundlegende und einige ziemlich coole Dinge mit diesem Code verbunden.

Auf der Basisseite fügten wir die Felder und die Breite der Symbolleiste für soziale Netzwerke hinzu, installierten die Links darin und fügten einen Clearfix-Code hinzu.  Darüber hinaus legen wir die Grenzwerte für Farbe und Breite für Elemente des sozialen Netzwerks sowie die standardmäßigen Hintergrund- und Textfarben fest.

Wir haben auch .site_footer hinzugefügt, einen grauen Hintergrund mit Text und Abmessungen gemäß unserem PSD Design erstellt.

Der coole Teil ist, dass wir eine rein CSS-basierte Lösung verwenden, um die Breite von sozialen Links zu ändern, je nachdem wie viele es gibt.

Wenn Sie also nur Ihre Twitter-Daten in Ihrem Postach.io-Konto angegeben haben und dies der einzige Artikel ist, sehen Sie Folgendes:

Wenn Sie jedoch auch Ihre Informationen zu Facebook und Google+ eingegeben haben, sehen Sie Folgendes:

Danken Sie Lea Verou für diese Technik.

Artikelbereich hinzufügen

Jetzt sind wir bereit, den wichtigsten Teil des Blogs, den Bereich der Artikel, vorzustellen.

Fügen Sie diesen Code Ihrer theme.html-Datei und dann Ihrem Quelltext-Editor auf Postach.io zwischen Ihrer Kopfzeile und dem sozialen Link-Code hinzu:

Das erste, was in unserem main -Element passiert, ist eine konditionale Überprüfung von Aktualisierungen, um zu sehen, ob wir in der Liste der Artikel sind, d.h. auf der Startseite oder der Seite des Tags oder wenn wir im selben Artikel sind.  Das geschieht mit dem Code:

Dann können wir den Code für jede dieser Arten von Anzeigeschildern zwischen bedingten Kontrollen hinzuzufügen.

Artikellistencode

Im Code für die "Artikelliste" gibt es eine weitere bedingte Überprüfung, es beginnt zu sehen, ob wir auf der Tag-Seite sind, und wenn ja, wird der Titel für die Tag-Seite angezeigt.

Danach überprüfen wir die Verfügbarkeit des Artikels {% if Beiträge %} ... {% endif %} und den Zyklus durch sie mit dem {%  for post in posts %} ... {% endfor %} starten.  Für jeden Artikel erstellen wir ein article - Element und zeigt die Namen der Gegenstände, das Erstellungsdatum, den Inhalt des Artikels und ein Link „Mehr“.

Wir prüfen auch, ob es Evernote Typ Artikel ist, die ursprüngliche Quelle der Verknüpfung hinzugefügt, das heißt, jeder beachten Sie Web Clipper erstellt, Typ Überprüfung {% if post.type == 'link' %} ... {% endif %} und den beigefügten Link angezeigt werden, falls vorhanden.

Die letzten Teil „Artikelliste“ auf dem Bildschirm - das ist Seite Unterkunft von „Zurück“ und „Weiter“.  Beachten Sie, dass die Teilung, es nur auf der Homepage und nicht auf den Tag-Seiten funktioniert.  Wenn Sie versuchen, Teilung Tag auf der Seite zu verwenden, erhalten Sie eine Fehlermeldung.

Einzelartikelcode

Code „Single Post“ ist fast die gleiche wie für die „Post-Liste“, mit einigen Unterschieden.

Zum einen, weil es nur einen Artikel zeigt, brauchen wir nicht für einen Artikel zu überprüfen oder um den Zyklus zu starten, wir gehen Sie einfach direkt zu unserem article- Code.

Zweitens sind wir der Code-Anzeige den Artikel Tag neben dem Veröffentlichungsdatum.  Tags können nur in einem Artikel, aber nicht in der Liste der Artikel angezeigt werden.

Drittens: Wir sind nicht auf den Link „Mehr“ aus offensichtlichen Gründen, und stattdessen setzen wir die Tag-Vorlage {{ theme.social.bar }}, die soziale Sharing-Tools wird angezeigt, sowie Links „Like“ und „Folgen "auf Postach.io.

Durchsuchen Sie die Website

Fügen Sie die folgenden drei Variablen in style.less Datei:

Dann fügen Sie diese neuen Stile hinzu:

Mit dem obigen Template und Style Code sind Sie schon fertig!

Jetzt sollten Ihr Blog auf der Startseite so aussehen:

Das Seiten-Tag sieht auch so aus, aber mit einem zusätzlichen Title-Tag über der Artikelliste.

Ein Artikel sollte so aussehen:

3. Antworten Tweaks

Eines der letzten Dinge, die wir tun wollen, ist sicherzustellen, dass eingebettete iFrame-Inhalte wie YouTube-Videos verantwortungsvoll funktionieren, d.h. Sie werden entsprechend der verfügbaren Breite skaliert und behalten ihre Proportionen bei.

Das erreichen Sie, indem Sie der Vorlage direkt vor der <!-- End blog display --> Kommentar das folgende Skript hinzufügen:

Dann müssen wir einige Medienabfragen hinzufügen, um eine optimale Darstellung des Layouts zusammen mit der Verringerung der Größe des Ansichtsfensters sicherzustellen.  Fügen Sie am Ende der style.less-Datei Folgendes hinzu:

Mit Ihren iframe-Skripten und Medienabfragen sollten Sie jetzt so etwas in einem dünnen Ansichtsfenster sehen:

4. Zusätzliche Dienstleistungen

Es gibt einige zusätzliche Aspekte, die mit Design in Postach.io zu arbeiten, was wir nicht die oben ahnten, aber Sie können in der es für Ihre Anwendung interessiert.

Arten von Artikeln

Artikel in Evernote können von vier Arten sein: Artikel, Seite, Link oder Essen.  Der Einfachheit halber haben wir nur für jeden eine andere Art von Anzeige erstellt, aber Sie erinnern kann, haben wir {% if post.type == ‘link‘ %}, überprüfen Sie, dass der Link zu dem Artikel hinzugefügt werden.

Mit den gleichen Überprüfungsmethoden können Sie auch für jede Art von Artikel völlig unterschiedliche Ansichten erstellen.  Hier sind einige Informationen zu jedem dieser Typen und wie sie Teil Ihres Blogs werden können.

Artikel

{% if post.type == 'post' %}

Der übliche Standard-Artikeltyp.

Seite

{% if post.type == 'page'%}

Jeder Hinweis mit einer "Seiten" -Etikette ist nützlich zum Erstellen von statischen Seiten, wie zum Beispiel "Über mich".  Der Artikel wird aus der Artikelliste entfernt. Wenn Sie möchten, können Sie den Namen zum Menü hinzufügen.  Der Weg, das zu erreichen, wird nachstehend beschrieben.

Link

{% if post.type == 'link' %}

Jedes Element, das durch Clipping von der Website einer anderen Person mit einem Web-Clipper kommt, wird dann in Ihrem Blog neu geschrieben.

Essen

{% if post.type == 'food' %}

Ich konnte absolut nicht verstehen, wie man einen Artikel wie "Essen" erstellt.  Ich habe verschiedene Methoden mit Evernote für Mac und Evernote Food für Android verwendet.

Es scheint, dass ich nichts zu dem Abschnitt "Mahlzeit" von Evernote Food hinzufügen konnte, um es als Artikel zu tragen, weil ich es nicht mit meinem Blog-Notizbuch verbinden konnte.  Ich habe versucht, den Abschnitt „Mein Kochbuch“ sowohl über das Web Clipper und durch die Evernote Lebensmittel hinzuzufügen, und beiden Versuche wurden als Arten von Artikeln „Link“ eingestuft.  Ich habe auch versucht, Artikel als "Essen" oder "Rezept" zu markieren und sie hatten auch Pech.

Ich bin sicher, dass etwas tolles für den Artikel "Food" gebacken wird (siehe, was ich dort gemacht habe), aber im Moment müssen wir nur auf weitere Informationen warten, bevor wir sehen, was es ist.

Menü

Wenn Sie die Seiten Ihres Blogs verwenden, können Sie auch ein Menü erstellen.  Der folgende Code nimmt den Namen jeden veröffentlichten Seiten, und an das nav-Element mit einem ungeordneten Liste Menü-Links hinzufügen:

Kommentare Disqus

Sie können Ihre Website auch für eine Konversation einrichten, indem Sie den folgenden Code unter dem vorhandenen Artikelcode hinzufügen:

Obiges funktioniert mit den Informationen, die Sie auf Ihrer Postach.io-Website auf der Registerkarte Details des Control Panels hinzugefügt haben.

Zusammenfassung

Jetzt haben Sie Ihren eigenen Postach.io/Evernote  Blog und die Möglichkeit, Themen dafür zu erstellen.  Sie können die Dateien des erstellten Themas auch herunterladen, indem Sie oben in der Seitenleiste auf  Download Attachment herunterladen klicken.

Postach.io ist eine sehr interessante Plattform, die noch interessanter wird, wenn Sie sie selbst öffnen.  Ich bin sehr gespannt, was sonst noch im System funktioniert.  Vielleicht werden wir in Zukunft Evernote-Plug-Ins für die bequemere Erstellung von Blogs sehen, wie zum Beispiel eine Vorschau von Markdown usw.

Wenn Sie ein Evernote-Benutzer sind, und selbst wenn nicht, empfehle ich Postach.io eine Chance, alle neuen Arten von Blogs zu erleben.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.