Cara Menghapus Aset Bawaan Blogger


Aset Blogger default telah menjangkiti saya sejak saya mulai menyelam jauh ke dalam template Blogger untuk membuat desain saya lebih baik dan untuk mendorong waktu buka halaman turun. Baru-baru ini saya menemukan cara menghapusnya sehingga tidak ada permintaan yang dibuat.

PERINGATAN Ini adalah tutorial yang dirancang untuk pengembang web ahli, mengikuti tutorial ini dapat memecah penyesuai templat, penyesuai tata letak dan mencegah widget agar tidak ditambahkan ke blog Anda. Blog Anda juga dapat bergantung pada mereka jika Anda belum menyesuaikan template.

Template Blogger memerlukan beberapa tag di <head> dan editor akan menolak untuk menerapkan template tanpa tag itu, yaitu bagian ini.

<b:include data='blog' name='all-head-content'/> <b:skin> <![CDATA[/* 
----------------------------------------------- Blogger Template Style Name: Some name Designer: Some author URL: Some URL ----------------------------------------------- */ ...A lot of CSS... 

]]> </b:skin> 
<b:template-skin> 
<b:variable default='960px' name='content.width' type='length'/> 
<b:variable default='0' name='main.column.left.width' type='length'/> 
<b:variable default='310px' name='main.column.right.width' type='length'/> 
<![CDATA[ ...A lot of CSS... ]]> </b:template-skin>


Sayangnya bukan hanya CSS sebaris yang menambahkan bobot yang tidak diinginkan ke templat, <b:include> menambahkan banyak elemen ke <head> seperti CSS default / widget, favicon, RSS, dan beberapa skrip. Karena browser memblokir file CSS eksternal yang tertunda sebelum dicat, ini dapat menambah banyak waktu untuk memuat halaman Anda.

Yah saya akhirnya menemukan sedikit retasan untuk mengatasi semua markup yang tidak diinginkan ini. Ini dia.
<style type=&quot;text/css&quot;>/*<style><b:include data='blog' name='all-head-content'/>*/</style> <b:skin><![CDATA[]]></b:skin> <b:template-skin/>


Pada dasarnya kami menghapus CSS dari <b:skin> dan <b:template-skin> dan kemudian menipu editor Blogger untuk memasukkan elemen <b:include> ke dalam komentar CSS. Ini sedikit lebih rumit dari yang seharusnya karena elemen <link> CSS tampaknya ditambahkan di atas elemen <style> pertama.

Jika Anda mengikuti metode ini, Anda masih ingin menyertakan (atau mengganti) beberapa tag yang biasanya dihasilkan oleh <b:include> , berikut adalah yang saya simpan / ganti:
<link href='http://www.growingwiththeweb.com/favicon.ico' rel='icon' type='image/x-icon'/> <link rel="alternate" type="application/atom+xml" title="Growing with the Web - Atom" href="http://www.growingwiththeweb.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Growing with the Web - RSS" href="http://www.growingwiththeweb.com/feeds/posts/default?alt=rss" />


Tag lain yang berguna untuk disimpan adalah <link rel="canonical"> yang memberi tahu mesin pencari apa URL otoritatif halaman tersebut, menghapus string permintaan yang tidak dibutuhkan dan sejenisnya. Kita bisa mendapatkan ini kembali dengan mengekstraksi dari komentar atau menulis milik kita sendiri. Berikut ini adalah skrip pendek yang saya tulis yang dapat ditempatkan di akhir blog Anda untuk menghasilkan tautan kanonik.
(function () { var url = document.location.pathname.replace(/\/\//g, '/'); if (url.indexOf('/search') == -1) url = document.location.origin + url else url = document.location.href; var canonical = document.createElement('link'); canonical.setAttribute('rel', 'canonical'); canonical.setAttribute('href', url); document.querySelector('head').appendChild(canonical); })();


Saya berhasil mencukur hampir satu detik dari waktu pemuatan laman (tidak tercetak) agar tidak menerapkan perubahan ini, terutama disebabkan oleh pemblokiran file CSS.