nkBlog Dokumentation - V0.8

Discontinued

--> V1.0 Released und somit veraltet

INHALT 😄

  1. was dieser Blog kann
  2. Installation
  3. Ordnerstrukur
  4. Settings generieren
    1. Struktur der settings.php
    2. site_properties Array
    3. Admin Passwort setzen
    4. CSS und JS Sources festlegen
  5. die index.php
  6. Benutzung
    1. Einen Blogeintrag im Browser verfassen
    2. Einen Blogeintrag manuell im Dateisystem erstellen
      1. Ordnerstruktur
      2. die Datei index.php
      3. die Datei information.json
    3. Einen Kommentar approven
      1. Kommentare manuell approven
      2. alle Kommentare anzeigen lassen
      3. Kommentare in Blogansicht approven
    4. changelog erstellen
      1. changelog manuell anlegen
      2. changelog im Browser anlegen
    5. Übersicht admin Parameter
  7. Funktionsweise / ein Blick unter die Haube
    1. Grafik Übersicht Beziehungen
    2. functions.php
  8. massive Änderungen vornehmen
    1. static Ordner
    2. entries
    3. navigation
    4. functions
  9. Footnotes

was dieser Blog kann

  • Blogeinträge unter entries Anzeigen >> siehe Struktur
  • jüngster Blogeintrag wird automatisch auf Startseite angezeigt
  • Kommentarformular wird an jeden Entry gesetzt
  • vorhandene Kommentare mit Dropdown zum jeweiligen entry anzeigen, markdwon geparsed
  • automatische Kategorien Auflistung anhand der in den Blogentries gegebenen Kategorien
  • Admin-Bereich mit nützlichen Features
    • Write Blog
    • approve Comments
    • show all entries
    • show all comments
    • write changelog
    • Blog Editor
    • Site_properties anpassen
  • Blogeinträge können entweder im Markdown oder html geparsed werden
  • keine Datenbank nötig >> siehe Struktur
  • Website im Bootstrap Design
  • responsive Website
  • Website Design light / dark auswählbar
  • Blogtitel, Icon, Logo, Footer custom CSS kann einfach im Adminbereich geändert werden
  • changelogs können geschrieben werden (kann auch als News-Einträge genutzt werden)
  • News werden auf Startpage angezeigt
  • Blogentries werden bei 350 Zeichen abgeschnitten oder vor dem ersten <pre> oder <code> tag (damit Design nicht gestört wird, da offener Tag) und erst bei Direktaufruf komplett angezeigt
  • automatisches Code Highlighting von <pre> und <code> tags durch highlight.js 1

was der Blog in Zukunft noch können soll

  • create News
  • Anpassung der Kommentarfelder durch json / php Array Setup
  • nicht nur Blogeinträge, sondern auch Notizen / Todos / Wiki als type verarbeiten
  • Anzeige privater category nur nach login (evtl. Guest Login ermöglichen)
  • schöner großflächiger mobiler Editor / Blogwriter
  • Richtext-Editor
  • automatische Installation mittels install.php, das die Settings schon entsprechend der Wünsche anlegt

Installation

Die Installation ist denkbar einfach, es braucht keine Datenbank. Einfach alle Dateien (>> siehe Ordnerstruktur) auf den Server kopieren und loslegen.

recommended first steps

Ordnerstruktur

nachfolgend die minimalste Ordnerstruktur2:


    nkBlog/
    ├── index.php
    ├── entries/
    │   ├── 2023-09-21/
    │   │   ├── index.php
    │   │   └── information.json
    │   ├── 2023-10-02/
    │   │   ├── index.php
    │   │   └── information.json
    │   └── 2023-10-05/
    │       ├── index.php
    │       └── information.json
    ├── news/
    │   ├── current
    │   ├── current_changelog
    │   └── V0.1_changelog
    ├── pics/
    │   ├── favicon.ico
    │   └── logo.png
    └── static/
        ├── blog.css
        ├── documentation.md
        ├── footer
        ├── function.php
        ├── header
        ├── navigation
        ├── settings.php
        └── parsedown.php

Settings

Die settings.php ist standardmäßig im Ordner static/ zu finden. Man kann diese natürlich nach eigenen wünschen anpassen, Werte hinzufügen oder entfernen. Änderungen haben folgende Auswirkungen:
Verschieben der settings.php in anderen Ordner wichtig unbedingt in der header Datei unter static/ den include Befehl auf den neuen Pfad anpassen!
include_once('static/settings.php');
Werte der Keys ändern siehe site_properties und sources

Struktur

<?php

// parameter der Site hier festlegen
// Title 
// Logo Pfad
// Copyright
// author

$site_properties = array (
  'title' => 'NKBlog',
  'author' => 'nicolekaro',
  'startpage' => 'https://nicolekaro.de/nkdir/nkBlog',
  'logo' => 'https://nicolekaro.de/nkdir/nkBlog/pics/NKBlog.png',
  'version' => 'V0.8',
  'copyright' => '<a href="https://nicolekaro.de">nicolekaro</a> 2023',
  'icoPath' => 'https://nicolekaro.de/nkdir/nkBlog/pics/favicon.ico',
  'dev-mode' => true

);

define('HOME', $site_properties['startpage']);


$admin_password = "passwort123";

$sources = array(
    'bootstrapCSS'  => 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css',
    'SpecialCSS'    => 'static/blog.css',
    'bootstrapJS'   => 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js',
    'jQuery'        => 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js',
);

$styles = array(
    'navigation' => '<style>
    /* CSS für das größere Logo */
    .logo-container {
      width: 720px; /* Passe die Breite nach Bedarf an */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-image {
      width: 100%;
      height: auto;
    }
  </style>',
);

$additional = array(
    'footerScript'  => '<!-- JavaScript für das Bulma-Sandwich-Menü -->
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        // Menüschalter
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
        if ($navbarBurgers.length > 0) {
          $navbarBurgers.forEach(el => {
            el.addEventListener("click", () => {
              const target = el.dataset.target;
              const $target = document.getElementById(target);
              el.classList.toggle("is-active");
              $target.classList.toggle("is-active");
            });
          });
        }
      });
    </script>',
    'Debugging' => '<!-- debugging -->
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        // Hier dein Code, der das Dropdown aktiviert
      });
    </script>',
    );

?>

Das site_properties Array

$site_properties = array (
  'title' => 'NKBlog',
  'author' => 'nicolekaro',
  'startpage' => 'https://nicolekaro.de/nkdir/nkBlog',
  'logo' => 'https://nicolekaro.de/nkdir/nkBlog/pics/NKBlog.png',
  'version' => 'V0.8',
  'copyright' => '<a href="https://nicolekaro.de">nicolekaro</a> 2023',
  'icoPath' => 'https://nicolekaro.de/nkdir/nkBlog/pics/favicon.ico',
  'dev-mode' => true

);
key
Wert
 wird wo genutzt
'title' Titel der Website,
String		 Titel der Website, der im Browsertitelfenster angezeigt wird, ersetzt <title>
'author' Autorenangabe,
String		 Autor wird rechts im Footer angezeigt
'startpage' url zur Startseite bzw. zum Ordner, in dem nkBlog Dateien sind Home-link für das logo in der Navigation
'logo' Pfad/url zur logo-datei Logo in der Navigation
'version' Info zur aktuellen Version des Blogs,
String		 wird im Footer mit pill angezeigt
'copyright' Info zum Copyright,
String optional mit html tags		 wird links im Footer angezeigt mit © davor
'icoPath' Pfad/url zur ico Datei wird als ico für Browsertitelfenster und Bookmarks genutzt
'dev-mode' boolean (true oder false) aktiviert die php Error Ausgaben zum Debuggen wenn true

Admin Passwort setzen

Wert für folgende Variable setzen

$admin_password = " ";

Sources für Bootstrap und eigenes CSS festlegen

Sources können auch installiert und in einen Ordner gelegt werden, ich habe der Einfachheit halber öffentliche Quellen genutzt.

$sources = array(
    'bootstrapCSS'  => 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css',
    'SpecialCSS'    => 'static/blog.css',
    'bootstrapJS'   => 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js',
    'jQuery'        => 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js',
);
key
Wert
 wird wo genutzt
'bootstrapCSS' Pfad/url zum bootstrap.css wird im <head> eingebunden
'SpecialCSS' Pfad/url zu einem customCSS wird im <head> eingebunden
'bootstrapJS' Pfad/url zum bootstrap.js wird im <head> eingebunden
'jQuery' Pfad/url zu jQuery (zwingend erforderlich für Bootstrap JS in der Navigation) wird im <head> eingebunden

Footnotes
1)   Highlight.js usage: highlightjs.org
2)   Foldertree wurde generiert mit: nathanfriend
3)   noch nichts

Verweise

Diese Doku wurde in Markdown geschrieben, zum parsen auf dieser Seite wurden folgende Scripte genutzt:


  1. Highlight.js usage: highlightjs.org ↩

^ back to top ^