mirror of
https://github.com/yusufipk/teknolojirehberleri.xyz.git
synced 2026-09-11 10:56:08 +00:00
fresh start
This commit is contained in:
Yusuf İpek
@@ -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.
|
|
||||||
@@ -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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
|
||||||
@@ -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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
2. Çıkan sayfadan varsayılan profili bulup "Kök Klasör" yazan yerdeki "Klasörü aç" butonuna tıklayın.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3. Açılan klasörden bir üst dizine gidin ve profilinizi kopyalayın.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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:[email protected]) | [Github hesabım](https://github.com/hamzak37)
|
|
||||||
|
|
||||||
;tags: firefox tarayıcı açık-kaynak
|
|
||||||
@@ -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 <h1></h1> 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 <a></a> etiketine denktir.
|
|
||||||
|
|
||||||
Resimler:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Resim linklerinin normal linklerden tek farkı başına ! eklenmesidir.
|
|
||||||
|
|
||||||
Resim linkleri ise <img> etiketine denktir.
|
|
||||||
```
|
|
||||||
|
|
||||||
**Örnekler:**
|
|
||||||
|
|
||||||
[Örnek Link](https://duckduckgo.com)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 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
|
|
||||||
```
|
|
||||||
|
|
||||||
yazıldığında bu şekilde görünmektedir.
|
|
||||||
|
|
||||||
`<div>` 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 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
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
|
||||||
@@ -1,206 +0,0 @@
|
|||||||
Websitenize Tema Ekleme
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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/)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
```
|
|
||||||
<div class="radio">
|
|
||||||
<input type="radio" id="theme1" name="theme1" />
|
|
||||||
<input type="radio" id="theme2" name="theme2" />
|
|
||||||
<input type="radio" id="theme3" name="theme3" />
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
|
||||||
@@ -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; *<site adı>.wordpress.com* veya *<site adı>.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
|
|
||||||
@@ -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 '<!DOCTYPE html><html><head><title>$$TITLE</title></head><body>' > templates/header.html
|
|
||||||
printf '</body></html>' > templates/footer.html
|
|
||||||
printf '' > templates/index_header.html
|
|
||||||
printf '<p>Tags:' > templates/tag_list_header.html
|
|
||||||
printf '<a href="$$URL">$$NAME</a>' > templates/tag_entry.html
|
|
||||||
printf ', ' > templates/tag_separator.html
|
|
||||||
printf '</p>' > templates/tag_list_footer.html
|
|
||||||
printf '<h2>Articles</h2><ul>' > templates/article_list_header.html
|
|
||||||
printf '<li><a href="$$URL">$$DATE $$TITLE</a></li>' > templates/article_entry.html
|
|
||||||
printf '' > templates/article_separator.html
|
|
||||||
printf '</ul>' > templates/article_list_footer.html
|
|
||||||
printf '' > templates/index_footer.html
|
|
||||||
printf '' > templates/tag_index_header.html
|
|
||||||
printf '' > templates/tag_index_footer.html
|
|
||||||
printf '<h1>$$TITLE</h1>' > 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/>/\>/g' \
|
|
||||||
-e '/^```$$/{s,.*,,;x;p;/^<\/code>/d;s,.*,<pre><code>,;bT}' \
|
|
||||||
-e 'x;/<\/code>/{x;s,\$$,\$,g;$$G;p;d};x' \
|
|
||||||
-e 's,\\\$$,\$,g' \
|
|
||||||
-e '/^####/{s,^####,<h4>,;s,$$,</h4>,;H;s,.*,,;x;p;d}' \
|
|
||||||
-e '/^###/{s,^###,<h3>,;s,$$,</h3>,;H;s,.*,,;x;p;d}' \
|
|
||||||
-e '/^##/{s,^##,<h2>,;s,$$,</h2>,;H;s,.*,,;x;p;d}' \
|
|
||||||
-e '/^#/{s,^#,<h1>,;s,$$,</h1>,;H;s,.*,,;x;p;d}' \
|
|
||||||
-e 's,`\([^`]*\)`,<code>\1</code>,g' \
|
|
||||||
-e 's,\*\*\(\([^*<>][^*<>]*\*\?\)*\)\*\*,<b>\1</b>,g' \
|
|
||||||
-e 's,\*\([^*<>][^*<>]*\)\*,<i>\1</i>,g' \
|
|
||||||
-e 's,!\[\([^]]*\)\](\([^)]*\)),<img src="\2" alt="\1"/>,g' \
|
|
||||||
-e 's,\[\([^]]*\)\](\([^)]*\)),<a href="\2">\1</a>,g' \
|
|
||||||
-e '/^- /{s,^- ,<li>,;s,$$,</li>,;x;/^<\/ul>/{x;bL};p;s,.*,<ul>,;bT}' \
|
|
||||||
-e '/^[1-9][0-9]*\. /{s,^[0-9]*\. ,<li>,;s,$$,</li>,;x;/^<\/ol>/{x;bL};p;s,.*,<ol>,;bT}' \
|
|
||||||
-e '/^$$/{x;/^$$/d;p;d}' \
|
|
||||||
-e 'x;/^$$/{s,.*,<p>,;bT};x' \
|
|
||||||
-e ':L;$$G;p;d' \
|
|
||||||
-e ':T;p;:t;s,<\([^/>][^>]*\)>\(\(<[^/>][^>]*>\)*\),\2</\1>,;/<[^\/>]/bt;x;/^$$/{$${x;p};d};bL' \
|
|
||||||
"$<" | envsubst >> $@; \
|
|
||||||
envsubst < templates/article_footer.html >> $@; \
|
|
||||||
envsubst < templates/footer.html >> $@; \
|
|
||||||
|
|
||||||
blog/rss.xml: $(ARTICLES)
|
|
||||||
printf '<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0">\n<channel>\n<title>%s</title>\n<link>%s</link>\n<description>%s</description>\n' \
|
|
||||||
"$(BLOG_TITLE)" "$(BLOG_URL_ROOT)" "$(BLOG_DESCRIPTION)" > $@
|
|
||||||
for f in $(ARTICLES); do \
|
|
||||||
printf '%s ' "$$f"; \
|
|
||||||
git log --diff-filter=A --date="format:%s %a, %d %b %Y %H:%M:%S %z" --pretty=format:'%ad%n' -- "$$f"; \
|
|
||||||
done | sort -k2nr | head -n $(BLOG_FEED_MAX) | cut -d" " -f1,3- | while IFS=" " read -r FILE DATE; do \
|
|
||||||
printf '<item>\n<title>%s</title>\n<link>%s</link>\n<guid>%s</guid>\n<pubDate>%s</pubDate>\n<description>%s</description>\n</item>\n' \
|
|
||||||
"`head -n 1 $$FILE`" \
|
|
||||||
"$(BLOG_URL_ROOT)/`basename $$FILE .md`.html" \
|
|
||||||
"$(BLOG_URL_ROOT)/`basename $$FILE .md`.html" \
|
|
||||||
"$$DATE" \
|
|
||||||
"`sed -n '1d;/^$$/{2{d;b};q};p' < $$FILE`"; \
|
|
||||||
done >> $@
|
|
||||||
printf '</channel>\n</rss>\n' >> $@
|
|
||||||
|
|
||||||
blog/atom.xml: $(ARTICLES)
|
|
||||||
printf '<?xml version="1.0" encoding="UTF-8"?>\n<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">\n<title type="text">%s</title>\n<subtitle type="text">%s</subtitle>\n<updated>%s</updated>\n<link rel="alternate" type="text/html" href="%s"/>\n<id>%s</id>\n<link rel="self" type="application/atom+xml" href="%s"/>\n' \
|
|
||||||
"$(BLOG_TITLE)" "$(BLOG_DESCRIPTION)" "$(shell date +%Y-%m-%dT%H:%M:%SZ)" "$(BLOG_URL_ROOT)" "$(BLOG_URL_ROOT)/atom.xml" "$(BLOG_URL_ROOT)/atom.xml" > $@
|
|
||||||
for f in $(ARTICLES); do \
|
|
||||||
printf '%s ' "$$f"; \
|
|
||||||
git log --diff-filter=A --date="format:%s %Y-%m-%dT%H:%M:%SZ" --pretty=format:'%ad %aN%n' -- "$$f"; \
|
|
||||||
done | sort -k2nr | head -n $(BLOG_FEED_MAX) | cut -d" " -f1,3- | while IFS=" " read -r FILE DATE AUTHOR; do \
|
|
||||||
printf '<entry>\n<title type="text">%s</title>\n<link rel="alternate" type="text/html" href="%s"/>\n<id>%s</id>\n<published>%s</published>\n<updated>%s</updated>\n<author><name>%s</name></author>\n<summary type="text">%s</summary>\n</entry>\n' \
|
|
||||||
"`head -n 1 $$FILE`" \
|
|
||||||
"$(BLOG_URL_ROOT)/`basename $$FILE .md`.html" \
|
|
||||||
"$(BLOG_URL_ROOT)/`basename $$FILE .md`.html" \
|
|
||||||
"$$DATE" \
|
|
||||||
"`git log -n 1 --date="format:%Y-%m-%dT%H:%M:%SZ" --pretty=format:'%ad' -- "$$FILE"`" \
|
|
||||||
"$$AUTHOR" \
|
|
||||||
"`sed -n '1d;/^$$/{2{d;b};q};p' < $$FILE`"; \
|
|
||||||
done >> $@
|
|
||||||
printf '</feed>\n' >> $@
|
|
||||||
@@ -1,157 +0,0 @@
|
|||||||
.TH BLOG 1 blogit\-1.0
|
|
||||||
.SH NAME
|
|
||||||
blogit \- a small static blog generator
|
|
||||||
|
|
||||||
.SH SYNOPSIS
|
|
||||||
.B blogit
|
|
||||||
.RB [ init | build | deploy | clean ]
|
|
||||||
|
|
||||||
.SH DESCRIPTION
|
|
||||||
.B blogit
|
|
||||||
is a small static blog generator, using a markdown-like syntax and git capabilities.
|
|
||||||
For example, first posted and last edited dates are extracted from git history.
|
|
||||||
|
|
||||||
.SH GETTING STARTED
|
|
||||||
Run "blogit init" and follow the interactive configuration.
|
|
||||||
This will create the basic structure and initialize a git repository.
|
|
||||||
|
|
||||||
.SH STRUCTURE
|
|
||||||
Articles are created in the
|
|
||||||
.B articles
|
|
||||||
directory, using a markdown-like syntax (see
|
|
||||||
.BR SYNTAX ).
|
|
||||||
HTML templates (configurable chunks of HTML code that will be used for static page generation) are stored in the
|
|
||||||
.B templates
|
|
||||||
directory, and can be edited (see
|
|
||||||
.BR TEMPLATES ).
|
|
||||||
Additional data can be stored in the
|
|
||||||
.B data
|
|
||||||
directory and will be copied at the root of the website.
|
|
||||||
|
|
||||||
.SH WORKFLOW
|
|
||||||
The articles, templates and data can be created and edited offline.
|
|
||||||
To create a local version of the blog, run "blogit build".
|
|
||||||
It will be available in the
|
|
||||||
.B blog
|
|
||||||
directory, and the main page is index.html.
|
|
||||||
Note that only articles known to git will be created (this is to prevent unfinished articles to be published).
|
|
||||||
When its ready for publication, commit the changes to the git repository, and build the blog using "blogit build".
|
|
||||||
Then run "blogit deploy" to publish the site with
|
|
||||||
.BR rsync (1)
|
|
||||||
to the remote configured at the beginning.
|
|
||||||
|
|
||||||
.SH SYNTAX
|
|
||||||
The first line of the article text file is its title.
|
|
||||||
The next line can be blank, and will be skipped if that case.
|
|
||||||
Then the remaining of the file is in a markdown format, with the following formatting options:
|
|
||||||
.TP
|
|
||||||
.B Sections
|
|
||||||
Sections and subsections are defined by lines starting with one or several
|
|
||||||
.RB ' # ',
|
|
||||||
each indicating a new section level.
|
|
||||||
.TP
|
|
||||||
.B Paragraphs
|
|
||||||
Paragraphs are started with a blank line.
|
|
||||||
.TP
|
|
||||||
.B Bold, italics
|
|
||||||
Chunks enclosed in stars
|
|
||||||
.RB ' * '
|
|
||||||
are formatted in bold.
|
|
||||||
Chunks enclosed with two stars
|
|
||||||
.RB ' ** '
|
|
||||||
are formatted in bold.
|
|
||||||
.TP
|
|
||||||
.B Images
|
|
||||||
Images are inserted using the following syntax: "".
|
|
||||||
.TP
|
|
||||||
.B Links
|
|
||||||
Links are inserted using the following syntax: "[link text](url)".
|
|
||||||
.TP
|
|
||||||
.B Comments
|
|
||||||
Lines starting with a semi-colon are comments and are ignored.
|
|
||||||
It can be used to store metadata.
|
|
||||||
In particular, comments beginning with "tags:" indicate tags and are available in the templates in the TAGS variable.
|
|
||||||
.TP
|
|
||||||
.B Code blocks
|
|
||||||
Code blocks start and end with ``` (this marker must be on its own line).
|
|
||||||
The content is not formatted, and will appear as writter in the source file.
|
|
||||||
.TP
|
|
||||||
.B
|
|
||||||
Unordered lists
|
|
||||||
Each item starts with "- ".
|
|
||||||
.TP
|
|
||||||
.B
|
|
||||||
Ordered lists
|
|
||||||
Each item starts with "1. ", "2. " and so on.
|
|
||||||
The numbers are not checked, so any number can actually be used.
|
|
||||||
|
|
||||||
.SH TEMPLATES
|
|
||||||
Templates are small HTML code chunks that are used to build the blog pages.
|
|
||||||
Any variable reference
|
|
||||||
.RB ( $VARNAME )
|
|
||||||
is replaced with the corresponding environment variable value.
|
|
||||||
|
|
||||||
.SS Index page
|
|
||||||
The index page is built using the following templates:
|
|
||||||
|
|
||||||
- header.html;
|
|
||||||
|
|
||||||
- index_header.html;
|
|
||||||
|
|
||||||
- tag_list_header.html;
|
|
||||||
|
|
||||||
- tag_entry.html, for each tag;
|
|
||||||
|
|
||||||
- tag_separator.html, between each tag;
|
|
||||||
|
|
||||||
- tag_list_footer.html;
|
|
||||||
|
|
||||||
- article_list_header.html;
|
|
||||||
|
|
||||||
- article_entry.html, for each article entry;
|
|
||||||
|
|
||||||
- article_separator.html, between each article;
|
|
||||||
|
|
||||||
- article_list_footer.html;
|
|
||||||
|
|
||||||
- index_footer.html;
|
|
||||||
|
|
||||||
- footer.html.
|
|
||||||
|
|
||||||
The TITLE variable will contain "index".
|
|
||||||
In tag_entry, the following additional variables are available:
|
|
||||||
|
|
||||||
- URL, containing the (relative) URL of the tag index page;
|
|
||||||
|
|
||||||
- NAME, the tag name.
|
|
||||||
|
|
||||||
In article_entry, the following additional variables are available:
|
|
||||||
|
|
||||||
- URL, containing the (relative) URL of the article;
|
|
||||||
|
|
||||||
- DATE, the first publication date;
|
|
||||||
|
|
||||||
- TITLE, the title of the article.
|
|
||||||
|
|
||||||
.SS Article pages
|
|
||||||
Article pages are built from the following templates:
|
|
||||||
|
|
||||||
- header.html
|
|
||||||
|
|
||||||
- index_header.html
|
|
||||||
|
|
||||||
- (then the article file is formatted and inserted)
|
|
||||||
|
|
||||||
- index_footer.html
|
|
||||||
|
|
||||||
- footer.html
|
|
||||||
|
|
||||||
At all stages, the following variables are defined:
|
|
||||||
|
|
||||||
- TITLE, the title of the article;
|
|
||||||
|
|
||||||
- DATE_POSTED, the first publication date;
|
|
||||||
|
|
||||||
- DATE_EDITED, the last edit (commit) date;
|
|
||||||
|
|
||||||
- TAGS, the tags parsed from "tags:" comments.
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
BLOG_TITLE:=Teknoloji Rehberleri
|
|
||||||
BLOG_REMOTE:=/var/www/teknolojirehberleri.xyz
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
@@ -1,91 +0,0 @@
|
|||||||
body {
|
|
||||||
background: #151515;
|
|
||||||
color: #ccc;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 0 16px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol > li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul > li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: tomato;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 5px;
|
|
||||||
max-width: 600px;
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #12161b;
|
|
||||||
padding: 0 0.3rem 1rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
background-color: #0e1216;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
body {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
a:visited {
|
|
||||||
color: purple;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
a[href] {
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 55em) {
|
|
||||||
#artlist {
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 100em) {
|
|
||||||
#artlist {
|
|
||||||
column-count: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<li><a href="$URL">$TITLE</a></li>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
</main><p><i>Yazının paylaşıldığı tarih: $DATE_POSTED, son düzenleme tarihi: $DATE_EDITED, son düzenleyen: $AUTHOR</i></p>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<h1>$TITLE</h1>
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
</ul>
|
|
||||||
<h2>Site Hakkında</h1>
|
|
||||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
|
||||||
<h3>Nasıl Rehber Yazarım?</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
|
||||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
|
||||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<h2>Rehberler</h2><ul id=artlist>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<a href=".">ana sayfa</a>
|
|
||||||
<a href="./rss.xml">RSS</a>
|
|
||||||
<a href="./atom.xml">atom</a>
|
|
||||||
<br>
|
|
||||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
|
||||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
|
||||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
|
||||||
</footer>
|
|
||||||
</body></html>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="tr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="./style.css" />
|
|
||||||
<title>$TITLE</title>
|
|
||||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
|
||||||
izleyici yok!" >
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
<div class="banner">
|
|
||||||
<h1>⌨️ $TITLE 🖱️</h1>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<p>Teknoloji rehberleri. Reklam ve izleyici yok!</p>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<a href="$URL">$NAME</a>
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
<div class="banner">
|
|
||||||
<h1> ⌨️ $TITLE 🖱️ </h1>
|
|
||||||
<hr/>
|
|
||||||
</div>
|
|
||||||
<p><i>Etiketle rehber bulun:</i> <b>$TAGS</b></p>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
</p>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<p>Etiketler:
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
,
|
|
||||||
@@ -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!)
|
|
||||||
Reference in New Issue
Block a user