Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

15373

Becerikli
Katılım
11 Ocak 2025
Mesajlar
284
Çözümler
1
Beğeniler
229
Selamlar.

script.js;



JavaScript:
document.getElementById('mobile-menu-icon').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  const body = document.body;  // body'yi seçiyoruz

  // Menüye 'show' sınıfı ekleyip çıkaralım
  menu.classList.toggle('show');

  // Eğer menü açıldıysa, body'ye 'menu-open' sınıfını ekle
  if (menu.classList.contains('show')) {
    body.classList.add('menu-open');  // Menü açıldığında body'ye sınıf ekle
  } else {
    body.classList.remove('menu-open');  // Menü kapanınca sınıfı kaldır
  }
});

function applyJapaneseFontToContent() {
    // Japonca karakter setlerini tanımla
    const hiraganaRegex = /[\u3040-\u309F]/;   // Hiragana
    const katakanaRegex = /[\u30A0-\u30FF]/;   // Katakana
    const kanjiRegex = /[\u4E00-\u9FFF]/;      // Kanji
 
    let elements = document.querySelectorAll('.topic p, .topic h1, .topic h2, .topic h3, .topic h4, .topic h5, .topic h6, .topic ul, .topic ol, .topic li');
 
    elements.forEach(element => {
        const text = element.innerHTML; // Mevcut HTML içeriğini al
        let newContent = '';

        // Metni harf harf işleyelim
        for (let i = 0; i < text.length; i++) {
            let char = text.charAt(i);
        
            // Japonca karakter kontrolü
            if (hiraganaRegex.test(char) || katakanaRegex.test(char) || kanjiRegex.test(char)) {
                // Japonca karakterleri span içine al ve yazı tipini değiştir
                newContent += `<span class="japanese-font">${char}</span>`;
            } else {
                // Diğer karakterleri olduğu gibi ekle
                newContent += char;
            }
        }

        // Güncellenmiş içeriği elemente geri atama
        element.innerHTML = newContent;
    });
}

applyJapaneseFontToContent();  // Sayfa yüklendikçe çağır

    // Kullanıcının renk modu tercihini kaydetmek için bir fonksiyon
    function saveThemePreference(theme) {
        localStorage.setItem("theme", theme);  // Temayı kaydediyoruz
    }

    // Kullanıcının tercih ettiği renk modunu almak
    function getThemePreference() {
        return localStorage.getItem("theme");  // Kaydedilen temayı alıyoruz
    }

    // Sistem renk modunu algıla
    function detectSystemTheme() {
        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";  // Sistem teması
    }

    // Tema ayarlarını uygula
    function applyTheme(theme) {
        const body = document.body;  // Body elementini alıyoruz
        if (theme === "dark") {
            body.classList.add("is-dark");  // Koyu temayı ekliyoruz
        } else {
            body.classList.remove("is-dark");  // Açık temayı kaldırıyoruz
        }
    }

    // Sayfa yüklendiğinde temayı belirle ve uygula
    document.addEventListener("DOMContentLoaded", function () {
        let savedTheme = getThemePreference();  // Daha önce kaydedilmiş tema var mı?
        if (!savedTheme) {
            // Kaydedilmiş bir tema yoksa sistem temasını kullanıyoruz
            savedTheme = detectSystemTheme();
            saveThemePreference(savedTheme);
        }
        applyTheme(savedTheme);  // Temayı uygula
    });

    // Tema değiştirme butonuna tıklandığında
    document.getElementById("toggleColors").addEventListener("click", function () {
        let currentTheme = getThemePreference();  // Mevcut tema ne?
        let newTheme = currentTheme === "dark" ? "light" : "dark";  // Tema değiştir
        applyTheme(newTheme);  // Yeni temayı uygula
        saveThemePreference(newTheme);  // Yeni temayı kaydet
    });

Tema değiştirecek düğme;
HTML:
<button id="toggleColors" class="nes-btn is-error">🌞/🌕</button>

Çözemedi AI sistemleri.

Düğmeye basınca tepki vermiyor.
 
Son düzenleyen: Moderatör:
Çözüm
Temanın gece/gündüz temasını tetikleyen düğme ve js adresini footer.php'ye alarak çözdüm. Tabii js dosyasını şöyle düzelttirdik.
O zaman tahminimce gerekli olan bir JS fonksiyonu yüklenemediği için buton çalışmadı. Ayrıca bazı Javascript kodları, sayfanın sonunda yüklenmesi gerektiği gibi bazılarında durum tersidir.

Çözebilmenize sevindim. :) Javascript konusunda konsolu mutlaka kullanın. Çok faydasını gördüm.
O zaman tahminimce gerekli olan bir JS fonksiyonu yüklenemediği için buton çalışmadı. Ayrıca bazı Javascript kodları, sayfanın sonunda yüklenmesi gerektiği gibi bazılarında durum tersidir.

Çözebilmenize sevindim :) Javascript konusunda konsolu mutlaka kullanın. Çok faydasını gördüm.
Sitemdeki tek sorun oydu biliyor musun? Sayenizde çözüldü.
 
Koddaki karışık tek şey yorumlar. Okumayı zorlaştırıyor.

Gerçekten gerekmediği sürece querySelector/querySelectorAll dışında bir şey kullanmayın. 2005 yılında değiliz.
Toggle değer döndürüyor. Kullanabilirsiniz.
Tek tırnak/çift tırnak, arrow function kullanımı, çeşitli stil farklılıkları size kalmış. Ben bu şekilde tercih ediyorum.
Open mı show mu kullancağınıza karar verin bence.

Kod:
document.querySelector("#mobile-menu-icon").addEventListener("click", event => {
    const isMenuShown = document.querySelector("#menu").classList.toggle("show");
    document.body.classList.toggle("menu-open", isMenuShown);
});

function applyJapaneseFontToContent() {
    const japaneseRegex = /([\u3040-\u30FF\u4E00-\u9FFF])/g;
    const elements = document.querySelectorAll(".topic :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li)");
    const replacement = '<span class="japanese-font">$1</span>';

    elements.forEach(element => {
        element.innerHTML = element.innerHTML.replace(japaneseRegex, replacement);
    });
}

Tema kısmında CSS'e daha fazla yoğunlaşmanızı tavsiye ederim. Özellikle varsayılan desteği sunmada.
Şu anda siteyi bir kere sistem koyu temada iken açsam bu kaydediliyor ve sistem temasını değiştdirsem dahi değişmiyor. Üstüne tema geçişi görülüyor.
Scrollbar rengi sistem temasına göre değişiyor.

Şu tarz bir şey kullanabilirsiniz. Sistem temasına ayarlı bırakabiliyorsunuz. Yapacağınız tek şey bir seçme kısmı ayarlamak. Sayfa açıldığında kayıtlı değeri uygulayıp göstermek, değer değiştiğinde seçileni kaydedip uygulamak. JS kısmı var olandan daha ufak olacaktır. CSS yazarken de daha kolay, aynı şeyi defalarca yazmayacaksınız. Fallback var, bir zahmet yeterince güncel tarayıcı kullanmayanlar koyu temadan mahrum kalsınlar.

Kod:
:root {
    --color1: #123456;
    --color2: #123456;
    --color3: #123456;
    --color4: #123456;

    --body-bg: light-dark(var(--color1), var(--color2));
    --body-text: light-dark(var(--color3), var(--color4));
}

:root:is(:not([theme]), [theme="system"]) {
    @media (prefers-color-scheme: light) {
        color-scheme: light;
    }
    @media (prefers-color-scheme: dark) {
        color-scheme: dark;
    }
}
:root[theme="light"] {
    color-scheme: light;
}
:root[theme="dark"] {
    color-scheme: dark;
}
 
@Hasan Merkit, Sana CSS'imi göstereyim. Tamamını atmam merak etme.

CSS:
/* Pixellari Yazı Tipi */
@font-face {
    font-family: 'Pixellari';
    src: url('https://ayhangazi.com.tr/bl-themes/ayhangazi/lib/pixellari.ttf') format('truetype');
}

/* Retro Land Mayhem Yazı Tipi */
@font-face {
    font-family: 'Retro Land Mayhem Regular';
    src: url('https://ayhangazi.com.tr/bl-themes/ayhangazi/lib/retro-land-mayhem.ttf') format('truetype');
}

/* jf-dot-izumi16 Yazı Tipi (Japonca) */
@font-face {
    font-family: 'jf-dot-izumi16';
    src: url('https://ayhangazi.com.tr/bl-themes/ayhangazi/lib/jf-dot-izumi16.ttf') format('truetype');
}

/* Başlıklar için Pixellari */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Pixellari', monospace;
}

/* Paragraflar için Retro Land Mayhem */
p, body {
    font-family: 'Retro Land Mayhem Regular', monospace;
}

/* Japonca karakterler için jf-dot-izumi16 */
.japanese-font {
    font-family: 'jf-dot-izumi16', sans-serif; /* Yedek olarak sans-serif ekleyebiliriz */
}
 
@Vavien., Bunu yapınca Japon fontu çöküyor, o yüzden vazgeçtim ama mantıklı dediklerin.
Nasıl yani? Ben yapınca class ekleniyor. Font iki durumda da aynı görünüyor bana. Class eklendiği için font-size artıyor.
Metnin ekran görüntüsünü alınca sanırım class eklenmiş hali piksel piksel bir font.

Hiç ellenmemiş, paylaştığım hali, paylaşacağım hali.

1739182824625.webp

1739182843177.webp

1739182856054.webp


1739182934159.webp

1739182944744.webp

1739182957430.webp

CSS bu şekilde aktif.

1739182870496.webp


Ardışık karakterleri toplu halde yapması için ilki ikinciye çevrilmeli.
Kod:
const japaneseRegex = /([\u3040-\u30FF\u4E00-\u9FFF])/g;
const japaneseRegex = /([\u3040-\u30FF\u4E00-\u9FFF]+)/g;

Bu arada bu çerçeve farklı olduğu için sayfa kayıyor.

1739183008328.webp

1739183016099.webp


Font için JS yerine CSS ile tarayıcılara göndermen daha mantıklı değil mi?
Sanırım sitedeki yazıları hazırlarken UTF-8 şeklinde yazıyor ve kalıyor. Sunucuya o şekilde kaydediliyor ve kullanıcı tarafına da o şekilde geliyor. O kısımlarda farklı font için bir class içine alıyor.
Ya metin sunucuya kaydedilirken, ya sunucudan kullanıcıya gelirken ya da kullanıcıya geldikten sonra o class'ın eklenmesi lazım. Belki de en rahatı sonuncusu.
 
Açık/koyu tema kısmını diyorsanız direkt koyunca bozar. Ona göre tasarlanması gerekiyor. Ben JS kodu için dediniz sandım.

Plugin desteği var mış. Kalın yazma gibi buton eklenebilir. diye düşünüyorum.
Temamda gece/gündüz modu var. Sadece biraz daha düzenleme lazım gibi. Dediğiniz şey bu ise.