Cara menggunakan eksploitasi html5up

Question

Bagi mereka yang tidak terbiasa dengan cara kerja Jekyll, lihat https. //jekyllrb. com/ untuk semua detailnya, atau baca hanya dasar-dasar front matter, menulis posting, dan membuat halaman

GitLab. Cukup fork repositori ini dan mulailah mengedit file _config.yml
GitHub. Garpu repositori ini dan buat cabang bernama gh-pages, lalu mulailah mengedit file _config.yml

Masalah

Jika Anda ingin melaporkan bug, ajukan pertanyaan, minta fitur, jangan ragu untuk melakukannya di repositori GitLab dan saya akan dengan senang hati membantu

Atau, Anda dapat membuka masalah melalui email dengan mengirim email ke incoming+andrewbanchich/future-imperfect-jekyll-theme@incoming. gitlab. com

Saya membuat ini karena saya ingin menggunakannya di situs pribadi saya frankvalcarcel. com di mana Anda juga dapat melihat demo. Ingatlah bahwa saya telah membuat penyesuaian agar sesuai dengan selera saya, jadi jika Anda ingin melihatnya, silakan periksa cabangnya. frankvalcarcel.com

Repo lincah untuk proyek ini. bitbucket. org/frankv/twenty-pelican-html5up
Repo untuk situs saya. bitbucket. org/frankv/frankvalcarcel. com

Cabang ini berisi konversi dekat dari template asli. Saya akan menambahkan lebih banyak di sini karena saya membutuhkannya tetapi untuk saat ini, tidak disertakan

Tata letak
- sidebar kiri
- kontak
Gambar-gambar

Templat perincian

Saat ini ada 12 template

├── archives.html 			// archive pages (right-sidebar)
├── article.html 				// article pages (no-sidebar)
├── banner.html 				// hero unit on index
├── base.html 				// all templates extend base, base contains head, body, and nav
├── category.html 			// category pages (right-sidebar)
├── coolstuff.html 			// gallery section on index
├── cta.html 					// call to action near footer of index and archives
├── footer.html 				// copyright and social icons
├── index.html 				// one-to-one for index of original
├── most_recent.html 			// three column most recent articles template
├── page.html 				// all pages (no-sidebar)
└── pagination.html

Pratinjau

indeks. html (meluaskan base. html)

Peringatan

1. skala. js
html5up menggunakan skel. js untuk menangani daya tanggap templat mereka. Agar skel berfungsi dengan benar, css harus tersedia di jalur {{ SITEURL }}/css/. Saya tidak ingin mengubah file apa pun di template (bahkan file init. js). Jadi untuk memperbaikinya untuk pengembangan skrip fab saya menyalin css dan js dari folder statis dan menempatkannya ke lokasi yang sesuai di direktori keluaran saya. Ini skrip hebat saya yang saya sebut collectstatic

def collectstatic():
  if os.path.isdir(DEPLOY_PATH):
    local('mkdir -p {deploy_path}/css/ {deploy_path}/js/ {deploy_path}/fonts/ {deploy_path}/images/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/css/* {deploy_path}/css/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/js/* {deploy_path}/js/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/fonts/* {deploy_path}/fonts/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/images/* {deploy_path}/images/'.format(**env))

_

Saya baru saja menyebutnya dari skrip build dan rebuild saya dan saya baik-baik saja. Di server produksi saya, saya membiarkan server web menangani ini

2. kelas tubuh
Templat asli menggunakan kelas tubuh untuk menentukan tata letak. Ini sedikit rumit karena untuk saat ini saya ingin menggunakan dua tata letak yang berbeda. Untuk halaman arsip dan kategori saya menginginkan tata letak sidebar kanan, dan untuk yang lainnya, tanpa sidebar. Kelas indeks bersifat implisit

Jadi untuk melakukan ini saya harus menulis sedikit retasan. Menggunakan filter jinja khusus, saya menentukan jenis halaman dan kemudian mengembalikan kelas tubuh yang sesuai. Dalam kode terlihat seperti ini

<body class="{% if page_name %}{{ page_name|sidebar }}{% endif %} loading">

Ada sejumlah cara berbeda untuk menyertakan filter jinja yang ditentukan khusus dalam proyek pelican Anda. Berikut dokumentasi untuk itu
Dan inilah kode filternya

def sidebar(value):
  if value.startswith('archives') or value.startswith('category'):
    return 'right-sidebar'
  elif value == 'index':
    return 'index'
  else:
    return 'no-sidebar'

3. blog dan submenu
Saya ingin memiliki submenu kategori di bawah item menu blog permanen. Kode ini saat ini terletak di baris 54 di pangkalan. html. Cara kerjanya adalah untuk semua artikel saya di sub-folder kategori mereka sendiri, submenu dan halaman kategori berikutnya dibangun. Lihat pelicanconf saya. py file jika itu membantu
Beginilah cara saya menyusun direktori konten saya

├── blog						//standard articles
│   ├── article1.md
│   ├── article2.md
│   ├── article3.md
│   └── article4.md
├── pages
│   ├── about.md
│   └── portfolio.md
└── programming				//category
    └── article1.md

_

Melakukan

[ ] Kategori Portofolio
[ ]

def collectstatic():
  if os.path.isdir(DEPLOY_PATH):
    local('mkdir -p {deploy_path}/css/ {deploy_path}/js/ {deploy_path}/fonts/ {deploy_path}/images/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/css/* {deploy_path}/css/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/js/* {deploy_path}/js/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/fonts/* {deploy_path}/fonts/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/images/* {deploy_path}/images/'.format(**env))

_0 akan ditarik dari kategori portofolio
[ ] Menambahkan atribut

def collectstatic():
  if os.path.isdir(DEPLOY_PATH):
    local('mkdir -p {deploy_path}/css/ {deploy_path}/js/ {deploy_path}/fonts/ {deploy_path}/images/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/css/* {deploy_path}/css/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/js/* {deploy_path}/js/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/fonts/* {deploy_path}/fonts/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/images/* {deploy_path}/images/'.format(**env))

1 dan

def collectstatic():
  if os.path.isdir(DEPLOY_PATH):
    local('mkdir -p {deploy_path}/css/ {deploy_path}/js/ {deploy_path}/fonts/ {deploy_path}/images/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/css/* {deploy_path}/css/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/js/* {deploy_path}/js/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/fonts/* {deploy_path}/fonts/'.format(**env))
    local('cp -rf {theme_path}/twenty/static/images/* {deploy_path}/images/'.format(**env))

2 ke konten dan template

============================

Templat info

Dua puluh satu. 0 oleh HTML5 ATAS
html5up. bersih. @ n33co
Gratis untuk penggunaan pribadi dan komersial di bawah CCA 3. 0 lisensi (html5up. bersih/lisensi)

Ini adalah Dua Puluh, templat situs responsif multi-halaman minimal untuk HTML5 UP

Seperti namanya, ini adalah kedua puluh saya (. ) desain untuk HTML5 UP. Karena beberapa yang terakhir adalah urusan satu halaman, saya memutuskan untuk menggunakan sesuatu yang sedikit lebih konvensional dan memasukkan empat tata letak halaman tambahan. Di luar itu, itu latihan biasa. sepenuhnya responsif, dibangun di atas HTML5/CSS3/skel, dan berlisensi CCA seperti semua barang saya yang lain

Terima kasih khusus kepada Michael Domaradzki (mdomaradzki. deviantart. com) karena mengizinkan saya menggunakan fotonya yang luar biasa di demo Twenty*

(* Tidak disertakan dengan unduhan ini (diganti dengan gambar placeholder umum), karena saya hanya memiliki izin untuk menggunakan karyanya dalam demo di tempat saya sendiri. JANGAN mengunduh atau menggunakan karyanya tanpa izin tertulis sebelumnya. )

kode html