Ini memaparkan logo blog.

<span><span><span><a</span> title<span>="{{@blog.title}}"</span> href<span>='{{@blog.url}}'</span>></span>{{{@blog.title}}}</span>

memaparkan tajuk blog sebagai pautan.

<span><span><span><h2</span> class<span>="h-description-style"</span>></span>{{@blog.description}}<span><span></h2</span>></span></span>

memaparkan penerangan blog.

footer.hbs

<span><span><span><div</span> class<span>="foot-box"</span>></span>
</span>    <span><span><span><div</span> class<span>="f-social"</span>></span>
</span>    <span><span><span><a</span> href<span>="http://www.facebook.com/sharer.php?u={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/facebook.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span><a</span> href<span>="https://plus.google.com/share?url={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/google_plus.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span><a</span> href<span>="http://twitter.com/share?text={{@blog.title}}&url={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/twitter.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="f-cp"</span>></span>
</span>    <span><span><span><p</span>></span>? {{date format='YYYY'}} <span><span><a</span> href<span>="{{@blog.url}}"</span>></span>{{@blog.title}}<span><span></a</span>></span><span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="f-ghst"</span>></span>
</span>    <span><span><span><p</span>></span>Runs on  <span><span><a</span> href<span>="http://ghost.org"</span> target<span>="_blank"</span>></span>Ghost<span><span></a</span>></span><span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Juga terdapat dalam direktori partial, fail ini dimuatkan dari {{> footer}} tag dalam default.hbs. Tiada tag hendal yang belum anda lihat, footer ini mengandungi ikon media sosial untuk perkongsian.

Menggayakan tema

Seperti yang saya nyatakan, Hantu sangat Barebones. Saya pada asalnya akan menggunakan bootstrap ke halaman gaya tetapi saya memutuskan untuk menggunakan sistem grid kecil yang saya bina dengan SASS.

<span><span>@media screen and (max-width: 600px)</span> {
</span>    <span><span>.mbox .list-post .i-pic</span> {
</span>        <span>position: relative;
</span>        <span>min-height: 1px;
</span>        <span>padding-left: 0px;
</span>        <span>padding-right: 0px;
</span>        <span>float: left;
</span>        <span>width: 100%;
</span>        <span>background-color: #f2e7e7;
</span>        <span>border-bottom: 3px solid #090a0a;
</span>    <span>}
</span>    <span><span>.mbox .list-post .i-pic img</span> {
</span>        <span>width: 100%;
</span>        <span>height: 100%;
</span>    <span>}
</span><span>}
</span>
<span><span>@media screen and (min-width: 601px)</span> {
</span>    <span><span>.mbox .list-post .i-pic</span> {
</span>        <span>position: relative;
</span>        <span>min-height: 1px;
</span>        <span>padding-left: 0px;
</span>        <span>padding-right: 0px;
</span>        <span>float: left;
</span>        <span>width: 33.33333%;
</span>        <span>left: 33.33333%;
</span>        <span>background-color: #f2e7e7;
</span>        <span>border-bottom: 3px solid #090a0a;
</span>     <span>}
</span><span>}</span>

Dalam coretan kecil ini dari fail .css saya, saya hanya memasukkan dua titik putus untuk artikel ini, tetapi dalam aplikasi dunia sebenar kita akan memasukkan banyak lagi. Seperti yang anda lihat, semua skala lajur hingga 100% apabila skrin mengecut hingga 600 piksel.

Kesimpulan

Saya hanya menggaru permukaan apa yang boleh dilakukan dengan hantu. Jika anda ingin memulakan blog dan mempunyai sumber, saya akan mencadangkan anda memberi Hantu. Ingatlah ia dibina untuk penulis oleh penulis!

soalan yang sering ditanya mengenai tema blog hantu

Apakah tema blog hantu?

Tema blog hantu adalah template pra-direka yang anda boleh memohon kepada blog hantu anda untuk memberikan rupa dan rasa yang unik. Tema -tema ini dibina menggunakan handlebars.js, bahasa templat mudah, dan mereka boleh disesuaikan untuk memenuhi keperluan khusus anda. Mereka datang dengan pelbagai ciri dan susun atur, seperti reka bentuk responsif, pengoptimuman SEO, dan pilihan perkongsian sosial, antara lain. adalah proses yang mudah. Pertama, anda perlu memuat turun fail tema, yang biasanya dalam format .zip. Kemudian, log masuk ke panel Admin Hantu anda, navigasi ke bahagian 'Reka Bentuk', dan klik pada butang 'Muat naik tema'. Pilih fail .zip yang dimuat turun dan klik 'muat naik'. Sebaik sahaja muat naik selesai, anda boleh mengaktifkan tema dengan mengklik butang 'Aktifkan Sekarang'. Tema Blog. Laman web Hantu Rasmi mempunyai pasaran di mana anda dapat mencari tema percuma dan premium. Sumber -sumber popular yang lain termasuk WorldOrest, sebuah pasaran digital yang menawarkan pelbagai tema hantu, dan pelbagai pemaju bebas yang menjual tema mereka di laman web mereka sendiri.

Kebanyakan tema blog hantu direka untuk menjadi responsif, bermakna mereka secara automatik menyesuaikan susun atur mereka agar sesuai dengan saiz skrin yang berbeza. Ini memastikan bahawa blog anda kelihatan hebat pada semua peranti, termasuk komputer desktop, komputer riba, tablet, dan telefon pintar. Walau bagaimanapun, ia adalah idea yang baik untuk menyemak keterangan atau demo tema untuk memastikan ia responsif sebelum anda membeli atau memuat turunnya.

Bagaimana saya mengemas kini tema blog hantu saya? Tema blog adalah serupa dengan memasang yang baru. Pertama, anda perlu memuat turun fail tema yang dikemas kini. Kemudian, pergi ke panel pentadbir hantu anda, navigasi ke bahagian 'reka bentuk', dan klik pada butang 'Muat naik tema'. Pilih fail .zip yang dikemas kini dan klik 'muat naik'. Sebaik sahaja muat naik selesai, anda boleh mengaktifkan tema yang dikemas kini.

Apa yang harus saya cari dalam tema blog hantu? , pilihan penyesuaian, dan pengoptimuman SEO. Tema ini sepadan dengan gaya dan nada blog anda, mudah untuk menavigasi, dan kelihatan baik pada semua peranti. Ia juga harus mudah disesuaikan dan dioptimumkan untuk enjin carian untuk membantu blog anda berpangkat lebih tinggi dalam hasil carian.

Bolehkah saya menggunakan tema blog hantu pada pelbagai blog? Tema blog hantu di pelbagai blog. Walau bagaimanapun, perlu diingat bahawa setiap blog akan memerlukan pemasangan hantu sendiri. Juga, jika anda membeli tema premium, pastikan untuk menyemak perjanjian lesen, kerana beberapa pemaju tema mungkin mengehadkan bilangan tapak di mana anda boleh menggunakan tema mereka. Tema Blog Hantu?

Walaupun anda tidak perlu tahu cara kod untuk menggunakan tema blog hantu, mempunyai pengetahuan tentang html, css, dan handlebars.js boleh membantu, terutama jika anda mahu Sesuaikan tema. Walau bagaimanapun, banyak tema datang dengan dokumentasi dan sokongan yang luas untuk membantu anda menubuhkan dan menyesuaikan blog anda, walaupun anda bukan pengkod. , terdapat banyak tema blog hantu percuma yang ada. Laman web Hantu Rasmi menawarkan pilihan tema percuma, dan terdapat juga banyak pemaju bebas yang menawarkan tema percuma. Walau bagaimanapun, perlu diingat bahawa tema percuma mungkin tidak datang dengan tahap sokongan atau pilihan penyesuaian yang sama sebagai tema premium.

Atas ialah kandungan terperinci Anatomi tema blog hantu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!