O integrare CRE sursă de 15 minute

Ați construit deja site-ul dvs., dar cum îl veți menține? În acest tutorial, veți învăța cum să integrați site-ul dvs. cu Surreal CMS în mai puțin de 15 minute. Vom trece peste unele dintre "gotchas" și vă veți edita aproape orice site static în cel mai scurt timp.

Prezentare generală

Probabil vă întrebați cum ați putea integra întregul dvs. site cu un CMS în doar 15 minute. Adevărul este că, datorită tendinței recente a sistemelor de gestionare a conținutului "ușoare", devine mai ușor ca niciodată să se pună în funcțiune site-uri statice de dimensiuni medii și mici.

Ce este un CMS ușor? De dragul acestui tutorial, îl definesc ca pe un sistem de management al conținutului ușor de utilizat și ușor de utilizat, pe care nu trebuie să îl instalați. Lucru frumos în legătură cu aceste sisteme este că nici măcar nu trebuie să le găzduiți singur, de aceea integrarea durează foarte puțin timp.

Există de fapt o mână de produse CMS disponibile, inclusiv CushyCMS, Pagelime și SimpleCMS. Majoritatea acestor sisteme funcționează pe același principiu de bază - adăugați class = "ceva" la aproape orice element HTML, conectați site-ul web la sistemul dvs. și ați terminat. Cel mai bun dintre toate, fiecare dintre aceste sisteme oferă o versiune gratuită.

Deși fiecare produs CMS ușor are avantajele și dezavantajele sale, am ales să lucrez cu Surreal CMS datorită setului larg de caracteristici și interfeței simple. Veți vedea exact ce vreau să spun în doar un moment, dar între timp, aici este procesul general de integrare cu orice CMS ușor:

Creați-vă site-ul web
Conectați-l la CMS
Activați paginile Web
Adăugați unul sau mai mulți editori
Începeți editarea

Doar pentru a vă familiariza cu instrumentul cu care vom lucra, aici este o privire rapidă a ecranului Surreal CMS de editare a paginilor web:

Considerații privind proiectarea

Înainte de a începe să lucrați cu un CMS ușor, este întotdeauna bine să vă gândiți la lucruri precum codarea caracterului și modul în care faceți legătura cu imaginile și alte resurse. CMS suprarealist preferă să utilizați codificarea de caractere UTF-8, ceea ce este la fel de simplu ca adăugarea metaetichetei următoare secțiune a fiecărei pagini Web:

De asemenea, este important să vă conectați la documente, imagini și alte resurse într-un mod care poate înțelege CMS. Supraal CMS funcționează cel mai bine atunci când utilizați link-ul rădăcină-relativă sau corelarea absolută:

 ... ...

Ultimul, dar probabil cel mai important lucru de luat în considerare înainte de a vă conecta site-ul până la Surreal CMS este plasarea regiunilor dvs. de conținut. Iată un excelent exemplu de pagină web de bază care are un meniu de navigare, o bara laterală și o zonă de conținut principal:

    Exemplu de pagină Web        Example.com
 
   
   Conținutul barei laterale aici
 
  Conținutul dvs. aici
 
 
  © Example.com

S-ar putea să fi observat că am adăugat editabil clase în bara laterală și în regiunea principală de conținut. Acesta este modul în care CMS știe ce secțiuni din pagina dvs. ar trebui să vă permită să le editați. Puteți adăuga editabil clasa la aproape orice etichetă HTML, și puteți avea cât mai multe pe care doriți pe fiecare pagină.

Un alt lucru pe care ați observat-o a fost că navigația este inclusă dintr-un fișier separat prin PHP. Surreal CMS vă permite să lucrați cu fișierele incluse astfel încât să puteți actualiza navigarea întregului site fără a fi nevoie să editați fiecare pagină individual.

După ce vă pregătiți paginile și configurați regiuni editabile, veți fi gata să vă integrați site-ul web cu Surreal CMS.

Adăugarea site-ului dvs. în CMS

Surreal CMS oferă atât conturi gratuite cât și plătite. Contul gratuit are foarte puține restricții și va fi mai mult decât suficient din motive de acest tutorial. Pur și simplu du-te la site-ul lor și de a crea un cont gratuit.

După crearea contului, conectați-vă la CMS la adresa http://edit-content.com/. Aceasta este poarta de acces la aplicația Surreal CMS.

Acum, când vă aflați, selectați butonul care spune Adăugați un site web. Iată forma pe care o veți vedea:

Introduceți adresa URL a site-ului web, serverul (de obicei ftp.your-domain.com), numele de utilizator FTP și parola FTP. Puteți verifica dacă ați făcut totul corect, dând clic pe Test de conexiune.

Pentru site-ul rădăcină, este mai bine să faceți clic pe Naviga și utilizați instrumentul de navigare. În esență, rădăcina site-ului dvs. web va fi folderul care conține pagina dvs. de pornire. Este important ca acest dosar să fie dosarul real care conține pagina dvs. de pornire, astfel încât CMS să poată să mute corect adresele URL către imagini și alte fișiere.

Dacă doriți să specificați căi personalizate pentru documente, imagini și fișiere media, selectați Avansat opțiune. Atunci când stabiliți căi personalizate, acesta va comunica CMS unde alte persoane care editează site-ul dvs. web au permisiunea de a încărca fișiere. Pentru moment, le puteți lăsa goale.

Activarea paginilor dvs. Web

Acum că site-ul dvs. a fost adăugat la CMS, următorul pas este să activați paginile dvs. web. În alte produse CMS ușoare, acest lucru poate fi un pic de impozitare pe timp, dar Surreal CMS are o caracteristică de scanare frumos care auto-permite pagini web cu doar un click.

Pentru a începe activarea paginilor, selectați site-ul dvs. din listă:

Apoi, selectați Activați paginile Web. Se va afișa următorul dialog:

Selectați pagina sau paginile pe care doriți să le puteți edita în CMS. Pe măsură ce le selectați, ele vor apărea câte unul în fundal. Ca o comandă rapidă, puteți naviga la orice director de pe site-ul dvs. Web și faceți clic pe Scanați paginile editabile. Acest lucru va spune CMS pentru a activa orice pagină din directorul curent care are a class = "editabil" atribuii în ea. Când ați terminat, selectați Terminat.

În mod implicit, fiecare pagină pe care o activați utilizează a paginii ca etichetă. Puteți schimba cu ușurință acest lucru la ceva mai mult CMS-friendly făcând clic pe <b>Editați eticheta</b>. De exemplu, ați putea schimba eticheta pentru <b>index.php</b> pentru a citi "Pagina de pornire" și eticheta pentru <b>nav.php</b> pentru a citi "Navigare".</p> <hr> <h2>Actualizarea conținutului dvs.</h2> <p> Credeți sau nu, partea dificilă sa terminat. Acum este doar o chestiune de a intra acolo și de a edita conținut. O parte din motivul pentru care imi place Surreal CMS este atat de mult incat sa raspandeasca majoritatea configuratiei. Acestea fiind spuse, să trecem la editarea conținutului.</p> <p> După ce activați una sau mai multe pagini web, următorul pas este să începeți editarea. Pur și simplu selectați oricare dintre paginile pe care le-ați activat făcând clic pe eticheta de pagină corespunzătoare. Acest lucru vă va duce în editorul de pagini web, unde veți petrece cea mai mare parte a timpului dvs. folosind acest CMS minunat.</p> <p> În editorul de pagini web, veți vedea patru file:</p> <ul> <li> <b>Conţinut</b> - Aici găsiți toate regiunile dvs. de conținut.</li> <li> <b>Proprietăți</b> - Puteți edita titlul paginii, cuvintele cheie și descrierea aici.</li> <li> <b>Istorie</b> - Vizualizați fiecare revizuire a acestei pagini, care devine publicată timp de până la 90 de zile.</li> <li> <b>editori</b> - Vedeți o listă cu toți editorii care au acces la pagină.</li> </ul> <p> În interiorul <b>Conţinut</b> , presupunând că pagina dvs. conține cel puțin o regiune editabilă, veți vedea ceva similar:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_6.jpg"> <p> Acest exemplu particular are cele două regiuni editabile despre care am vorbit mai devreme: <b>bara laterală</b> și <b>conținut principal</b>. Veți observa că CMS a convertit numerele cu litere mici, subchetare separate în cazul Camel, etichete separate pentru spațiu pentru estetică. Dacă aveți mai multe regiuni editabile pe o pagină, puteți comuta între ele făcând clic pe butonul corespunzător.</p> <p> În acest moment, editarea funcționează la fel ca în multe alte sisteme de gestionare a conținutului și în aplicații de procesare de text. Puteți să formatați text, să modificați alinierea, să inserați imagini, liste etc. CMS suprarealist are chiar și un built-in Manager de fișiere care vă permite să vizualizați, să încărcați, să redenumiți și să ștergeți fișiere și foldere. În plus, există și un editor de imagini care vă permite să redimensionați, să decupați, să rotiți și să răsturnați imaginile cu ușurință.</p> <p> În funcție de tipul elementului pe care îl adăugați <b>class = "editabil"</b> la, Surreal CMS va oferi un instrument adecvat de editare. De exemplu, aici este ceea ce poate fi editabil <img> se pare ca:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_7.jpg"> <p> <b>Editați imaginea</b> butonul lansează Editorul de Imagini despre care am vorbit mai devreme. Este foarte ușor de utilizat, deci nu ar trebui să aveți probleme cu manipularea fotografiilor. Iată cum arată:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_8.jpg"> <p> După ce ați terminat de editat, puteți previzualiza modificările făcând clic pe <b>previzualizare</b>. O nouă fereastră se va deschide și veți vedea pagina dvs. <i>exact</i> așa cum va apărea când este publicat. Desigur, dacă sunteți mulțumit de modificările dvs., faceți clic pe <b>Publica</b> va salva pe site-ul dvs..</p> <hr> <h2>Permite altor persoane să vă editeze site-ul</h2> <p> Acum, că știți cum să vă configurați site-ul și să-l editați singur, nu ar fi frumos să permiteți accesul altor persoane? Acest lucru este util în special pentru designerii care doresc să ofere clienților acces limitat pentru a-și edita propriile site-uri web și este simplu de configurat.</p> <p> Mai întâi, selectați <b>editori</b> din orice locație din CMS și faceți clic pe <b>Adăugați un editor</b>. Va apărea formularul următor:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_9.jpg"> <p> Pur și simplu completați numele persoanei și adresa de e-mail pentru a începe. Apoi, selectați site-ul (site-urile) pe care ar trebui să i-i fie alocat. Dacă doriți, puteți deschide <b>Avansat</b> și permiteți editorului să cloneze paginile, să șteargă paginile și să editeze proprietățile paginilor. De asemenea, puteți să activați sau să dezactivați toate opțiunile din bara de instrumente a editorului de text de aici.</p> <p> După ce ați introdus toate informațiile necesare, selectați <b>Adăugați Editor</b> iar utilizatorul va fi adăugat la CMS. Implicit, se trimite un e-mail care conține numele de utilizator și parola. Cu toate acestea, puteți dezactiva acest lucru, iar CMS vă va arăta parola temporară pentru a le furniza manual.</p> <p> Există câteva lucruri pe care trebuie să le cunoașteți despre conturile editorilor. În primul rând, ei nu au acces la <i>Tot</i> pe care o faceți ca un designer - editorii au acces numai pe site-urile Web și pe permisiunile pe care le-le atribuiți. În al doilea rând, editori nu au acces la lucruri cum ar fi editarea codului sursă de pagină completă și instrumentul Tidy, despre care vom vorbi în curând. Cea mai bună modalitate de a vedea care este diferența dintre un designer și un cont editor este să vă creați un editor de testare cu o adresă de e-mail alternativă.</p> <p> Înainte de a merge mai departe, există o altă caracteristică pe care ar trebui să o cunoașteți despre editori. Le puteți bloca de la editarea anumitor pagini pe bază de utilizatori. Pur și simplu deschideți orice pagină pentru editare și selectați <b>editori</b> tab. Lângă editorul dvs. va fi o opțiune <b>Dezactivați</b> editare. Dacă faceți clic pe aceasta, acest utilizator va împiedica editarea paginii curente.</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_10.jpg"> <hr> <h2>Alte caracteristici utile</h2> <p> Până acum, am acoperit totul, de la integrarea Surreal CMS cu site-ul dvs. web la editarea paginilor. Distracția nu se oprește, totuși. Iată o listă de caracteristici pe care le puteți profita de îndată ce începeți să explorați mai adânc în ceea ce oferă Surreal CMS:</p> <h3>Clonarea paginilor web</h3> <p> Puteți crea pagini noi prin duplicarea celor existente. Acest lucru este util mai ales pentru că puteți să configurați una sau mai multe pagini șablon goale și să permiteți utilizatorilor să creeze pagini de care au nevoie. De asemenea, puteți activa sau dezactiva acest lucru pentru fiecare utilizator, astfel încât editori mai experimentați pot avea mai mult control asupra site-ului.</p> <h3>Modelarea editorului de text îmbogățit</h3> <p> Aplicați stiluri de pe site-ul dvs. web la editorul bogat de text pentru a oferi utilizatorilor un aspect similar și simțiți-vă similar cu site-ul web. Pentru a accesa această caracteristică, selectați <b>Site-uri</b> din orice locație din CMS și alegeți un site Web. Veți vedea un buton etichetat <b>Modificați stilurile editorului</b>.</p> <h3>Editarea fișierelor CSS, JavaScript și XML</h3> <p> Puteți activa foile de stil, scripturile și fișierele XML la fel ca orice altă pagină Web. Desigur, veți edita codul sursă brut, astfel încât este posibil să doriți să blocați accesul utilizatorilor neexperimentați la aceste tipuri de fișiere dacă le activați.</p> <h3>Editarea codului HTML complet</h3> <p> În timp ce editați o pagină web, veți observa un buton numit "Editare regiuni de conținut". Acest lucru vă permite de fapt accesul la codul sursă complet al paginii. Editorii nu au acces la acest instrument.</p> <h3>Repararea Codului HTML murdar cu Tidy</h3> <p> Surreal CMS are un instrument construit care utilizează biblioteca populare HTML Tidy. Acest lucru este util pentru fixarea etichetelor imbricate sau a codului HTML nevalid care ar putea cauza probleme în timpul editării. Puteți accesa acest instrument din pagina de editare completă a codului sursă.</p> <h3>Vizualizarea activității editorului</h3> <p> Puteți vedea ce au făcut editorii dvs.! Acestea includ paginile pe care le-au accesat, când au fost editate și chiar și momentele în care au fost conectați la CMS. Pentru a vizualiza aceste informații, selectați <b>editori</b> din orice locație din CMS și alegeți un editor. Faceți clic pe numele editori pentru a vedea activitatea lor recentă.</p> <h3>Pro caracteristici</h3> <p> Surreal CMS este gratuit pentru a utiliza până la trei site-uri web. După aceea, vă cer să plătiți 25 USD pe lună pentru serviciul plătit, dar conturile Pro au și alte câteva caracteristici frumoase. De exemplu, puteți accesa CMS din propriul domeniu sau subdomeniu (adică cms.your-domain.com).</p> <p> Cu un cont Pro, puteți încărca și logo-ul propriu și personalizați tema, care este ideală pentru designerii care doresc să utilizeze CMS ca soluție pentru clienții lor. Iată un exemplu despre ceea ce vă puteți aștepta când marcați CMS ca pe propriul dvs .:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_11.jpg"> <hr> <h2>Resurse aditionale</h2> <p> Acum că știți toate elementele de bază (și câteva sfaturi avansate, de asemenea!), Iată câteva resurse utile pentru lucrul cu Surreal CMS:</p> <ul> <li>Surreal CMS Homepage</li> <li>Pagină de înscriere</li> <li>Documentație CMS</li> <li>întrebări frecvente</li> <li>Surreal CMS Afiliere 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">Cod</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">Un 20 de minute de introducere a tipografiei de bază</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">Un ghid pentru începători în 12 pași pentru iPhoneografie</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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </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="Căutare..."> <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>