Zoom Search Engine nahtlos in Netobjects Fusion einfügen

Größere Webprojekte bieten Besuchern die Möglichkeit, die Webseite nach Begriffen zu durchsuchen.
Zoom Search Engine ist für kleine Projekte bis 50 Seiten kostenlos und lässt sich leicht in NOF einbinden. Auch die NOF-Tips weren via Zoom Search Engine durchsucht (siehe rechte Spalte).

Das Programm selber möchte ich jetzt nicht in den einzelnen Schritten erklären. Der Wizzard führt einen recht gut durch die Anwendung - man kann nicht viel falsch machen.

Euer NOF-Projekt ist flott indiziert - wichtig ist allerdings, dass nach jeder Änderung/Erweiterung der Seiteninhalte neu indiziert werden muss und alle Dateien auch neu hochgeladen werden.

Soll heißen, ohne erneute Indizierung werden neue Inhalte nicht erfasst.

Damit unsere eigene Suchseite nicht überschrieben wird, muss man das hochladen des Suchtemplates explizit in den FTP.-Einstellungen aussschließen (siehe Screenshot).
 

Ordnung halten - wichtig für die Referenzierung des Pfades

alle von Zoom Search Engine erstellten Dateien sollten sinnvollerweise in ein eigenes Verzeichnis auf dem Webspace.

Nehmen wir an dieses Verzeichnis heißt suche - hier legen wir alle Dateien via FTP oder direkt über den internen Programm-Upload rein.

Unter NOF müssen wir diesen Pfad nun nachstellen, indem wir das Verzeichnis suche direkt in NOF einrichten.
(ein Tutorial für eigene Verzeichnisse findet ihr hier)

Für eine einfachere Verknüpfung können wir die von ZSE erstellte search.php als Asset einfügen (auf immer publizieren stellen)  und in den neuen Ordern suche einfügen. Wir sind Fertig...

Ein Suchfeld in NOF einfügen

Für das Suchfeld benötigen wir ein Formular. Sinnvollerweise legen wir das Suchfeld in den Masterborder. Wir ziehen eine Tabelle auf - es reicht eine reihe mit ein oder zwei Spalten - und stellen die Tabelle auf Formular um.

• In die erste Zelle legen wir ein Eingabefeld und nenne dieses zoom_query - die Zelle kann wie gewohnt via Formatvorlage hübsch gemacht werden.
• Anschließend erstellen wir einen Suchen-Button - kann auch ein Bild sein - auch hier kann eine Formatvorlage zum Einsatz kommen - der Button benötigt keine weiteren Einstellungen.
• Als Aktion für das Formular suchen wir die search.php via interner Link - Fertig

da wir die search.php in NOF integriert haben, werden die Pfade von NOF auch für die Startseite richtig generiert - wer die search.php nicht als Asset integriert hat, muss für die Startseite einen eigenen Masterborder anlegen.

Eine Suchseite in NOF erstellen

Damit die Suchseite das Layout eures NOF-Projekts übernimmt, muss ein HTML-Template erstellt werden. Dieses Template sollte nicht in eurer Navigation auftauchen, daher also entweder einen Puffer einrichten oder die Seite ensprechend tief in den Ebenen verstecken.

Erstellt also eine neue Seite und benennt diese Seite search_template.html - achtet unbedingt auf die korrekte Schreibweise - diese Seite schiebt ihr anschließend in den Ordner suche.

Folgende Einfügungen müssen nun auf dieser Seite eingetragen werden.

Als erstes das CSS - es kann einfach in den Layoutbereich der Seite in die Headtags eingetragen werden - natürlich könnt ihr die Werte ändern.

• <style type="text/css">
  .highlight { background: #FFFF40; }
  .searchheading { font-size: 130%; font-weight: bold; }
  .summary { font-size: 80%; font-style: italic; }
  .suggestion { font-size: 100%; }
  .results { font-size: 100%; }
  .category { color: #999999; }
  .sorting { text-align: right; }
  
  .result_title { font-size: 100%; }
  .description { font-size: 100%; color: #008000; }
  .context { font-size: 100%; }
  .infoline { font-size: 80%; font-style: normal; color: #808080;}
  
  .zoom_searchform { font-size: 100%; }
  .zoom_results_per_page { font-size: 80%; margin-left: 10px; }
  .zoom_match { font-size: 80%; margin-left: 10px;}
  .zoom_categories { font-size: 80%; }
  .zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
  .zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }
  
  .cat_summary ul { margin: 0px; padding: 0px; display: inline; }
  .cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }
  
  input.zoom_button {  }
  input.zoom_searchbox {  }
  
  .result_image { float: left; display: block; }
  .result_image img { margin: 10px; width: 80px; border: 0px; }
  
  .result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
  .result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }
  
  .result_pages { font-size: 100%; }
  .result_pagescount { font-size: 100%; }
  
  .searchtime { font-size: 80%; }
  
  .recommended
  {
  background: #DFFFBF;
  border-top: 1px dotted #808080;
  border-bottom: 1px dotted #808080;
  margin-top: 15px;
  margin-bottom: 15px;
  }
  .recommended_heading { float: right; font-weight: bold; }
  .recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
  .recommend_title { font-size: 100%; }
  .recommend_description { font-size: 100%; color: #008000; }
  .recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
  .recommend_image { float: left; display: block; }
  .recommend_image img { margin: 10px; width: 80px; border: 0px; }
  </style>

als nächstes tragen wir ebenfalls in den Layoutbereich IN DEN BODYTAG folgendes ein:

• onload="if (document.getElementById('zoom_searchbox')) {document.getElementById('zoom_searchbox').focus();}"

zuletzt noch die eigentliche Suche - als HTML-Einfügung in Textfeld oder Zelle wie folgt...

• <!--ZOOMSEARCH-->

jetzt alles hochladen und ihr seit fertig