GeekBlog

Hvordan implementere man "Front End - Søgning" på sin ghost side?

Som standard er der ikke nogen søgefunktion i Ghost (front end) - Så derfor har jeg lavet denne lille guide, som måske kan bruges :) - Guiden er lavet ud fra denne side

Punkt 1.

Start med at finde den nyeste version af ”Ghost Content API" fra unpkg.com.

Lige pt er det version 1.3.7 - Brug altid den nyeste verison!

Hvis du klikker HER, vil du få et link som vist nedenunder:

https://unpkg.com/@tryghost/content-api@1.3.7/umd/content-api.min.js

Kopiere linket, og sæt den ind mellem følgene tags (Der hvor der står LINK HER :).

<script src="LINK HER"></script>

Det vil give et link som ser sådan ud

<script src="https://unpkg.com/@tryghost/content-api@1.3.7/umd/content-api.min.js"></script>

Gem linket, da du skal bruge det i punkt 4

Punkt 2.

Så skal vi finde den nyeste version af "ghost-search.js", dette gøres på samme måde som du gjorde i Punkt 1. - Scriptet findes på -> DENNE side - Lige pt er den nyeste version 1.1.0!

Højre klik på ghost-search.js - og "Kopiere link"  

Sæt den ind mellem følgene tags.

<script src="LINK HER"></script>

Det vil give følgene link:

<script src="https://cdn.jsdelivr.net/npm/ghost-search@1.1.0/dist/ghost-search.js"></script>

Gem linket, da du skal bruge det i punkt 4

Punkt 3.

Gå til Ghost admin -> Settings -> Integrations -> add custom integration

Det vil sådan ud! Bemærk dette er "demo keys"

Kopiere "Content API Key" samt "API URL" - Du skal bruge det i punkt 4

Punkt 4.

Gå til Ghost admin -> Settings -> Code injection -> Site Footer! Indsæt følgene kode..  

<script src="https://unpkg.com/@tryghost/content-api@1.3.7/umd/content-api.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ghost-search@1.1.0/dist/ghost-search.js"></script>

<script>
    let ghostSearch = new GhostSearch({
    url: 'INDSET API URL" FRA PUNKT 3 HER',
    key: 'INDSET CONTENT API KEY FRA PUNKT 3 HER',
    version: 'v3',
    input: '#ghost-search-field',
    results: '#ghost-search-results',
    button: '',
    development: false,
    defaultValue: '',
    template: function(result) {
        let url = [location.protocol, '//', location.host].join('');
        return '<a href="' + url + '/' + result.slug + '/">' + result.title + '</a>';  
    },
    trigger: 'focus',
    options: {
        keys: [
            'title'
        ],
        limit: 100,
        threshold: -3500,
        allowTypo: false
    },
    api: {
        resource: 'posts',
        parameters: { 
            limit: 'all',
            fields: ['title', 'slug'],
            filter: '',
            include: '',
            order: '',
            formats: '',
        },
    },
    on: {
        beforeDisplay: function(){},
        afterDisplay: function(results){},
        beforeFetch: function(){},
        afterFetch: function(){}
    }
}

Bemærk: Vi har sat de to links ind i toppen som vi fandt i punkt 1 & 2 - yderlig skal du sætte "API URL" og "CONTENT API KEY" ind som vi fandt i punkt 3

Punkt 5.

Gå til Ghost admin -> Settings -> Code injection -> Site Header, og indsæt følgene style.

<!-- Ghost search -->

<style>
    
#ghost-search-results a {
  display: block;
}
  
# ghost-search-results  {
    width: 100%;
}
#ghost-search-results {
    margin-top:8px;
}
#ghost-search-results a {
    color: #505050;
    margin-bottom: 8px;
}
  #ghost-search-results a:hover {
    color:  #0960a7;
}
</style>

OBS. Du er self. velkommen til at rette CSS koden der er posted i punkt 5  ^^

Punkt 6

Tilføj følgende code i din .hbs fil hvor du vil have "Search input" skal være.

<input id="ghost-search-field">

Tilføj følgende code i din .hbs fil hvor du vil have "Search results" skal være.

<div id="ghost-search-results"></div>

F.eks jeg har tilføjet  det i en "Box" oppe til venstre helt i top  - med følgende kode

<!-- start widget -->
<div class="widget">
	<h4 class="title">Søg</h4>
	<div class="content">
	<input id="ghost-search-field">
	<div id="ghost-search-results"></div>
	</div>
</div>
<!-- end widget -->

Så "skulle" det virke. Du kan det i funktion på min side: https://www.geekblog.dk (Top til højre)

Denne guide er lavet ud fra https://github.com/HauntedThemes/ghost-search -

Jeg håber denne guide kunne bruges. Hvis du skulle have spørgsmål, er du velkommen til at kontakte mig i mig via "Comments" sektionen, eller via min kontakt side!

Author image
Knebel - Denmark Hjemmeside
Jeg hedder Thomas Due Halfdaner, og står for daglige drift af siden. Jeg er en ”ung” mand på 36 år. – Jeg bliver betragtet som en IT-nørd! - Og ja, det er jeg stolt af!