Blogger'da slug sorununu aşmak

Blogger.Com'u uzun bir aradan sonra yazikusagi.com için kullanmaya karar verdim. Kendine özel bir tema ve Qkod entegresiyle on numara bir blog hazırladığımı düşünerek alan adımı Blogger.Com'a bağladım ve yazı yazmaya başladım.

Derken karşıma slug sorunu çıktı.

Nedir bu slug sorunu?

Yazı yazdığınızda bağlantı kısmında site adresinin arkasında görünen ve arada çizgi işareti bulunan adrese slug diyoruz. Misal, https://gurkanozsoy.com/araclar/link-kisaltma-ve-qr-kodu-olusturma-eklentisi/ adresinde gördüğünüz bağlantıdaki link-kisaltma-ve-qr-kodu-olusturma-eklentisi kısmı slug oluyor. İşte Blogger.Com'da bu kısım Türkçe karakterler için epey sıkıntı. Türkçe karakter kullandığınızda slug kısmına anlamsız şeyler ekliyor. Daha doğrusu Türkçe karakterleri İngilizce karşılığına, örneğin ı harfini i harfine dönüştürmediği için çok kötü bir şey ortaya çıkıyor.

Neyse ki bunu çözmek için çok uğraşmam gerekmedi. Yazdığım basit bir kodla sorunu çözdüm.

JavaScript
javascript:(function(){const m={'ç':'c','Ç':'c','ğ':'g','Ğ':'g','ı':'i','İ':'i','ö':'o','Ö':'o','ş':'s','Ş':'s','ü':'u','Ü':'u'};let val='';const titleSelectors=['div[aria-label*="Title"]','div[aria-label*="Başlık"]','textarea[aria-label*="Title"]','textarea[aria-label*="Başlık"]','input[aria-label*="Title"]','input[aria-label*="Başlık"]','[data-placeholder*="Başlık"]','[data-placeholder*="Title"]','.quantumWizTextinputPapertextareaInput'];for(let sel of titleSelectors){const el=document.querySelector(sel);if(el){val=el.value||el.innerText||el.textContent;if(val&&val.trim())break;}}if(!val||!val.trim()){const editables=document.querySelectorAll('[contenteditable="true"]');for(let ed of editables){if(!ed.closest('iframe')&&ed.offsetHeight<120){val=ed.innerText||ed.textContent;if(val&&val.trim())break;}}}if(!val||!val.trim()){val=prompt('Başlık okunamadı, lütfen başlığı girin:');}if(!val||!val.trim())return;let slug=val.replace(/[çÇğĞıİöÖşŞüÜ]/g,c=>m[c]||c).toLowerCase().normalize('NFKD').replace(/[\u0300-\u036f]/g,'').replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');function setNativeValue(el,val){const setter=Object.getOwnPropertyDescriptor(el,'value')?.set||Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el),%27value%27)?.set;if(setter){setter.call(el,val);}else{el.value=val;}el.dispatchEvent(new Event(%27input%27,{bubbles:true}));el.dispatchEvent(new Event(%27change%27,{bubbles:true}));}const headers=Array.from(document.querySelectorAll(%27div[role="heading"], div[role="button"], span, div%27));const permalinkHeader=headers.find(el=>/kalıcı bağlantı|permalink/i.test(el.innerText||el.textContent));if(permalinkHeader){permalinkHeader.click();}setTimeout(()=>{const radios=Array.from(document.querySelectorAll(%27input[type="radio"], [role="radio"]%27));const customRadio=radios.find(r=>r.value===%27CUSTOM%27||r.getAttribute(%27data-value%27)===%27CUSTOM%27||/özel|custom/i.test(r.parentElement?.innerText||%27%27));if(customRadio){customRadio.click();}setTimeout(()=>{const inputs=Array.from(document.querySelectorAll(%27input[type="text"]%27));const targetInput=inputs.find(i=>/özel|custom|bağlantı|permalink/i.test(i.getAttribute(%27aria-label%27)||%27%27)||i.name===%27customUrl%27||i.closest(%27[data-panel="permalink"]%27));if(targetInput){setNativeValue(targetInput,slug);targetInput.focus();}navigator.clipboard.writeText(slug);},200);},200);})();

Peki bu kod ne yapıyor?

Diyelim ki şık bir ışık testi yapıyoruz başlıklı bir yazı yazdım. Normalde bunun adresi https://www.sitem.com/2026/09/sk-bir-sk-testi-yapyoruz.html şeklinde. Yer imlerine eklediğim yukarıdaki koda tıkladığım anda özel bağlantı kısmına geçiyor ve slug kısmını https://www.sitem.com/2026/09/sik-bir-isik-testi-yapiyoruz.html şekline dönüştürüyor.

Böylece sorunum çözülmüş oldu. Nasıl çalıştığını buradan izleyebilirsiniz.

Yorumlar (0)

Henüz yorum yapılmamış. İlk yorumu siz yapın!

Yorum Bırakın