From 31cbeabde564238c7613d0bcd0f896bf0b2a3669 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Mon, 26 Jul 2021 01:25:22 +0300 Subject: [PATCH] fresh start --- README.md | 40 ---- articles/bir-programin-sesini-yansitma.md | 32 --- articles/firefox-ayarlarini-kaydetme.md | 33 --- ...loji-rehberleri-icin-post-nasil-yazilir.md | 194 ----------------- articles/websitenize-tema-ekleme.md | 206 ------------------ articles/wordpress-nedir.md | 87 -------- blogit | 203 ----------------- blogit.1 | 157 ------------- config | 2 - .../bir-programın-sesini-yansıtma-01.webp | Bin 68172 -> 0 bytes .../bir-programın-sesini-yansıtma.webp | Bin 100450 -> 0 bytes .../firefox-ayarlarini-kaydetme1.webp | Bin 36900 -> 0 bytes .../firefox-ayarlarini-kaydetme2.webp | Bin 17004 -> 0 bytes .../firefox-ayarlarini-kaydetme3.webp | Bin 30219 -> 0 bytes ...-rehberleri-icin-post-nasil-yazilir-1.webp | Bin 9862 -> 0 bytes ...-rehberleri-icin-post-nasil-yazilir-2.webp | Bin 2332 -> 0 bytes ...-rehberleri-icin-post-nasil-yazilir-3.webp | Bin 22572 -> 0 bytes ...-rehberleri-icin-post-nasil-yazilir-4.webp | Bin 12494 -> 0 bytes data/pictures/websitenize-tema-ekleme-01.webp | Bin 9698 -> 0 bytes data/pictures/websitenize-tema-ekleme.webp | Bin 5768 -> 0 bytes data/style.css | 91 -------- templates/article_entry.html | 1 - templates/article_footer.html | 1 - templates/article_header.html | 1 - templates/article_list_footer.html | 10 - templates/article_list_header.html | 1 - templates/article_separator.html | 0 templates/footer.html | 11 - templates/header.html | 16 -- templates/index_footer.html | 0 templates/index_header.html | 5 - templates/tag_entry.html | 1 - templates/tag_index_footer.html | 0 templates/tag_index_header.html | 5 - templates/tag_list_footer.html | 1 - templates/tag_list_header.html | 1 - templates/tag_separator.html | 1 - örnek.md | 25 --- 38 files changed, 1125 deletions(-) delete mode 100644 README.md delete mode 100644 articles/bir-programin-sesini-yansitma.md delete mode 100644 articles/firefox-ayarlarini-kaydetme.md delete mode 100644 articles/teknoloji-rehberleri-icin-post-nasil-yazilir.md delete mode 100644 articles/websitenize-tema-ekleme.md delete mode 100644 articles/wordpress-nedir.md delete mode 100755 blogit delete mode 100644 blogit.1 delete mode 100644 config delete mode 100644 data/pictures/bir-programın-sesini-yansıtma-01.webp delete mode 100644 data/pictures/bir-programın-sesini-yansıtma.webp delete mode 100644 data/pictures/firefox-ayarlarini-kaydetme1.webp delete mode 100644 data/pictures/firefox-ayarlarini-kaydetme2.webp delete mode 100644 data/pictures/firefox-ayarlarini-kaydetme3.webp delete mode 100644 data/pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-1.webp delete mode 100644 data/pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-2.webp delete mode 100644 data/pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-3.webp delete mode 100644 data/pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-4.webp delete mode 100644 data/pictures/websitenize-tema-ekleme-01.webp delete mode 100644 data/pictures/websitenize-tema-ekleme.webp delete mode 100644 data/style.css delete mode 100644 templates/article_entry.html delete mode 100644 templates/article_footer.html delete mode 100644 templates/article_header.html delete mode 100644 templates/article_list_footer.html delete mode 100644 templates/article_list_header.html delete mode 100644 templates/article_separator.html delete mode 100644 templates/footer.html delete mode 100644 templates/header.html delete mode 100644 templates/index_footer.html delete mode 100644 templates/index_header.html delete mode 100644 templates/tag_entry.html delete mode 100644 templates/tag_index_footer.html delete mode 100644 templates/tag_index_header.html delete mode 100644 templates/tag_list_footer.html delete mode 100644 templates/tag_list_header.html delete mode 100644 templates/tag_separator.html delete mode 100644 örnek.md diff --git a/README.md b/README.md deleted file mode 100644 index c66d5f3..0000000 --- a/README.md +++ /dev/null @@ -1,40 +0,0 @@ -# Teknoloji Rehberleri Websitesi -[https://teknolojirehberleri.xyz](https://teknolojirehberleri.xyz) - -Herkesin teknoloji rehberi yazabildiği bir websitesi. İzleyici, reklam veya çerez yok. - -## Rehber Ekleme Kuralları -- Rehberinizi markdown dosyası olarak yazacaksınız. [örnek.md](örnek.md) dosyasına lütfen göz atın ve `articles/` klasörüne rehberinizi koyun. -- Rehberiniz başlık ile başlamalıdır. Rehber başlığınıza `#` koymanıza gerek yok. -- Dosya isimleri rehberin adı olmalıdır ve `-` ile ayrılmalıdır. Boşlukla veya `_` ile ayrılmamalıdır. Örn: `linuxta-sanal-makine-kurulumu.md` -- Dosya isimlerinde Türkçe karakter olmamalıdır. (ö,ı vb.) Kullandığımız blogit uygulaması izin vermiyor. -- Rehberler size ait olmalıdır. -- Rehberin sonuna kendi websitenizi veya bağış bağlantınızı koyabilirsiniz. - -## Etiketler -Rehberinizin sonuna etiketler eklemelisiniz. Etiket ekleme yöntemi: - -`;tags: etiket1 etiket2 etiket3` - -Bu etiketler dosyanın sonunda ve tek bir satırda olmalıdır. - -1 ile 4 etiket arasında etiket koyunuz. Daha önceden var olan etiketleri **önceleyiniz**. - -## Resimler -Her rehberin başına veya gerekli yerlere resim ekleyebilirsiniz. - -Resimler `data/pictures` klasöründe depolanmaktadır. - -Resimler .webp formatında olmalı ve olabildiğince küçük olmalıdır. Ekleyeceğiniz resim, `linuxta-sanal-makine.webp` ise bu resmi markdown içinde `pictures/linuxta-sanal-makine.webp` olarak ekleyeceksiniz. - -Daha fazla resim ekleyecekseniz bu resimleri numaralandırmanız gerek. Örneğin: `pictures/linuxta-sanal-makine-01.webp` - -Rehberinizdeki resimlerin telif hakkı olmamasına dikkat ediniz. - -Eklediğiniz resimlerin boyutuna dikkat etmeniz gerekli. Gerekirse [tinypng](https://tinypng.com/) gibi websitelerini kullanabilirsiniz. - -## Websitesi hakkında -Youtube üzerinde, Linux, açık kaynak ve özgür yazılım içerikleri üretiyorum. Türkçe Linux rehberleri İngilizce'ye göre daha az. Bu websitesini Türkçe rehberlerin artması umuduyla oluşturdum. Websitenin temasını [based cooking](https://github.com/LukeSmithxyz/based.cooking) deposundan aldım. İleride temayı değiştirebiliriz. - -## Lisans -Bütün site içeriği kamu malıdır. Rehberin sonuna kendi adınızı, bağış bağlantınızı vs. ekleyebilirsiniz. diff --git a/articles/bir-programin-sesini-yansitma.md b/articles/bir-programin-sesini-yansitma.md deleted file mode 100644 index 71daed0..0000000 --- a/articles/bir-programin-sesini-yansitma.md +++ /dev/null @@ -1,32 +0,0 @@ -Bir Programın Sesini Yansıtma - -Linux'a yeni geçen arkdaşların sorduğu sorulardan birisi, arkadaşlarımla oyunumun, videomun sesini Discord üzerinden paylaşamıyorum! Nasıl yapabilirim? - -Bugüne kadar bildiğim çözümler sesi yansıttığınızda sizin konuşanızı engelliyordu. Soundux adlı bir program keşfettim ve bu program sayesinde istediğiniz sesi istediğiniz uygulamaya yansıtabiliyor aynı zamanda mikrofonunuz ile konuşmaya devam edebiliyorsunuz! - -1. Programı Nasıl Kurarım? -2. Programın Kullanımı - -## Programı Nasıl Kurarım? -Soundux açık kaynak ve özgür bir yazılım. Windows için de paketleri var. Paket yöneticinizde yoksa [Websitesinden](https://soundux.rocks/) veya [Github sayfasından](https://github.com/Soundux/Soundux) indirebilirsiniz. - -İndirdikten sonra karşınıza şöyle bir ekran çıkacak. - -![bir-programın-sesini-yansıtma](pictures/bir-programın-sesini-yansıtma.webp) - -## Programın Kullanımı - -Sağ üst tarafta yazan **output application** kısmından sesi aktarmak istediğimiz programı seçiyoruz. Discord'a ses aktaracaksanız Discord'u seçeceksiniz ama uygulamanın output application kısmında gözükmesi için sesliye katılmanız gerekiyor. - -Daha sonrasında aşağıda yazan **passthrough** butonuna tıklayacaksınız. Tıkladığınız anda sol tarafta bir menü belirecek. - -![bir-programın-sesini-yansıtma-01](pictures/bir-programın-sesini-yansıtma-01.webp) - -Sesini aktarmak istediğiniz programı buradan seçebilirsiniz. Örnek resimde Firefox'u görüyorsunuz. - -Ve bu kadar! Artık seçtiğiniz uygulamanın sesi karşı tarafa gidiyor ve aynı zamanda mikrofonunuzdan konuşabiliyorsunuz. Artık karaoke yapabilir veya arkadaşlarınızla film izleyebilirsiniz. Soundux üzerinden ses düzeyini de ayarlayabiliyorsunuz. - -## Katkıda Bulunanlar -Yusuf İpek [website](https://yusufipek.me), [youtube](https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg) - -;tags: linux ses discord diff --git a/articles/firefox-ayarlarini-kaydetme.md b/articles/firefox-ayarlarini-kaydetme.md deleted file mode 100644 index 1615ec1..0000000 --- a/articles/firefox-ayarlarini-kaydetme.md +++ /dev/null @@ -1,33 +0,0 @@ -Firefox Ayarlarını Kaydetme - -Firefoxta yaptığım ayarları başka bir firefox tarayıcısına olduğumu gibi nasıl aktarırım? - -Öncelikle göstereceğim ilk yöntemin çalışabilmesi için kullandığınız firefox ve profilinizi aktaracağınız firefoxun sürümleri aynı olmalı aksi takdirde bu yöntem çalışmayacaktır. Bunun için ise başka bir yöntem göstereceğim. - -# Sürümleri Aynı İki Firefoxu Eşitleme - -1. İlk önce tarayıcınızın adres çubuğuna `about:profiles` yazın ve enter tuşuna tıklayın. - -![firefox-profil-kaydetme1.webp](pictures/firefox-ayarlarini-kaydetme1.webp) - -2. Çıkan sayfadan varsayılan profili bulup "Kök Klasör" yazan yerdeki "Klasörü aç" butonuna tıklayın. - -![firefox-profil-kaydetme2.webp](pictures/firefox-ayarlarini-kaydetme2.webp) - -3. Açılan klasörden bir üst dizine gidin ve profilinizi kopyalayın. - -![firefox-profil-kaydetme3.webp](pictures/firefox-ayarlarini-kaydetme3.webp) - -4. Profilinizi kopyaladıktan sonra profilinizi aktarmak istediğiniz firefox tarayıcısının profilleri bulundurduğu klasörü bulun ve profilinizi oraya yapıştırın. - -# Sürümleri Farklı İki Firefoxu Eşitleme - -1. Firefox profil klasörünüze girin ve `prefs.js` dosyasını bulup kopyalayın. - -2. Kopyaladığınız dosyayı ayarlarınızı aktarmak istediğiniz firefox profilinin içine atın ve mevcut `prefs.js` dosyası ile değiştirin. - -### Katkıda Bulunanlar - -Yazar: hamzak37 [İletişim](mailto:hamzak.hxbff@aleeas.com) | [Github hesabım](https://github.com/hamzak37) - -;tags: firefox tarayıcı açık-kaynak diff --git a/articles/teknoloji-rehberleri-icin-post-nasil-yazilir.md b/articles/teknoloji-rehberleri-icin-post-nasil-yazilir.md deleted file mode 100644 index 1da8c80..0000000 --- a/articles/teknoloji-rehberleri-icin-post-nasil-yazilir.md +++ /dev/null @@ -1,194 +0,0 @@ -Teknoloji Rehberleri İçin Post Nasıl Yazılır? - -## Teknoloji Rehberleri nedir? - -Teknoloji rehberleri Yusuf İpek tarafından birden fazla kişinin teknoloji ve Linux hakkında blog konuları yazması için kurulmuş bir websitedir. - -[GitHub - yusufipk/teknolojirehberleri.xyz](https://github.com/yusufipk/teknolojirehberleri.xyz) - -## Teknoloji Rehberleri'nde yazmak için ne gerekir? - -- Markdown bilgisi - -- Bir github hesabı - -- Ve fikirleriniz ve düşünceleriniz - -### Markdown nedir? - -Markdown, **John Gruber** ve **Aaron Swartz** tarafından geliştirilmiş ve 2004 yılından bu yana kullanılan bir Markup Language'dir (İşaretleme dili). - -- Dosya biçimi **.md**dir. - -- İçinde HTML kullanılabilir. - -### Markdown yazarken gerekenler - -- Bir kod editörü yada markdown yazma yazılımı. - -- Sabır (Bazen insanın sinirleri bozulabiliyor) - -[Mark Text](https://marktext.app/) - -Mark Text açık kaynaklı bir markdown editörüdür. Ben markdown yazarken Mark Text kullanmaktayım. Markdown yazmak için en iyi programlardan birisidir. Veya Herhangi bir kod editörüne Markdown eklentisi ekleyip kullanabilirsiniz. - -# Markdown nasıl yazılır? - -Markdown dili HTML'e işlenir. - -### Heading (Başlıklar) - -``` -# Heading (Başlık) - -HTML'deki

etiketine denktir. -## , ### , #### ve ##### - -Olarak farklı boyutlarda biçimleride vardır. -``` - -**Örnekler:** - -# H1 - -## H2 - -### H3 - -#### H4 - -##### H5 - -### Linkler - -``` -[Örnek Link](https://duckduckgo.com) - -Bu link DuckDuckGo arama motorunun urlsine yönlendirmektedir. - -[] = Bu parantezler arasına linkin adını - -() = [] parantezinin ardından gelen bu paranteze ise link yazılır. - -Normal linkler etiketine denktir. - -Resimler: - -![Bir Resim](https://picsum.photos/200/300) - -Resim linklerinin normal linklerden tek farkı başına ! eklenmesidir. - -Resim linkleri ise etiketine denktir. -``` - -**Örnekler:** - -[Örnek Link](https://duckduckgo.com) - - - -![Bir Resim](https://picsum.photos/200/300) - -### Listeler - -``` -Listeler şu şekilde yazılır - -- 1 -- 2 -- 3 -``` - -**Örnek** - -- 1 - -- 2 - -- 3 - -# Alıntılar, İtalik Yazı vb. - - - -``` -> Bu bir alıntı yazımıdır -``` - -> Bu bir alıntıdır - -``` -**Bu bir kalın yazı yazımıdır.** -``` - -**Bu bir kalın yazı** - -``` -*Bu bir italik yazımıdır.* -``` - -*Bu bir italik yazıdır* - -``` -Bu bir kod bloğu -``` -![Kod Bloğu](pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-2.webp) -yazıldığında bu şekilde görünmektedir. - -`
` tagı ise Markdown'da HTML yazmanızı sağlar. - - - -# Peki Markdown'ı öğrendik, Şimdi ne yapmalıyız? - -Şimdi ise gönderimizi paylaşmalıyız. - - - -## Bunun için bir Github hesabına ihtiyacımız var. - -[Github](https://github.com/join) buradan eğer Github hesabımız yok ise kaydolmalıyız. - - - -## Gönderiyi Paylaşmak - -[GitHub - yusufipk/teknolojirehberleri.xyz](https://github.com/yusufipk/teknolojirehberleri.xyz) - -yapmamız gereken bu repoyu üstten forklamalıyız yani çatallamalıyız. - -![Fork](pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-1.webp) - -Fork tuşuna basmalısınız. - -Ardından yapmanız gereken sağ üstteki profil fotoğrafınıza basıp **Your Repositories** kısmından forkladığımız repoyu açıyoruz. - - - -Sondan önceki adımımız ise repodaki articles klasörünü açtıktan sonra - -![Dosyaları yükle](pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-4.webp) - -kısmından **Upload files** butonuna basıp oluşturduğunuz markdown dosyasını seçmelisiniz. - - - -Son adımımız ise repomuzun **Code** kısmına gelip - -![Pull Request aç](pictures/teknoloji-rehberleri-icin-post-nasil-yazilir-3.webp) - -Contribute tuşuna basarak Open Pull Request dedikten sonra gerekli bölümleri doldurup pull request açtıktan sonra tek yapmamız gereken gönderinin onaylanması kalıyor. - - - -# Son - -İşte yapmanız gereken bu kadar artık parlak fikirlerinizi paylaşabilirsiniz. - -Bu gönderiyi okuduğunuz için teşekkürler... - -Yazar: Mehmetali345Dev (Matrix: Anakin Skywalker) - -[Github hesabım](https://github.com/Mehmetali345Dev) - -;tags: markdown github diff --git a/articles/websitenize-tema-ekleme.md b/articles/websitenize-tema-ekleme.md deleted file mode 100644 index 6e31288..0000000 --- a/articles/websitenize-tema-ekleme.md +++ /dev/null @@ -1,206 +0,0 @@ -Websitenize Tema Ekleme - -![websitenize-tema-ekleme](pictures/websitenize-tema-ekleme.webp) - -Karanlık temalara bayılıyorum. Kullandığım her websitesinde ve uygulamada karanlık tema tercih ediyorum. Peki tema seçeneklerini sitemize nasıl koyarız? Birden fazla temayı sitemizde nasıl yapabiliriz bu rehberde bunu anlatacağım. - -1. Ne yapacağız? -2. Düğmeyi oluşturma -3. Renk düzenlerini oluşturma -4. İşlevsellik -5. Kullanıcının tercihine göre temayı kaydetme -6. Kapanış -7. Katkıda bulunanlar - -## Ne Yapacağız? -Örnek olarak projelerimden birisini kullanacağım. Geçtiğimiz haftalarda 3 tane teması olan bir hesap makinesi yaptım. - -[kod](https://github.com/yusufipk/another-calculator) | [canlı demo](https://yusufipk.github.io/another-calculator/) - -![websitenize-tema-ekleme-01](pictures/websitenize-tema-ekleme-01.webp) - -Gördüğünüz gibi düğmemiz var ve bu düğmeyle 3 tema arasında seçim yapabiliyoruz. - -## Düğmeyi Oluşturma -Düğmeyi oluşturmak için checkbox, radio veya button elementlerini kullanabiliriz. Burada ben radio elementini kullanacağım. - -``` -
- - - -
-``` - -## Renk Düzenlerini Oluşturma -Renk düzenlerini CSS değişkenlerini kullanarak oluşturacağız. SASS değişkenlerinin derlenmesi gerektiğinden SASS değişkenleri kullanamazsınız! Bu uygulamada ben üç tane tema yapıyorum dolayısıyla üç tane renk düzeni oluşturacağım. İlki; -``` - :root { - --color-main: #3b4664; - --color-white: #ffffff; - --bg-main: #181f32; - --bg-buttons: rgba(37, 45, 68, 0.6); - --num: #eae3db; - --number-color: #484b5a; - --number-border: #b3a599; - --button-secondary: #647299; - --border-secondary: #404d70; - --button-tertiary: #d13f30; - --border-tertiary: #922417; - --radio-color: #cf3f34; -} -``` -Bu varsayılan temam olacak dolayısıyla herhangi bir attribute eklememe gerek yok. İkinci temam; -``` -body[data-theme="light"] { - --color-main: #e6e6e6; - --color-white: #3a3a32; - --bg-main: #eeeeee; - --bg-buttons: #d3cdcd; - --num: #e5e4e0; - --number-color: #3a3a32; - --number-border: #a69c93; - --button-secondary: #388187; - --border-secondary: #1a5d66; - --button-tertiary: #c85401; - --border-tertiary: #873a02; -} -``` - -Bu aydınlık temamız olacak. data-theme yazarak bunu belirtmemiz gerekli. Data özel bir attribute. Data hakkında daha fazla bilgi almak istiyorsanız [buraya bakın.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) - -Son temamızsa; -``` -body[data-theme="purple"] { - --color-main: #17062a; - --color-white: #ffe43b; - --bg-main: #1e0836; - --bg-buttons: #1e0836; - --num: #331b4d; - --number-color: #ffe537; - --number-border: #85219b; - --button-secondary: #56077c; - --border-secondary: #bf15f4; - --button-tertiary: #00decf; - --border-tertiary: #6dfaf1; - --radio-color: #00e8d8; -} -``` -Bu kurulumla birlikte değişkenlerimizi kodumuzda kullanıp istediğimiz temayı dinamik olarak sayfamızda değiştirebileceğiz. - -## İşlevselliği Ekliyoruz -İlk olarak radio elementlerimizi Javascript ile seçmemiz gerekli. -``` -const theme1 = document.getElementById("theme1"); -const theme2 = document.getElementById("theme2"); -const theme3 = document.getElementById("theme3"); -``` -Şimdi ``changeTheme()`` fonksiyonunu oluşturacağız. Bu fonksiyon body attribute değerini değiştirmemizi sağlayacak ve böylece istediğimiz temayı sitede kullanabileceğiz. - -``` -function changeTheme() { - if (theme1.checked) { - document.body.setAttribute("data-theme", ""); - } else if (theme2.checked) { - document.body.setAttribute("data-theme", "light"); - } else if (theme3.checked) { - document.body.setAttribute("data-theme", "purple"); - } else return; -} -``` -Şimdi de eventListener eklememiz lazım, yapmasını istediğimiz iki şey var; - -1. Radio elementine tıkladığımızda diğer bütün radio elementlerini ``uncheck`` haline getirmemiz lazım. -2. Her radio elementine tıkladığımızda changeTheme() fonksiyonunu çalıştırmamız lazım. -``` - theme1.addEventListener("click", () => { - theme2.checked = false; - theme3.checked = false; - changeTheme(); -}); -theme2.addEventListener("click", () => { - theme1.checked = false; - theme3.checked = false; - changeTheme(); -}); -theme3.addEventListener("click", () => { - theme1.checked =false; - theme2.checked = false; - changeTheme(); -}); -``` - -Bununla birlikte bütün temalarımız işlevesel bir şekilde çalışıyor! Kullanıcı hangi temaya tıklarsa site ona göre değişecek. - -## Kullanıcının Tercihine Göre Temayı Kaydetme -İki sorunumuz var: - -1. Kodumuzda varsayılan tema yok. -2. Kullanıcının tercih ettiği temayı kaydetmiyoruz. Sayfa her yenilendiğinde tema eski haline dönüyor. - -Bu sorunu localStorage kullanarak aşacağız. - -İlk olarak varsayılan tema oluştralım. - -``` -// Varsayılan temam "theme1" olacak -if (localStorage.getItem("theme") === null) { - localStorage.setItem("theme", "theme1"); -} -``` - -Switch kullanarak her sayfayı yenilediğimizde seçilen temayı tekrar seçeceğiz. - -``` -switch (localStorage.getItem("theme")) { - case "theme1": - theme1.checked = true; - break; - case "theme2": - theme2.checked = true; - break; - case "theme3": - theme3.checked = true; - break; - default: - break; -} -``` -Daha sonrasında localStorage.setItem() kullanarak eventListener'larının kullanıcının seçtiği temayı localStorage'a kaydetmesini sağlayacağız. - -``` -theme1.addEventListener("click", () => { - theme2.checked = false; - theme3.checked = false; - // New Code - localStorage.setItem("theme", "theme1"); - changeTheme(); -}); -theme2.addEventListener("click", () => { - theme1.checked = false; - theme3.checked = false; - // New Code - localStorage.setItem("theme", "theme2"); - changeTheme(); -}); -theme3.addEventListener("click", () => { - theme1.checked = false; - theme2.checked = false; - // New Code - localStorage.setItem("theme", "theme3"); - changeTheme(); -}); -``` -Son olarak kodun sonunda ``changeTheme()`` fonksiyonunu çağırmamız gerekli ki her sayfayı yenilediğimizde rengimiz değişebilsin. - -Bu kadar! Websitemizde kullanıcının seçebileceği 3 tane temamız var ve localStrage kullanarak temayı kaydediyoruz. Sitenize bu yöntemle istediğiniz kadar tema ekleyebilirsiniz. - -## Kapanış -Kullanıcının tema tercihini de göz önünde bulundurmak istiyorsanız CSS'te olan [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query'sini kullanarak varsayılan temayı karanlık/aydınlık olarak ayarlayabilirsiniz. Kolay bir işlem olduğundan bu rehberi daha fazla uzatmak istemiyorum. - -Benim ilk kodlama rehberimdi ve herhangi bir geri bildiriminiz varsa lütfen bana ulaşın! Okuduğunuz için teşekkürler ve umarım bu rehber size faydalı olmuştur. - -## Katkıda Bulunanlar -Yusuf İpek [website](https://yusufipek.me), [youtube](https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg) - -;tags: html css web-development diff --git a/articles/wordpress-nedir.md b/articles/wordpress-nedir.md deleted file mode 100644 index f1ebac6..0000000 --- a/articles/wordpress-nedir.md +++ /dev/null @@ -1,87 +0,0 @@ -Wordpress Nedir Nasıl Kurulur? - -## İskelet - -- Wordpress Nedir? - -- Wordpress Tarihi? - -- Wordpress Nasıl Kurulur? - -## Wordpress Nedir? - -Wordpress'in kökleri 2001 yılına kadar uzanmaktadır ve 2003'te halka açılmıştır. Blog sistemi olarak; PHP ve MySQL kullanılarak yazılmıştır. Wordpress b2/cafelog blog yazılımının forku olarak yazılmıştır. - -Wordpress ilk başlarda blog altyapısı olarak kurulmuş olsada, bugün sadece blog siteleri için değil haber, e-ticaret, kurumsal siteler ve Wordpress'i yazan ekip tarafından eklenti olarak sunulan bbPres eklentisi ile forum sitesi bile kurabilirsiniz. - -Ayrıca Wordpress tamamen açık kaynaklı bir yazılımdır. Kaynak kodlarına Wordpress Github sayfasından ulaşabilirsiniz. [github.com/WordPress/WordPress](https://github.com/WordPress/WordPress) - -Wordpress GNU Genel Kamu Lisansı ile korunmaktadır ve Wordpress'in resmi sitesi [wordpress.org](https://wordpress.org/)'tur. Bugün Wordpress, Dünyada ki internetin 42% gibi büyük bir oranını kapsıyor. - -### Temalar - -Temalar, sitenin görünümüne giydirilmek üzere yazılmış ücretli ve ücretsiz binlerce teması vardır. Bu temaların bir kısmını yapan Wordpress yapımcılarıdır ve genellikle ücretsizdir (Bu temaları kullanan sitelerin altlarında "Proudly Powered By Wordpress" ibaresi bulunmaktadır). Wordpress yapımcılarının dışında bağımsız farklı yapımcılarda tema yapmaktadır ama genellikle ücrete tabidir, ücretsiz versiyonda temanın ve yapımcının reklamları yer alır. - -### Eklentiler - -Eklentiler, genellikle Wordpress yazılımının sunmadığı özellikleri siteye eklemek için yazılmış eklentilerdir. Bugün Wordpress üzerinde 40.000'den fazla eklenti bulunmaktadır. - - -**Örnek Eklentiler**: *Seo eklentileri (arama motoru optimizasyonu), canlı destek, üyelik sistemi* gibi eklentiler bulunmaktadır. Bu eklentiler sizin Wordpress sürümünüze uyumludur yada uyumsuzdur, uyumsuz ise çalışmaz veya eklentinin kendisi bozukta olabilir. - -## Wordpress Tarihi? - -Wordpress 2003'te halka açılmış olsada, kökleri taa 2001 yılına kadar uzanmaktadır ve bir proje olarak başlanmıştır. 1997 yılında blog sitelerinin popülerleşmesinden sonra 2001 yılında Wordpress'in kurucuları Matt Mullenweg ile Mike Little geliştirilmeye başladı. - -Wordpress ismini Mullenweg'in arkadaşı olan Christine Selleck tarafından önerilmiştir. - -2005 yılında tema özelliği eklenen 1.5 sürümü çıkartıldı ve Wordpress'in indirilme sayısi 900.000'i geçti. -Ayrıca insanların ekstradan farklı bir hosting satın almadan direkt olarak blog sitesi açabilcekleri wordpress.com sistemi açıldı. -2005 yılında ayrıca Wordpress'i Türkçeleştirmek için bir kaç arkadaş tarafından Wordpress Türkiye kuruldu. - -2006 Mayısında 2.0.2 sürümünde ilk Türkçe Wordpress paketi kullanıcılara sunuldu. - -2006 yılında Wordpress 1.545.703'ten fazla kez indirildi. 2006 yılında 371 farkl eklenti toplam 191.567 kez indirilmiştir, 2007 yılında ise 1384 eklenti 2.845.884 kez indirilmiştir yani x15 büyümüştür. -Ayrıca 2006'da Dünya'nın ilk Wordpress konferansı olan WordCamp düzenlendi (central.wordcamp.org). Günümüzde ise Dünyanın her yerinde bu konferanslar düzenlenmektedir. - -2007 yılında Wordpress düzenli bir sürüm yayınlama planını ortaya sürdü. Ana sürümlerin ayda 3-4 kez olacak şekilde, yılda 3 defa yayınlanması planlandı. - -## Wordpress Nasıl Kurulur? - -Wordpress kurmak için [wordpress.com](https://wordpress.com) adresine gidebilirsiniz. - -Ücretsiz versiyon; *.wordpress.com* veya *.home.blog* subdomainlerinden (alt alan adlarından) birini seçebilirsiniz. Sitenizde Wordpress'in reklamı "Web sitenizi WordPress.com ile oluşturun" olacaktır. - -Ücretli versiyonu; Kişisel aylık 13₺, Premium aylık 25₺, Kurumsal aylık 75₺ ve E-ticaret aylık 125₺ olacak şekilde 4 farklı paket bulunmaktadır. - -### cPanel Üzerinden Wordpress Kurulumu - -Eğer kendi hostinginiz varsa ve cPanel kuruluysa; - -- [Wordpress.org](https://wordpress.org/download/)'tan Wordpress dosyalarını indir. -- cPanel'inize girin. -- cPanel'de Dosyalar bölümünden Dosya Yöneticisi'ne gir. -- Dosya Yöneticisi bölümünde Public_html bölümüne gir. -- Public_html'de ki bütün dosyaları silin. -- Sildikten sonra yükle butonuna basınız. -- Açılan pencerede ki *"Geçerli Dosyaların Üzerine Yaz"* butonuna tıklayın ve *"Dosya Seç"* butonuna tıklayıp Wordpress.org'tan indirdiğiniz .zip dosyasını seçin. -- .zip dosyası indikten sonra, o dosyaya seçerek "Çıkar" butonuna tıklayın "Extract File(s)" seçeneğine tıklayıp .zip klasörünü çıkartın. -- Dosyalar *"WordPress"* klasörüne çıkacaktır *(:pubic_html/WordPress)* o dosyaya girip tüm dosyaları *"Move File(s)"* butonuna tıklayıp taşıyınız. -- Ondan sonra ise site domaininize girince karşınıza Wordpress kurulum sihirbazı çıkacaktır. Ekranda ki "Başlayalım!" butonuna tıklayın ve sitenizi kurun. - -### Plesk Panel Üzerinden Wordpress Kurulumu - -Eğer kendi hostinginiz varsa ve Plesk Panel kuruluysa; - -- Plesk Panelinize Girin -- Plesk Panel ana sayfasında ki *"Wordpress - Kur"* butonuna tıklayın. -- Açılan pencerede domaininizi belirleyip, Wordpress ayarlarını ve admin *kullanıcı adı* ve *şifresini* belirleyin. -- Alt kısımda ki *"Veritabanı"* kısmını açıp *"Veritabanı adı"*, *"Kullanıcı Adı"*, *"Şifre"* belirleyin. İsteğinize göre *"Otomatik Güncelleme Ayarını"* açın veya açmayın. -- Son olarak *"Yükle"* butonuna tıklayın. Siteniz saniyeler içinde kurulmuş olacak! - - -## Destekçiler - -Yazar: [@MrGokturk](https://github.com/MrGokturk) **|** Website: [mrgokturk.xyz](https://mrgokturk.xyz) - -;tags: wordpress web diff --git a/blogit b/blogit deleted file mode 100755 index cbbc787..0000000 --- a/blogit +++ /dev/null @@ -1,203 +0,0 @@ -#!/usr/bin/make -f - -BLOG := $(MAKE) -f $(lastword $(MAKEFILE_LIST)) --no-print-directory -ifneq ($(filter-out help,$(MAKECMDGOALS)),) -include config -endif - -# The following can be configured in config -BLOG_DATE_FORMAT_INDEX ?= %x -BLOG_DATE_FORMAT ?= %x %X -BLOG_TITLE ?= blog -BLOG_DESCRIPTION ?= blog -BLOG_URL_ROOT ?= http://localhost/blog -BLOG_FEED_MAX ?= 20 -BLOG_FEEDS ?= rss atom -BLOG_SRC ?= articles - - -.PHONY: help init build deploy clean - -ARTICLES = $(shell git ls-tree HEAD --name-only -- $(BLOG_SRC)/ 2>/dev/null) -TAGFILES = $(patsubst $(BLOG_SRC)/%.md,tags/%,$(ARTICLES)) - -help: - $(info blogit init|build|deploy|clean) - -init: - mkdir -p $(BLOG_SRC) data templates - printf '$$TITLE' > templates/header.html - printf '' > templates/footer.html - printf '' > templates/index_header.html - printf '

Tags:' > templates/tag_list_header.html - printf '$$NAME' > templates/tag_entry.html - printf ', ' > templates/tag_separator.html - printf '

' > templates/tag_list_footer.html - printf '

Articles

    ' > templates/article_list_header.html - printf '
  • $$DATE $$TITLE
    • ' > templates/article_entry.html - printf '' > templates/article_separator.html - printf '
' > templates/article_list_footer.html - printf '' > templates/index_footer.html - printf '' > templates/tag_index_header.html - printf '' > templates/tag_index_footer.html - printf '

$$TITLE

' > templates/article_header.html - printf '' > templates/article_footer.html - printf 'blog\n' > .git/info/exclude - -build: blog/index.html tagpages $(patsubst $(BLOG_SRC)/%.md,blog/%.html,$(ARTICLES)) $(patsubst %,blog/%.xml,$(BLOG_FEEDS)) - -deploy: build - rsync -rLtvz $(BLOG_RSYNC_OPTS) blog/ data/ $(BLOG_REMOTE) - -clean: - rm -rf blog tags - -config: - printf 'BLOG_REMOTE:=%s\n' \ - '$(shell printf "Blog remote (eg: host:/var/www/html): ">/dev/tty; head -n1)' \ - > $@ - -tags/%: $(BLOG_SRC)/%.md - mkdir -p tags - grep -i '^; *tags:' "$<" | cut -d: -f2- | sed 's/ */\n/g' | sed '/^$$/d' | sort -u > $@ - -blog/index.html: $(ARTICLES) $(TAGFILES) $(addprefix templates/,$(addsuffix .html,header index_header tag_list_header tag_entry tag_separator tag_list_footer article_list_header article_entry article_separator article_list_footer index_footer footer)) - mkdir -p blog - TITLE="$(BLOG_TITLE)"; \ - export TITLE; \ - envsubst < templates/header.html > $@; \ - envsubst < templates/index_header.html >> $@; \ - envsubst < templates/tag_list_header.html >> $@; \ - first=true; \ - for t in $(shell cat $(TAGFILES) | sort -u); do \ - "$$first" || envsubst < templates/tag_separator.html; \ - NAME="$$t" \ - URL="@$$t.html" \ - envsubst < templates/tag_entry.html; \ - first=false; \ - done >> $@; \ - envsubst < templates/tag_list_footer.html >> $@; \ - envsubst < templates/article_list_header.html >> $@; \ - first=true; \ - for f in $(ARTICLES); do \ - printf '%s ' "$$f"; \ - git log --diff-filter=A --date="format:%s $(BLOG_DATE_FORMAT_INDEX)" --pretty=format:'%ad%n' -- "$$f"; \ - done | sort -k2nr | cut -d" " -f1,3- | while IFS=" " read -r FILE DATE; do \ - "$$first" || envsubst < templates/article_separator.html; \ - URL="`printf '%s' "\$$FILE" | sed 's,^$(BLOG_SRC)/\(.*\).md,\1,'`.html" \ - DATE="$$DATE" \ - TITLE="`head -n1 "\$$FILE" | sed -e 's/^# //g'`" \ - envsubst < templates/article_entry.html; \ - first=false; \ - done >> $@; \ - envsubst < templates/article_list_footer.html >> $@; \ - envsubst < templates/index_footer.html >> $@; \ - envsubst < templates/footer.html >> $@; \ - - -blog/tag/%.html: $(ARTICLES) $(addprefix templates/,$(addsuffix .html,header tag_header index_entry tag_footer footer)) - -.PHONY: tagpages -tagpages: $(TAGFILES) - +$(BLOG) $(patsubst %,blog/@%.html,$(shell cat $(TAGFILES) | sort -u)) - -blog/@%.html: $(TAGFILES) $(addprefix templates/,$(addsuffix .html,header tag_index_header tag_list_header tag_entry tag_separator tag_list_footer article_list_header article_entry article_separator article_list_footer tag_index_footer footer)) - mkdir -p blog - TITLE="Articles tagged $*"; \ - TAGS="$*"; \ - export TITLE; \ - export TAGS; \ - envsubst < templates/header.html > $@; \ - envsubst < templates/tag_index_header.html >> $@; \ - envsubst < templates/article_list_header.html >> $@; \ - first=true; \ - for f in $(shell grep -FH '$*' $(TAGFILES) | sed 's,^tags/\([^:]*\):.*,$(BLOG_SRC)/\1.md,'); do \ - printf '%s ' "$$f"; \ - git log --diff-filter=A --date="format:%s $(BLOG_DATE_FORMAT_INDEX)" --pretty=format:'%ad%n' -- "$$f"; \ - done | sort -k2nr | cut -d" " -f1,3- | while IFS=" " read -r FILE DATE; do \ - "$$first" || envsubst < templates/article_separator.html; \ - URL="`printf '%s' "\$$FILE" | sed 's,^$(BLOG_SRC)/\(.*\).md,\1,'`.html" \ - DATE="$$DATE" \ - TITLE="`head -n1 "\$$FILE" | sed -e 's/^# //g'`" \ - envsubst < templates/article_entry.html; \ - first=false; \ - done >> $@; \ - envsubst < templates/article_list_footer.html >> $@; \ - envsubst < templates/tag_index_footer.html >> $@; \ - envsubst < templates/footer.html >> $@; \ - - -blog/%.html: $(BLOG_SRC)/%.md $(addprefix templates/,$(addsuffix .html,header article_header article_footer footer)) - mkdir -p blog - TITLE="$(shell head -n1 $<)"; \ - export TITLE; \ - AUTHOR="$(shell git log -n 1 --reverse --format="%cn" -- "$<")"; \ - export AUTHOR; \ - DATE_POSTED="$(shell git log --diff-filter=A --date="format:$(BLOG_DATE_FORMAT)" --pretty=format:'%ad' -- "$<")"; \ - export DATE_POSTED; \ - DATE_EDITED="$(shell git log -n 1 --date="format:$(BLOG_DATE_FORMAT)" --pretty=format:'%ad' -- "$<")"; \ - export DATE_EDITED; \ - TAGS="$(shell grep -i '^; *tags:' "$<" | cut -d: -f2- | paste -sd ',')"; \ - export TAGS; \ - envsubst < templates/header.html > $@; \ - envsubst < templates/article_header.html >> $@; \ - sed -e 1d \ - -e '/^;/d' \ - -e 's/&/\&/g' \ - -e 's//\>/g' \ - -e '/^```$$/{s,.*,,;x;p;/^<\/code>/d;s,.*,
,;bT}' \
-		-e 'x;/<\/code>/{x;s,\$$,\$,g;$$G;p;d};x' \
-		-e 's,\\\$$,\$,g' \
-		-e '/^####/{s,^####,
,;s,$$,
,;H;s,.*,,;x;p;d}' \
-		-e '/^###/{s,^###,
,;s,$$,
,;H;s,.*,,;x;p;d}' \
-		-e '/^##/{s,^##,
,;s,$$,
,;H;s,.*,,;x;p;d}' \
-		-e '/^#/{s,^#,
,;s,$$,
,;H;s,.*,,;x;p;d}' \
-		-e 's,`\([^`]*\)`,\1,g' \
-		-e 's,\*\*\(\([^*<>][^*<>]*\*\?\)*\)\*\*,\1,g' \
-		-e 's,\*\([^*<>][^*<>]*\)\*,\1,g' \
-		-e 's,!\[\([^]]*\)\](\([^)]*\)),\1,g' \
-		-e 's,\[\([^]]*\)\](\([^)]*\)),\1,g' \
-		-e '/^- /{s,^- ,
  • ,;s,$$,
    • ,;x;/^<\/ul>/{x;bL};p;s,.*,
-
    Site Hakkında
    
-Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
-
    Nasıl Rehber Yazarım?
    
-
      
-	
    • Github'ı kullanarak yazınızı ekleyin.
      • 
-	
    • Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.
      • 
-	
    • Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!
      • 
-
    
-
diff --git a/templates/article_list_header.html b/templates/article_list_header.html
deleted file mode 100644
index cf74364..0000000
--- a/templates/article_list_header.html
+++ /dev/null
@@ -1 +0,0 @@
-
    Rehberler
      
diff --git a/templates/article_separator.html b/templates/article_separator.html
deleted file mode 100644
index e69de29..0000000
diff --git a/templates/footer.html b/templates/footer.html
deleted file mode 100644
index b9084d3..0000000
--- a/templates/footer.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
diff --git a/templates/header.html b/templates/header.html
deleted file mode 100644
index 853048a..0000000
--- a/templates/header.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-  
-    
-    
-    
-    
-    $TITLE
-    
-  
-  
diff --git a/templates/index_footer.html b/templates/index_footer.html
deleted file mode 100644
index e69de29..0000000
diff --git a/templates/index_header.html b/templates/index_header.html
deleted file mode 100644
index 571b94c..0000000
--- a/templates/index_header.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
      Teknoloji rehberleri. Reklam ve izleyici yok!
      
diff --git a/templates/tag_entry.html b/templates/tag_entry.html
deleted file mode 100644
index cb23fee..0000000
--- a/templates/tag_entry.html
+++ /dev/null
@@ -1 +0,0 @@
-$NAME
\ No newline at end of file
diff --git a/templates/tag_index_footer.html b/templates/tag_index_footer.html
deleted file mode 100644
index e69de29..0000000
diff --git a/templates/tag_index_header.html b/templates/tag_index_header.html
deleted file mode 100644
index 3cd0abd..0000000
--- a/templates/tag_index_header.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
      Etiketle rehber bulun: $TAGS
      
diff --git a/templates/tag_list_footer.html b/templates/tag_list_footer.html
deleted file mode 100644
index b9fa558..0000000
--- a/templates/tag_list_footer.html
+++ /dev/null
@@ -1 +0,0 @@
-
      
\ No newline at end of file
diff --git a/templates/tag_list_header.html b/templates/tag_list_header.html
deleted file mode 100644
index 37077ee..0000000
--- a/templates/tag_list_header.html
+++ /dev/null
@@ -1 +0,0 @@
-
      Etiketler:
diff --git a/templates/tag_separator.html b/templates/tag_separator.html
deleted file mode 100644
index c3a6e48..0000000
--- a/templates/tag_separator.html
+++ /dev/null
@@ -1 +0,0 @@
-, 
\ No newline at end of file
diff --git a/örnek.md b/örnek.md
deleted file mode 100644
index 49a3240..0000000
--- a/örnek.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Rehberimin Başlığı
-Resim koyacaksanız bu yazının üstünde olmalıdır. Yazacağınız rehber hakkında burada giriş yapabilirsiniz. Rehberin iskeletini şu şekilde belirtebilirsiniz.
-- İlk olarak bunu yapacağız
-- İkinci olarak bunu yapacağız
-- Son olarak bunu yapacağız
-
-## Birinci Yapacağımız Şey
-Yapacağımız birinci şeyi burada açıklıyoruz.
-
-## İkinci Yapacağımız Şey
-Yapacağımız ikinci şeyi burada açıklıyoruz.
-
-## Üçüncü Yapacağımız Şey
-Yapacağımız üçüncü şeyi burada açıklıyoruz.
-
-## Destek Ol
-Burada kendinize ait olan bağlantıları paylaşabilirsiniz. Youtube bağlantısı, websiteniz veya bağış bağlantınız olabilir.
-
-Kriptopara adresi ekelyecekseniz adresinizi ` `` ` arasına yerleştiriniz.
-
-- Yusuf İpek [website](https://yusufipek.me), [youtube](https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg)
-- Billy Smith - btc: `bc1q763s4ud0hgfa66ce64gyh6tsss49vyk5cqcm6w`
-- Sally Smith (fotoğrafı aldığım kişi) [website](https://yusufipek.me), [youtube](https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg)
-
-;tags: etiket1 etiket2 etiket3 (etiket kuralları için README dosyasına göz atınız!)