En 15 minutters surrealistisk CMS-integrasjon

Du har allerede bygget ditt nettsted, men hvordan skal du opprettholde det? I denne opplæringen lærer du hvordan du integrerer nettstedet ditt med Surreal CMS på under 15 minutter. Vi går over noen av "gotchas" og har deg til å redigere nesten hvilken som helst statisk nettside i løpet av kort tid.


Oversikt



Du lurer sikkert på hvordan du kan integrere hele nettstedet ditt med et CMS på bare 15 minutter. Sannheten er, på grunn av den siste trenden med "lette" innholdsstyringssystemer, blir det enklere enn noensinne å få små og mellomstore statiske nettsteder oppe og kjører i dem.

Hva er et lett CMS? For denne veiledningens skyld definerer jeg det som et brukervennlig, diskret innholdsstyringssystem som du ikke trenger å installere. Det fine med disse systemene er at du ikke engang må være vert for dem selv, og derfor tar integrering svært lite tid.

Det finnes faktisk en håndfull av disse CMS-produktene, inkludert CushyCMS, Pagelime og SimpleCMS. De fleste av disse systemene fungerer av samme grunnleggende prinsipp - du legger til class = "noe" til nesten ethvert HTML-element, koble nettstedet ditt opp til systemet, og du er ferdig. Best av alt, alle disse systemene tilbyr en gratis versjon.

Selv om hvert lett CMS-produkt har sine fordeler og ulemper, valgte jeg å jobbe med Surreal CMS på grunn av deres store funksjonssett og det enkle grensesnittet. Du ser nøyaktig hva jeg mener på et øyeblikk, men i mellomtiden er her den generelle prosessen med å integrere med noe lett CMS:

  • Lag ditt nettsted
  • Koble den til CMS
  • Aktiver websider
  • Legg til en eller flere redaktører
  • Begynn å redigere

Bare for å gjøre deg kjent med verktøyet som vi skal jobbe med, her er et raskt glimt av Surreal CMS 'webside redigering skjerm:


Designhensyn

Før du begynner å jobbe med et lett CMS, er det alltid godt å tenke på ting som tegnkoding og måten du kobler til bilder og andre ressurser. Surrealistisk CMS foretrekker at du bruker UTF-8 tegnkoding, noe som er like enkelt som å legge til følgende metatag til delen av hver nettside:

 

Det er også viktig at du kobler til dokumenter, bilder og andre ressurser på en måte som CMS kan forstå. Surrealistisk CMS fungerer best når du bruker root-relative linking eller absolutt linking:

 ... ... 

Den siste, men trolig viktigste tingen å vurdere før du kobler nettstedet ditt til Surreal CMS, er plasseringen av innholdsregioner. Her er et utmerket eksempel på en svært grunnleggende nettside som har en navigasjonsmeny, et sidebar og et hovedinnholdsområde:

    Eksempel på nettside       

Example.com

Sidebar innhold her

Ditt innhold her

© Example.com

Du har kanskje lagt merke til at jeg la til redigerbar klasser til sidefeltet og hovedinnholdsregionen. Dette er hvordan CMS vet hvilke deler av siden din det skal tillate deg å redigere. Du kan legge til redigerbar klasse til nesten hvilken som helst HTML-kode, og du kan ha så mange som du vil ha på hver side.

En annen ting du kanskje har lagt merke til var at navigasjonen er inkludert fra en egen fil via PHP. Surrealistisk CMS lar deg arbeide med inkluderte filer som dette, slik at du kan oppdatere hele sidens navigering uten å måtte redigere hver side enkeltvis.

Når du har utarbeidet sidene dine og oppsett redigerbare regioner, vil du være klar til å integrere nettstedet ditt med Surreal CMS.


Legge til nettstedet ditt til CMS

Surrealistisk CMS tilbyr både gratis og betalt kontoer. Den gratis kontoen har svært få restriksjoner, og vil være mer enn tilstrekkelig for denne tutorials skyld. Bare gå til deres hjemmeside og opprett en gratis konto.

Når kontoen din er opprettet, logg inn på CMS på http://edit-content.com/. Dette er inngangsporten til Surreal CMS-applikasjonen.

Nå som du er i, velg knappen som sier Legg til et nettsted. Her er skjemaet som du vil se:

Skriv inn nettsiden din URL, server (vanligvis ftp.your-domain.com), FTP brukernavn og FTP passord. Du kan bekrefte at du har skrevet alt riktig ved å klikke Testforbindelse.

For Website Root, er det best å klikke på Søk knappen og bruk nettleserverktøyet. I hovedsak vil nettstedet ditt bli den mappen som inneholder hjemmesiden din. Det er viktig at denne mappen er den faktiske mappen som har hjemmesiden din, slik at CMS kan ordentlig kartlegge nettadresser til bilder og andre filer.

Hvis du vil angi egendefinerte baner for dokumenter, bilder og mediefiler, velger du Avansert alternativ. Når du angir egendefinerte baner, vil den fortelle CMS der andre som redigerer nettstedet ditt, har lov til å laste opp filer. For nå kan du la disse være tomme.


Aktivering av websider

Nå som nettstedet ditt er lagt til i CMS, er neste trinn å aktivere websidene dine. I andre lette CMS-produkter kan dette være litt skatt på tiden din, men Surreal CMS har en fin skannefunksjon som automatisk aktiverer nettsider med bare et klikk.

For å begynne å aktivere sider, velg nettstedet ditt fra listen:

Deretter velger du Aktiver websider. Følgende dialogboks vises:

Velg siden eller sidene du vil kunne redigere i CMS. Når du velger dem, vises de en etter en i bakgrunnen. Som en snarvei kan du navigere til hvilken som helst katalog på nettstedet ditt og klikke Skann etter redigerbare sider. Dette vil fortelle CMS å aktivere hvilken som helst side i gjeldende katalog som har en class = "redigerbare" attributt i den. Når du er ferdig, velg Ferdig.

Som standard bruker hver side du aktiverer av siden som en etikett. Du kan enkelt endre dette til noe mer CMS-vennlig ved å klikke på <b>Rediger etikett</b>. For eksempel kan du endre etiketten for <b>index.php</b> å lese "Hjemmeside" og etiketten for <b>nav.php</b> å lese "Navigasjon".</p> <hr> <h2>Oppdaterer innholdet ditt</h2> <p> Tro det eller ei, den harde delen er over. Nå handler det bare om å komme inn der og redigere innhold. En del av grunnen til at jeg liker Surreal CMS så mye er at det strømlinjeformer det meste av oppsettet. Når det er sagt, la oss fortsette å redigere innhold.</p> <p> Når du aktiverer en eller flere nettsider, er neste trinn å begynne å redigere. Velg bare noen av sidene du har aktivert ved å klikke på den aktuelle sidetiketten. Dette tar deg til nettsideditoren, hvor du vil bruke mesteparten av tiden med dette flotte CMS.</p> <p> I nettsideditoren ser du fire kategorier:</p> <ul> <li> <b>Innhold</b> - Her finner du alle innholdsregioner.</li> <li> <b>Eiendommer</b> - Du kan redigere sidetittel, nøkkelord og beskrivelse her.</li> <li> <b>Historie</b> - Se alle revisjoner av denne siden som blir publisert i opptil 90 dager.</li> <li> <b>redaktører</b> - Se en liste over alle redaktørene som har tilgang til siden.</li> </ul> <p> Innsiden av <b>Innhold</b> fanen, forutsatt at siden din har minst en redigerbar region, ser du noe slikt:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_6.jpg"> <p> Dette bestemte eksemplet har de to redigerbare områdene vi snakket om tidligere: <b>sidebar</b> og <b>hovedinnhold</b>. Du vil legge merke til at CMS konverterte små bokstaver, underskilt-separerte ID-er i Camel Case, romavskilt etiketter for estetikk. Hvis du har mer enn ett redigerbart område på en side, kan du bytte mellom dem ved å klikke på den aktuelle knappen.</p> <p> På dette tidspunktet fungerer redigering på samme måte som i mange andre innholdsbehandlingssystemer og tekstbehandlingsprogrammer. Du kan formatere tekst, endre justering, sette inn bilder, lister, etc. Surreal CMS har til og med en innebygd filbehandling som lar deg vise, laste opp, endre navn på og slette filer og mapper. Til toppen er det også en Image Editor som lar deg endre størrelse, beskjære, rotere og flip bilder med letthet.</p> <p> Avhengig av hvilken type element du legger til <b>class = "redigerbare"</b> til, vil Surreal CMS gi et passende redigeringsverktøy. Som et eksempel, her er det en redigerbar <img> ser ut som:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_7.jpg"> <p> De <b>Rediger bilde</b> knappen lanserer Image Editor som jeg snakket om tidligere. Det er veldig enkelt å bruke, så du bør ikke ha noen problemer i det hele tatt å manipulere bildene dine. Slik ser det ut:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_8.jpg"> <p> Når du er ferdig med å redigere, kan du forhåndsvise endringene dine ved å klikke <b>Forhåndsvisning</b>. Et nytt vindu åpnes, og du får se siden din <i>nøyaktig</i> som det vil vises når publisert. Selvfølgelig, hvis du er fornøyd med endringene, klikker du på <b>publisere</b> vil lagre dem på nettstedet ditt.</p> <hr> <h2>Tillate andre mennesker å redigere nettstedet ditt</h2> <p> Nå som du vet hvordan du konfigurerer nettstedet ditt og redigerer det selv, ville det ikke vært fint å tillate andre mennesker også tilgang? Dette er spesielt nyttig for designere som vil gi klienter begrenset tilgang til å redigere sine egne nettsteder, og det er enkelt å sette opp.</p> <p> Først velger du <b>redaktører</b> kategorien fra hvor som helst i CMS og klikk på <b>Legg til en redigerer</b>. Følgende skjema vises:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_9.jpg"> <p> Bare fyll inn personens navn og e-postadresse for å starte. Deretter velger du nettsted (er) som han eller hun skal tilordnes. Hvis du vil, kan du åpne opp <b>Avansert</b> seksjonen og la redaktøren klone sider, slette sider og redigere sidegenskaper. Du kan også aktivere eller deaktivere alle valgmuligheter i verktøylinjen for rike tekstredigerere herfra.</p> <p> Når du har angitt all nødvendig informasjon, velger du <b>Legg til redigeringsprogrammet</b> og brukeren vil bli lagt til CMS. Som standard sendes en e-post til dem som inneholder brukernavn og passord. Du kan deaktivere dette, men CMS vil vise deg sitt midlertidige passord for at du skal gi dem manuelt.</p> <p> Det er et par ting du trenger å vite om redaktørkontoer. Først har de ikke tilgang til <i>alt</i> som du gjør som designer - redaktører har bare tilgang basert på nettsteder og tillatelser du tilordner dem. For det andre har redaktører ikke tilgang til ting som kildekoderedigering på full side og det ryddige verktøyet, som vi snakker om snart. Den beste måten å se hva forskjellen er mellom en designer og en redaktørkonto, er å skape deg en testredigerer med en alternativ e-postadresse.</p> <p> Før vi går videre, er det en annen funksjon som du bør vite om redaktører. Du kan blokkere dem fra å redigere bestemte sider på en per-bruker basis. Bare åpne hvilken som helst side for redigering og velg <b>redaktører</b> fane. Ved siden av redaktøren din er et alternativ til <b>Deaktiver</b> redigering. Hvis du klikker på dette, blir det forhindret at brukeren redigerer den nåværende siden.</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_10.jpg"> <hr> <h2>Andre praktiske funksjoner</h2> <p> Så langt har vi dekket alt fra å integrere Surreal CMS med nettstedet ditt til redigering av sider. Det morsomme stopper ikke der, skjønt. Her er en liste over funksjoner som du kan dra nytte av når du begynner å utforske dypere inn i hva Surreal CMS tilbyr:</p> <h3>Kloning nettsider</h3> <p> Du kan opprette nye sider ved å duplisere eksisterende. Dette er spesielt nyttig fordi du kan sette opp en eller flere tomme malingssider og la brukerne lage sider som de trenger. Du kan også slå denne på eller av for hver bruker, så flere erfarne redaktører kan ha mer kontroll over nettstedet.</p> <h3>Styling Rich Text Editor</h3> <p> Bruk stiler fra nettstedet ditt til den rike teksteditoren for å gi brukerne et lignende utseende og lignende som nettstedet. For å få tilgang til denne funksjonen, velg <b>nettsteder</b> kategorien fra hvor som helst i CMS og velg et nettsted. Du får se en knapp merket <b>Endre redigeringsstilene</b>.</p> <h3>Redigerer CSS, JavaScript og XML-filer</h3> <p> Du kan aktivere stilark, skript og XML-filer som alle andre nettsider. Selvfølgelig vil du redigere rå kildekode, så du vil kanskje blokkere uerfarne brukere fra å få tilgang til disse filtyper hvis du aktiverer dem.</p> <h3>Redigerer Full HTML Source Code</h3> <p> Mens du redigerer en nettside, vil du legge merke til en knapp merket "Rediger innholdsregioner". Dette gir deg faktisk tilgang til hele kilden til siden. Redaktører har ikke tilgang til dette verktøyet.</p> <h3>Reparere sint HTML-kode med Tidy</h3> <p> Surrealistisk CMS har et innebygd verktøy som benytter det populære HTML Tidy-biblioteket. Dette er nyttig for å fastsette nestede koder eller ugyldig HTML-kode som kan føre til problemer mens du redigerer. Du kan få tilgang til dette verktøyet fra full kildekode redigering siden.</p> <h3>Vise redigeringsaktivitet</h3> <p> Du kan se hva editors har vært opp til! Dette inkluderer hvilke sider de har tilgang til, når de ble redigert, og til og med de tider de logget på på CMS. Hvis du vil vise denne informasjonen, velger du <b>redaktører</b> kategorien fra hvor som helst i CMS og velg en editor. Klikk på redaktørens navn for å se deres siste aktivitet.</p> <h3>Pro funksjoner</h3> <p> Surrealistisk CMS er gratis å bruke for inntil tre nettsteder. Deretter ber de deg om å betale $ 25 USD per måned for sin betaltjeneste, men Pro-kontoer har også noen andre fine funksjoner. For eksempel kan du få tilgang til CMS fra ditt eget domene eller underdomene (det vil si cms.your-domain.com).</p> <p> Med en Pro-konto kan du også laste opp din egen logo og tilpasse temaet, som er ideelt for designere som ønsker å bruke CMS som en løsning for sine kunder. Her er et eksempel på hva du kan forvente når du merker CMS som ditt eget:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_11.jpg"> <hr> <h2>Tilleggsressurser</h2> <p> Nå som du vet alt grunnleggende (og noen avanserte tips også!), Her er noen nyttige ressurser for å jobbe med Surreal CMS:</p> <ul> <li>Surrealistisk CMS Hjemmeside</li> <li>Registreringsside</li> <li>CMS-dokumentasjon</li> <li>ofte stilte spørsmål</li> <li>Surrealistisk CMS Affiliate Program</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Kode</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/design/a-20-minute-intro-to-typography-basics.html">En 20 minutters introduksjon til grunnleggende typografi</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_6/a-20-minute-intro-to-typography-basics_8.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/a-12-step-beginners-guide-to-iphoneography.html">En 12-trinns nybegynners guide til iPhoneografi</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/a-12-step-beginners-guide-to-iphoneography_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Søke..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>