Kod Enjeksiyonu nasıl kullanılır?
Kod Enjeksiyonu, Ghost sitenize CSS, JS ve daha fazlasını eklemek için güçlü ve kullanışlı bir araçtır. Bu eğitimde bundan en iyi şekilde nasıl yararlanacağınızı öğrenin.
Kod Enjeksiyonu, bir Ghost sitesine analizler, stiller, özel yazı tipleri, meta etiketler ve betikler eklemek için kolayca bir arayüz sunar. Ayrıca temanızda küçük düzenlemeler yapmak veya JavaScript ile harika efektler eklemek için de mükemmel bir araçtır. Bu eğitimde, Ghost'ta Kod Enjeksiyonu'nun nasıl kullanılacağını ve kullanımı hakkında bilmeniz gereken her şeyi öğrenin.
Kod Enjeksiyonu Nedir?
Adından da anlaşılacağı gibi, Kod Enjeksiyonu, Ghost sitenize kod enjekte eder. Kod Enjeksiyonuna Ayarlar →'dan erişin.
Kod Enjeksiyonu sayfasında iki alan bulunur: Site Başlığı ve Site Alt Bilgisi. Ghost, bu kutulara girilen tüm metinleri sitenizin her sayfasına ekler.
💡
Kod Enjeksiyonu, Ghost Editör'ün kenar çubuğu aracılığıyla gönderi bazında da mevcuttur. Yukarıda açıklandığı gibi çalışır, ancak yalnızca ilgili gönderinin sayfasına eklenir.
Site Başlığı kodu <head> etiketine, Site Alt Bilgisi kodu ise kapanış </body> etiketinden önce eklenir. Her ikisi de temanız tarafından kullanılan diğer stil ve betiklerden sonra eklenir.
html:
<html>
<head>
<title>Page Title</title>
<!-- Code Injection Site Header added here -->
</head>
<body>
<!-- Your beautiful content -->
<!-- Code Injection Site Footer added here -->
</body>
</html>Site Başlığına CSS Ekleme
Kod Enjeksiyonunun en yaygın kullanım alanlarından biri, temanızın görünümünü ve hissini özelleştirmek için Ghost sitenize CSS eklemektir.
Diyelim ki Casper temasını kullanan hayvanlarla ilgili bir sitemiz var.
Her şey oldukça güzel görünüyor, ancak Google Fonts'tan özel bir yazı tipi kullanarak biraz eğlence katalım. Kullanmak istediğiniz yazı tipini bulun; hayvanlar sitemiz için "Luckiest Guy" adlı bir yazı tipi kullanacağız. Yazı tipinin sayfasına gidin ve "Yazı tipini al"a tıklayın.
Daha sonra Gömme kodunu al'a tıklayın.
<link> etiketlerini kopyalayın ve Site Başlığına yapıştırın.
html:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">Ardından, CSS kurallarını ekleyin. Site Başlığına CSS kuralları eklediğinizde, bunları bir <style> etiketiyle sarın. Yeni ve çılgın yazı tipimizin yalnızca başlıklarımızı etkilemesini istiyoruz, bu yüzden yalnızca bunlara uygulayacağız. Bu yazı tipinin yalnızca tek bir ağırlığı olduğundan, bunu da belirteceğiz.
html:
<style>
h1, h2, h3, h4, h5, h6 {
font-family: 'Luckiest Guy', sans-serif;
font-weight: 400;
}
</style>İşte bu kadar! Kod Enjeksiyonu kaydedilmeye hazır.
Ve hayvan sitemiz de artık yeni ve eğlenceli bir yazı tipiyle
Site Alt Bilgisine JS Ekleme
Kod Enjeksiyonunun ikinci en yaygın kullanım alanı, bir Ghost sitesine JavaScript eklemektir. JS eklerken, düzgün yüklenmesi için Site Alt Bilgisine ekleyin.
Örneğin, hayvanlar sitemize bir daktilo efekti ekleyelim. Bu süreçte bize yardımcı olması için açık kaynaklı TypewriterJS kütüphanesini kullanacağız.
Ana betiği Site Alt Bilgisine yükleyin
html:
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>Ardından, TypewriterJS betiğini yapılandırın ve sayfada başlatın. Kod Enjeksiyonu yoluyla JS eklediğinizde, bunu bir <script> etiketiyle sarın.
html:
<script>
const app = document.querySelector('.site-title + p');
const typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.typeString('356 of the best <strong>monkeys</strong>')
.pauseFor(1000)
.deleteChars(7)
.typeString('<strong>parrots</strong>')
.pauseFor(750)
.deleteChars(7)
.typeString('<strong>sharks</strong>')
.pauseFor(500)
.deleteChars(6)
.typeString('<strong>snakes</strong>')
.pauseFor(500)
.deleteChars(7)
.typeString('<strong>animals</strong> on the web')
.pauseFor(1500)
.deleteAll(50)
.start();
</script>Tamamdır! Site Alt Bilgisi kaydedilmeye hazır.
