Gutenberg Kaikki mitä sinun tarvitsee tietää WordPressin uusimmasta editorista
Gutenberg on uusi editori WordPressille korvaa nykyinen TinyMCE-virtalähde. Se on kunnianhimoinen hanke, joka todennäköisesti muuttaa WordPressia monin tavoin ja vaikuttaisi sekä tavallisiin loppukäyttäjiin että kehittäjiin, erityisesti niihin, jotka ovat riippuvaisia editori-näytöstä työskentelemään WordPressissa. Tässä on, miten se näyttää.
Gutenberg esittelee myös uuden paradigman WordPressissa “Lohko”.
“Lohko” on abstrakti termi, jota käytetään kuvaamaan yksikköä jotka muodostavat verkkosivun sisällön tai ulkoasun. Idea yhdistää käsitteet siitä, mitä WordPressissa tänään saavutamme lyhytkoodit, mukautettu HTML-koodi ja upotuksen löytäminen yhdeksi johdonmukaiseksi API: ksi ja käyttäjäkokemus.
Projektin käyttöönotto
Tietäen, että Gutenberg on rakennettu Reactin päälle, jotkut kehittäjät ovat huolissaan siitä, että este on liian korkea aloittelijoille Gutenbergin kehittämiseen.
React.js: n käyttöönotto voi olla aika aikaa vievää ja hämmentävää, jos olet juuri aloittanut sen. Tarvitset ainakin JSX-muuntajan, Babelin, koodista riippuen saatat tarvita joitakin Babelin laajennuksia ja Bundler, kuten Webpack, Rollup tai Parcel.
Onneksi, jotkut WordPress-yhteisöistä tehostivat ja yrittävät tehdä Gutenbergin kehittämisen mahdollisimman helpoksi kaikille. Tänään meillä on työkalu, joka luo Gutenbergin kattilan voimme aloittaa kirjoittamisen heti sen sijaan, että käytettäisiin työkaluja ja kokoonpanoja.
Luo Guten-lohko
luoda-guten-lohko on Ahmad Awaisin käynnistämä hanke. Se on a nolla-määritystyökalusarja (# 0CJS) jonka avulla voit kehittää Gutenberg-lohkoa nykyaikaisilla kaseteilla, kuten React, Webpack, ESNext, Babel, ESLint ja Sass. Noudata ohjeita Luo Guten-lohko.
ES5: n käyttäminen (ECMAScript 5)
Kaikkien näiden työkalujen avulla voit luoda yksinkertaisen “Hei maailma” lohko saattaa tuntua aivan liian paljon. Jos haluat säilyttää pinoasi vähärasvaisen, voit itse kehittää Gutenberg-lohkon käyttämällä hyväkuntoista ECMAScript 5 -ohjelmaa, jonka olet jo tuntenut. Jos sinulla on WP-CLI 1.5.0 on asennettu tietokoneeseen, voit yksinkertaisesti ajaa…
wp rakennusteline[--Title = ] [- dashicon =<dashicon>] [- luokka =<category>] [--theme] [- plugin =<plugin>] [- force]</pre> <p>… <strong>luo Gutenberg-lohkon boilerplate pluginille tai teemaan</strong>. Tämä lähestymistapa on järkevämpää erityisesti olemassa oleville plugineille ja teemoille, jotka olet kehittänyt ennen Gutenbergin aikakautta.</p> <p>Sen sijaan, että luot uuden pluginin Gutenberg-lohkojen mukauttamiseksi, kannattaa ehkä yhdistää lohkot laajennuksiin tai teemoihin. Ja jotta tämä opetusohjelma olisi helppo seurata kaikille, <strong>käytämme ECMAScript 5: tä WP-CLI: llä</strong>.</p> <h4>Uuden lohkon rekisteröinti</h4> <p>Gutenberg on parhaillaan kehitetty pluginiksi, ja se yhdistetään WordPress 5.0: een aina, kun joukkue tuntee olevansa valmis. Joten toistaiseksi sinun on asennettava se <strong>Plugins-sivu <code>wp-admin</code></strong>. Kun olet asentanut ja aktivoinut sen, suorita seuraava komento Terminalissa tai komentokehotteessa, jos olet Windows-koneessa.</p> <pre name="code"> wp scaffold block sarja --title = "HTML5 Series" - teema</pre> <p>Tämä komento luo lohkon aktiiviseen teemaan. Lohko koostuu seuraavista tiedostoista:</p> <pre name="code"> . â ??  ?? â ??  ?? â ??  ?? sarja â        â ??  ?? â ??  ?? â ??  ?? block.js â        â ??  ?? â ??  ?? â ??  ?? editor.css â        â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? series.php </pre> <p>Let's ladataan lohkojen päätiedosto <code>functions.php</code> teemastamme:</p> <pre name="code"> jos (function_exists ('register_block_type')) vaatii get_template_directory (). '/Blocks/series.php'; </pre> <p>Huomaa, että liitämme tiedoston lataamisen ehdolliseen. Tämä takaa <strong>yhteensopivuus aiemman WordPress-version kanssa, että lohkomme on ladattu vain, kun Gutenberg on läsnä</strong>. Lohkon pitäisi nyt olla käytettävissä Gutenbergin käyttöliittymässä.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Näin se näyttää, kun asetamme lohkon.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenbergin sovellusliittymät</h3> <p>Gutenberg esittelee kaksi API-ryhmää uuden lohkon rekisteröimiseksi. Jos katsomme <code>series.php</code>, löydämme seuraavan koodin, joka rekisteröi uuden lohkon. Se myös <strong>lataa tyylisivu ja JavaScripts etupäähän ja editoriin</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Kuten edellä näemme, meidän lohkomme on nimetty <code>twentyseventeen / sarja</code>, Lohkon nimen on oltava ainutlaatuinen ja nimikyltti, jotta vältetään törmäykset muiden laajennusten tuomien muiden lohkojen kanssa.</p> <p>Lisäksi, <strong>Gutenberg tarjoaa joukon uusia JavaScript-sovellusliittymiä vuorovaikutuksessa “Lohko” liitäntä</strong> editorissa. Koska sovellusliittymä on varsin runsas, keskitymme joihinkin erityispiirteisiin, joiden mielestä sinun pitäisi tietää, että saat yksinkertaisen, mutta toimivan Gutenberg-lohkon.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Ensinnäkin aiomme tutkia <code>wp.blocks.registerBlockType</code>. Tätä toimintoa käytetään <strong>rekisteröidä uusi “Lohko” Gutenbergin editoriin</strong>. Se vaatii kaksi argumenttia. Ensimmäinen argumentti on lohkon nimi, jonka tulisi seurata <code>register_block_type</code> toiminto PHP-puolella. Toinen argumentti on <strong>Lohko-ominaisuuksia määrittävä kohde</strong> kuten otsikko, luokka ja pari toimintoa, jotta Block-liitäntä saadaan aikaan.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5-sarja'), luokka: "widgetit", avainsanat: ['html'], muokkaa: toiminto (rekvisiitta) , tallenna: toiminto (rekvisiitta) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Tämän toiminnon avulla voit luoda elementin “Lohko” postin editorissa. <code>wp.element.createElement</code> toiminto on pohjimmiltaan reaktion otto <code>createElement ()</code> toiminto hyväksyy sen, että se hyväksyy samat argumentit. Ensimmäinen argumentti ottaa elementin tyypin esimerkiksi kohdan, a <code>jänneväli</code>, tai a <code>div</code> kuten alla:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Me voimme <strong>alias toiminto muuttujaksi</strong> joten se on lyhyempi kirjoittaa. Esimerkiksi:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>Jos sinä <strong>mieluummin käyttää uutta ES6-syntaksia</strong>, voit myös tehdä sen näin:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>Voimme myös <strong>lisää elementtimääritteet</strong> kuten <code>luokka</code> nimi tai <code>id</code> toinen parametri seuraavasti:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'));</pre> <p> <code>div</code> että luomamme ei olisi järkevää ilman sisältöä. Me voimme <strong>lisää sisältö kolmannen parametrin argumenttiin</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'Tämä artikkeli on osa "HTML5 / CSS3-opetusohjelmien sarjaa" - omistettu auttaa sinua tekemään paremmaksi suunnittelijaksi ja / tai kehittäjäksi. Klikkaa tästä nähdäksesi lisää saman sarjan artikkeleita ”);</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> sisältää Gutenbergin komponenttien kokoelman, kuten nimikin viittaa. Nämä komponentit ovat teknisesti React custom -komponentteja, joihin kuuluu Button, Popover, Spinner, Tooltip ja joukko muita. Me voimme <strong>käytä näitä osia uudelleen omaan lohkoon</strong>. Seuraavassa esimerkissä lisätään painikekomponentti.</p> <pre name="code"> var Button = wp.components.Button; el (painike, 'class': 'download-button', ►, 'Download');</pre> <h4>määritteet</h4> <p>Ominaisuudet ovat tapa tallentaa tiedot lohkoon, nämä tiedot voivat olla sisältöä, värejä, kohdistuksia, URL-osoitteita jne. Saatamme attribuutit Ominaisuudet-välilehdeltä <code>muokata()</code> toiminto:</p> <pre name="code"> muokkaa: toiminto (rekvisiitta) var content = props.attributes.seriesContent; palaa el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), sisältö); </pre> <p>Jos haluat päivittää määritteet, käytämme <code>setAttributes ()</code> toimia. Tyypillisesti muuttaisimme tietyn toiminnon sisältöä, kuten kun painiketta napsautetaan, tulo täytetään, vaihtoehto valitaan jne. Seuraavassa esimerkissä käytämme sitä lisäämään <strong>perääntyä</strong> lohkomme sisällöstä, jos tapahtui jotain odottamatonta <code>seriesContent</code> ominaisuus.</p> <pre name="code"> muokkaa: toiminto (rekvisiitta) if (tyyppi props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: Hello World! Tässä on varmuuskopio-sisältö. ' ) var content = props.attributes.seriesContent; paluu [el ('div', 'class': 'series-html5', 'id': 'sarja-html-post-id-001'), sisältö),]; </pre> <h4>Lohkon tallentaminen</h4> <p> <code>Tallentaa()</code> toiminto toimii samalla tavalla kuin <code>muokata()</code>, paitsi se määrittelee lohkon sisällön tallentaaksesi postitietokantaan. Lohkon sisällön tallentaminen on melko yksinkertaista, kuten seuraavassa:</p> <pre name="code"> tallenna: toiminto (rekvisiitta) if (! rekvisiitta ||! props.attributes.seriesContent) paluu; var content = props.attributes.seriesContent; paluu [el ('div', 'class': 'series-html5', 'id': 'sarja-html-post-id-001'), sisältö),]; </pre> <h3>Mitä seuraavaksi?</h3> <p>Gutenberg muuttaa WordPress-ekosysteemiä parempaan (tai mahdollisesti huonompaan). Sen avulla kehittäjät voivat <strong>ottaa käyttöön uusi tapa kehittää WordPress-laajennuksia ja teemoja</strong>. Gutenberg on vain alku. Pian “Lohko” paradigmaa laajennetaan muihin WordPress-alueisiin, kuten Asetusten sovellusliittymiin ja widgetiin.</p> <p>Opi JavaScript syvästi; se on ainoa tapa päästä Gutenbergiin ja pysyä tärkeänä WordPress-alan tulevaisuudessa. Jos olet jo perehtynyt JavaScript-perusasioihin, quirksiin, toimintoihin, työkaluihin, tavaroihin ja pahoihin, olen varma, että nouset nopeuteen Gutenbergin kanssa.</p> <p>Kuten mainittiin, Gutenberg paljastaa runsaasti API: ita, joka riittää tekemään melkein mitä tahansa Blockiin. Voit valita, haluatko <strong>koodaa lohko, jossa on vanha vanha JavaScript, JavaScript, jossa on ES6-syntaksi, React tai jopa Vue</strong>.</p> <h4>Ideoita ja inspiraatioita</h4> <p>Olen luonut hyvin (hyvin) yksinkertaisen Gutenberg-lohkon, jonka löydät Github-tilisi arkistosta. Lisäksi olen koonnut myös useita arkistoja, joista voit inspiroida monimutkaisemman lohkon rakentamista.</p> <ul><li>Gutenblocks - Mathieu Vietin lohkojen kokoelma, joka on kirjoitettu JavaScriptissä ES5-syntaksilla</li> <li>Jetpack Gutenblocks Project - kokoelma lohkoja, jotka on yhdistetty Jetpackiin</li> <li>Luettelo esimerkkejä Gutenbergin toteutuksesta, mukaan lukien Vue.js</li> </ul><h3>Lisäohje</h3> <ul><li>Gutenbergin virallinen arkisto</li> <li>Gutenbergin käsikirja</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Hack IKEA Lack -taulukko Komponenttitelineeseen</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Hack Apart vanhan näppäimistön avulla voit luoda mukautetun käyttöliittymän</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Opas Windows 10 Task Manageriin - Osa II</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Seuraava artikkeli</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Hack 10 dollarin taskulamppu erittäin kirkkaaseen Premium One -laitteeseen</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Edellinen artikkeli</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Opas Windows 10 Task Manageriin - Osa III</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Hyödyllisiä tietoja ja verkkokehitysvinkkejä. Ohjelmointi, web-suunnittelu, CSS, HTML, JAVASCRIPT. Määritä ja asenna WINDOWS uudelleen. Sivustojen ja sovellusten luominen tyhjästä. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <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> <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> </body> </html>