Önyükleme Geliştirme Ortamı Oluşturma

Bu yazıda Bir Bootstrap geliştirme ortamı oluşturarak başlayacağız. Bir önceki makalede açıkladığımız gibi Bootstrap, herhangi bir ekran boyutuna otomatik olarak uyum sağlayan siteler oluşturmamızı kolaylaştıran bir çerçevedir.

Aslında, özel araçlara gerek yoktur. Kodu masaüstünüzdeki metin düzenleyiciye kolayca yazabilirsiniz. Hatta birçoğunun HTML, CSS ve Javascript desteği vardır. Fakat, entegre geliştirme ortamları, kod yazmanızı ve düzeltmenizi kolaylaştıran diğer araçları içerir.

Önyükleme Geliştirme Ortamı Oluşturma

Benim zevkime göre, en iyi entegre geliştirme ortamı Visual Studio Code'dur. Ancak, Microsoft'a telemetri gönderdiği için birçok Linux kullanıcısı bundan hoşlanmaz. Yine de, VSCodium adlı VSCode kaynak kodunu kullanan ve kimseyle veri paylaşmayan bir alternatif var. Yani sürüm bundan sonra kullanacağız.

VSCodium'u yükleme

VSCodium'u aşağıdaki şekillerde kurabiliriz:

Snap Mağazası

sudo snap install codium --classic

düz paket

flatpak install flathub com.vscodium.codium

Debian ve türevleri

Doğrulama anahtarlarını aldık

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg
Depoyu ekliyoruz
echo 'deb [ imzalı=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Güncelliyoruz ve kuruyoruz
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Doğrulama anahtarlarını alıyoruz

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

Depoları ekliyoruz

Fedora/RHEL/CentOS/RockyLinux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

OpenSUSE/SUSE: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

Yüklemek için şunları yapıyoruz:

Fedora/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Bu iki komuttan birini kullanabiliriz

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Parrot İşletim Sistemi

sudo apt update
sudo apt install codium

Nix(İşletim Sistemi)

nix-env -iA nixpkgs.vscodium

VSCodium'u Yapılandırma

Kurulum moduna bağlı olarak, VSCodium İngilizce olabilir. Bunu kolayca değiştirebiliriz.

1. Dosyalar menüsünde tıklayın Tercihler.
2. Tıklamak Uzatma.
3. Biz mal İspanyol arama motorunda.
4. Uzantıya tıklayın İspanyolca Dil.
5. üzerine tıklayarak kuruluma başlıyoruz. Yükleyin.
6. Tıklamak Dili değiştirin ve yeniden başlatın.

VSCode, farklı dillerde programlamayı kolaylaştıran geniş bir uzantı koleksiyonuna sahiptir ve bunları VSCodium'da da kullanabiliriz. İhtiyacımız olanı yükleyelim:

1. Tıklamak Tercihler.
2. Tıklamak Uzantılar.
3. Biz mal Çizme atkısı arama motorunda.
4. yazanı seçiyoruz Bootstrap 5 ve Yazı Tipi Müthiş Parçacıkları.
5. Yükle'ye tıklayın

Site kodunu yazmaya başladığımızda bu uzantının kullanımını göreceğiz. Ancak bir açıklama yapmam gerekiyor. Çalışması için komutları yazmanız gerekecek. Bu durumda kopyala ve yapıştır çalışmıyor.

Önyükleme Alma

Bootstrap temel olarak bir bileşenler topluluğudur. Bootstrap tabanlı bir web sitesinin kodunu yazdığımızda Yapmamız gereken ilk şey, tarayıcıya onları nerede bulacağını söylemek.

Bootstrap almak için iki alternatif var. Bunlardan ilki, onu şuradan indirmektir: web sitesi ve proje dosyalarına ekleyin ve ikincisi, projenin sunucularına bir bağlantı koymaktır.. Bazı paket yöneticileri kullanılarak da indirilebilir (dağıtımlar tarafından kullanılanlar değil, farklı programlama dilleri tarafından kullanılanları kastediyorum) ancak bunu belgelere bırakacağız.

Unutmayın Bootstrap dosyalarıyla yerel olarak çalışmayı tercih ederseniz, bunları sunucuya yüklemeniz gerekir. web sitesinin geri kalanıyla. Projenin CDN sunucusuna bağlanırsanız, buna gerek kalmaz.

Bootstrap paketini indirirseniz, iki klasör ve bir dizi dosya olduğunu göreceksiniz. Biz sadece ikisiyle ilgileniyoruz. JS klasöründen bootstrap.bundle.js ve CSS klasöründen önyükleme.css.

Her iki seçeneğin kodu hemen hemen aynıdır. Sadece konum yolunu değiştirin.

bir örnek görelim
Bootstrap'i yerel olarak kullanma

Proje CDN'sinden kullanma

Yerel dosyanın konumu isteğe bağlıdır. Bunları bootrap adlı bir klasöre koydum ve JS ve CSS adında iki alt klasör oluşturdum.

Kodun geri kalanını anlamadıysanız endişelenmeyin. Bir sonraki makalede bununla ilgileneceğiz.

Dikkat

Makaleyi yayınladıktan sonra içerik yöneticimizin HTML kodunu değil sonucu gösterdiğini keşfettim. Örnekleri Github veya benzeri bir yere yükleyeceğim ve ekran görüntülerini buraya koyacağım.