-
Notifications
You must be signed in to change notification settings - Fork 2
/
blogsuche.html
executable file
·199 lines (155 loc) · 14.6 KB
/
blogsuche.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Mein Blog durchsuchen mit DuckDuckGo // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Anfang August habe ich mein Blog mit einem Suchfeld ausgerüstet. Meine Seite lässt sich nun mit DuckDuckGo nach Stichworten durchforsten.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="[email protected]" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/blogsuche.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2020-08-24">Mo, 24. Aug. 2020</time>
<h1>Mein Blog durchsuchen mit DuckDuckGo</h1>
<p>Ende November werden es zehn Jahre, dass ich mit dem Bloggen begonnen habe; da haben sich eine ganze Menge Artikel zu sehr unterschiedlichen Themen angesammelt. Alle Texte finden sich mit einer kurzen Inhaltsangabe zwar auf meiner <a href="archiv.html">Archivseite</a>, aber es dauert schon eine Weile diese Liste durchzusehen.</p>
<p>Blogartikel, die ich persönlich für besonders lesenswert halte, habe ich in zwei Jubiläums-Einträgen gesammelt. So bieten <a href="blogeintrag-50.html">mein 50.</a> und mein <a href="blogeintrag-100.html">100. Blogartikel</a> einen schnellen Zugriff auf meine Favoriten. Was aber, wenn jemand nach einem bestimmten Stichwort sucht? Zum Beispiel weil sie oder ihn Pflanzen, Fußball oder Origami interessieren?</p>
<h2 id="ein-einfaches-suchformular">Ein einfaches Suchformular</h2>
<p>Für diesen Fall habe ich seit diesem Monat auch eine Suchfunktion in meinem Blog. Es ist im Grunde nur ein einfaches HTML-Formular mit einem Textfeld (<code>id="q"</code>) und einer Schaltfläche mit Lupe:</p>
<pre><code><form method="GET" action="ergebnisseite.php">
<input type="text" id="q">
<input type="submit" value="🔍">
</form>
</code></pre>
<p>Beim Klick auf die Lupe würde normalerweise das Suchwort an den Server geschickt, wo meine Website gespeichert ist. Dann fände eine Datenbank-Abfrage statt, die entsprechenden Treffer würden gesammelt und mit PHP dynamisch auf einer Ergebnisseite aufgelistet.</p>
<p>Doch da gibt es ein Problem: Mein Blog ist statisch. Das heißt, alle Seiten sind fertig gebaut, es gibt keine Datenbank mit einzelnen Inhalten, keinen Server mit dynamischem PHP und keine Ergebnisseite, die abhängig vom Suchbegriff jedes Mal etwas anderes anzeigen könnte. Meine Website kann sich nicht selbst durchsuchen.</p>
<h2 id="für-die-funktion-externe-suchmaschine">Für die Funktion: Externe Suchmaschine</h2>
<p>Zum Glück gibt es ja schon Suchmaschinen, die mein Blog nach einem Stichwort durchforsten könnten. Die meisten Leute verwenden zur Internetsuche vermutlich Google. Dort gibt es – wie bei <a href="https://www.bing.com/">Bing</a>, <a href="https://www.ecosia.org/">Ecosia</a> oder <a href="https://metager.de/">MetaGer</a> – Parameter, um nur auf einer bestimmten Seite zu suchen. Gibt man ins Google-Feld zum Beispiel folgendes ein: <a href="https://www.google.de/search?q=giraffe+site%3Atagesschau.de">Giraffe site:tagesschau.de</a> – dann spuckt Google zum Suchwort „Giraffe“ nur Treffer von <em>tagesschau.de</em> aus.</p>
<p>Für meine Blogsuche wollte ich allerdings keine Suchmaschine verwenden, die jeden Klick registriert, Datenprofile ihrer Nutzer:innen anlegt und kaum erkennbare Werbung unter die Suchtreffer mischt. Darum habe ich mich für DuckDuckGo entschieden. Dieser Anbieter verspricht, keine Daten zu sammeln, um Suchergebnisse oder Werbung auf das Surfverhalten anzupassen. Ich nutze DuckDuckGo im Alltag schon länger, denn es bietet mit sogenannten <a href="https://duckduckgo.com/bang">!bangs</a> (engl.) die Möglichkeit, schnell zwischen verschiedenen Suchmaschinen zu wechseln.</p>
<p>Beim obigen Suchformular trägt man also die Adresse <em>duckduckgo.com</em> ein. Außerdem habe ich einen Platzhalter-Text (<code>placeholder</code>) und Beschreibungen für eine bessere Barrierefreiheit ergänzt (<code>aria-label</code>):</p>
<pre><code><form method="GET" action="https://duckduckgo.com/">
<input type="text" id="q" placeholder="Suche mit DuckDuckGo"
aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
</code></pre>
<p>Na, sieht schon etwas komplizierter aus? Versuch ruhig mal, den Code zu lesen und zu verstehen, was die einzelnen Teile bedeuten. Vielleicht fällt dir dann auf, dass DuckDuckGo noch gar weiß, dass es doch nur auf <em>charakterziffer.github.io</em> suchen soll.</p>
<p>Dafür nennen wir das Suchfeld mit der <code>id="q"</code> erst mal um in <code>id="keyword"</code>. Dann fügen wir ein neues Feld mit <code>id="q"</code> (und <code>name="q"</code>) ein, verstecken es aber mit <code>type=hidden</code>:</p>
<pre><code>…
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo"
aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
…
</code></pre>
<p>DuckDuckGo interessiert nur der Inhalt des versteckten <code>q</code>-Feldes. Sobald man auf den Knopf mit der Lupe drückt, soll der Suchbegriff aus dem <code>keyword</code>-Feld in das entscheidende Feld <code>q</code> geschrieben werden und dazu das <em>site:charakterziffer.github.io</em>, um nur in meinem Blog zu suchen:</p>
<pre><code>onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'"
</code></pre>
<p>Dieser Code bedeutet im Einzelnen: Beim Abschicken (<code>onsubmit</code>) führe folgendes <code>javascript</code> aus, nämlich: Suche auf der Website (im <code>document</code>) nach dem Feld mit der <em>id="q"</em> (<code>getElementById('q')</code>) und gib ihm den Inhalt (bzw. „Wert“, <code>value</code>) aus dem Feld mit <em>id="keyword"</em> + dem <code>site:charakterziffer.github.io'</code>. Damit wird das Suchwort und die site-Angabe gleichzeitig an DuckDuckGo verschickt.</p>
<h2 id="das-ganze-suchformular">Das ganze Suchformular</h2>
<p>… sieht jetzt schon etwas umfangreicher aus:</p>
<pre><code><form method="GET" action="https://duckduckgo.com/"
onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo"
aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
</code></pre>
<p>Aber das war’s dann auch schon. Zumindest fast: Für’s Auge habe ich noch einige Parameter ergänzt, mit denen DuckDuckGo die Farben und Funktion der Ergebnisseite anpasst. Aber ich denke, wir hatten in diesem Blogartikel schon genug Code. Wer’s genau wissen will, kann in den Quelltext meiner Website gucken und sich auf der <a href="https://duckduckgo.com/params">Erklärseite zu den Parametern</a> einlesen.</p>
<p>Natürlich sind die Suchergebnisse nun extern auf <em>duckduckgo.com</em> und nicht unter der Adresse meines eigenen Blogs – denn das ist ja statisch und kann keine spontan zusammengestellten Suchtreffer anzeigen. Damit kann ich aber ganz gut leben.</p>
<p>Ich hoffe, das Suchfeld oben rechts bietet allen Leser:innen eine praktische Möglichkeit, bestimmte Inhalte in meinem Blog zu finden – selbst wenn ein Artikel schon etwas älter ist und im Archiv weiter unten steht.</p>
<p>PS: Wer für sein eigenes Blog lieber eine externe Suche mit Google machen möchte, trage im HTML-Formular als Zieladresse einfach <code>https://www.google.com/search</code> ein, beziehungsweise für Bing <code>https://www.bing.com/search</code>.</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?methodik">#methodik</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/blogsuche">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="ueberstrahlung.html">← Licht macht dick</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="spinatsouffle.html">Spinatsoufflé →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>