Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Dropbox

Menggunakan DropPages untuk Situs Super Mudah yang Statis

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by poipoi (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Anda mungkin tahu bahwa Dropbox adalah tempat yang sempurna untuk menyimpan data backup dan berbagi file, tetapi apakah anda tahu anda dapat menggunakannya sebagai statis situs web host juga?  Terima kasih untuk nifty aplikasi seperti DropPages, yang akan kita ulas di sini hari ini, anda dapat!

Proses balik DropPages adalah benar-benar cukup brilian. Anda cukup memberikan DropPages akses aplikasi ke akun Dropbox anda dan menciptakan sebuah "Saya.DropPages" folder yang anda akan meng-upload file website anda. Kemudian ketika orang-orang mengunjungi situs domain DropPages bertindak sebagai perantara antara browser dan akun Dropbox anda, mengambil file dari teman "Saya.DropPages" folder dan melayani mereka sebagai website yang berfungsi penuh.

Seperti Dropbox hadir dengan sebuah aplikasi yang sync file di komputer anda dengan penyimpanan online anda, anda hanya dapat mempertahankan situs anda secara lokal dan Dropbox memungkinkan untuk secara otomatis meng-upload file-file untuk anda. Ini berarti tidak ada khawatir tentang FTP, dan diberikan file anda baik offline maupun di Dropbox mereka pada dasarnya didukung oleh default.

Apa yang Akan Kita Lakukan

Pada tutorial ini saya akan menunjukkan kepada anda bagaimana untuk membuat klasik lima halaman situs statis dengan DropPages, menggunakan versi modifikasi dari "Cuda" template Grafis Burger.

Kami tidak akan fokus pada bagaimana dasar HTML dan CSS ditulis untuk template, tapi lebih pada bagaimana untuk menangani integrasi dengan DropPages. Semua template yang diperlukan kode yang akan dimasukkan dalam copy & paste siap format di bawah ini, atau anda dapat men-download file sumber melalui Download button Lampiran berikut di sidebar.

Mari kita mulai!

Link DropPages dengan Dropbox

Jika anda belum melakukannya, pergi ke Dropbox dan daftarkan, kemudian men-download dan menginstal aplikasi yang mereka sediakan untuk melakukan sinkronisasi file offline untuk penyimpanan online anda.

Kemudian kepala ke http://my.droppages.com/ dan sign in dengan akun DropBox anda rincian. Dengan melakukan ini, anda memberikan DropPages akses untuk men-setup sebuah folder di akun Dropbox anda yang akan rumah website anda. Setelah aplikasi Dropbox sync online file ke komputer anda, anda akan melihat struktur folder seperti ini di offline folder Dropbox:

Masing-masing situs yang anda buat melalui DropPages akan hidup di dalam folder ini. Sekarang anda siap untuk pergi ke depan dan membuat situs baru.

Membuat Situs Baru

Setelah pemberian akses ke akun Dropbox anda secara otomatis harus diarahkan untuk anda DropPages dashboard. Jika tidak, anda dapat mengaksesnya di http://my.droppages.com/account

Untuk membuat situs baru klik tombol biru besar "Buat situs baru" tombol:

Anda kemudian akan dibawa ke halaman di mana anda dapat menentukan domain yang ingin anda gunakan untuk situs anda. Anda dapat menggunakan subdomain yang belum diambil oleh yang lain DropPages pengguna, tetapi anda perlu memastikan bahwa anda menyertakan "droppages.com" bagian dari domain ketika anda memasukkan pilihan anda, seperti:

Setelah memasukkan domain anda, klik tombol "Buat" dan DropPages akan mengatur struktur folder untuk situs baru anda di dalam anda "Saya.DropPages" folder. Ketika disinkronkan dengan anda secara offline folder Dropbox ini akan terlihat seperti ini:

Apa yang ada dalam Struktur Folder?

Tujuan dari tiga folder yang anda lihat adalah:

  • Isi: Memegang .file txt yang ditulis dalam penurunan harga dan / atau HTML untuk form isi dari halaman situs anda.
  • Public: dapat diakses oleh publik situs file seperti stylesheet, gambar, Pdf, dll  Untuk daftar lengkap dari jenis file yang diperbolehkan dalam "Umum" folder lihatlah Dropbox dokumentasi.
  • Template: Menampung file-file HTML dari situs anda template, di mana konten akan diberikan.

Ketika situs anda pertama kali dibuat itu termasuk placeholder file di setiap folder ini:

  1. indeks.txt di "Isi" folder
  2. utama.css di "Umum" folder
  3. dasar.html di "Template" folder

Ketika anda mengunjungi anda yang baru dibuat DropPages domain tiga file yang akan memberikan anda ini:

Hal pertama yang kita akan lakukan adalah menambahkan beberapa tema kustom styling di sekitar konten dasar ini, menggantikan kode dalam yang sudah ada "main.css" dan "base.html" file.

Catatan untuk Mengedit File DropPages

Setiap kali saya merujuk ke situs editing file sepanjang tutorial ini akan berarti menggunakan pilihan editor kode langsung pada file di Dropbox offline > Apps > Saya.DropPages > mysubdomain.droppages.com folder.

Setelah anda menyimpan perubahan ke file yang anda mengedit memungkinkan sedikit waktu untuk aplikasi Dropbox untuk meng-upload file ke account anda, kemudian refresh anda DropPages situs untuk melihat modifikasi anda pergi hidup.

Menambahkan Tema Kustom Styling

Seperti yang saya sebutkan sebelumnya, kita tidak akan berbicara tentang proses sebenarnya di balik menciptakan dasar CSS dan HTML template ini desain, sehingga kita dapat berfokus pada penanganan DropPages integrasi. Dengan mengatakan bahwa, di sini adalah stylesheet saya siapkan sebelumnya.

Menambahkan Custom CSS

Copy semua kode di bawah ini dan paste ke dalam "utama.css" file dalam folder "Publik" situs Anda (mempersiapkan diri - ini adalah cukup sepotong..)

Umum > utama.css

CSS ini akan menangani semua hal-hal penting dari tata letak, tipografi, skema warna dan responsif.

Sekarang kita hanya perlu menarik yang stylesheet ke template utama, serta menambahkan beberapa tambahan seperti header dan footer.

Tambahkan Kustom HTML

Copy semua kode di bawah ini dan paste ke dalam "base.html" file di situs anda "Template" folder.

Template > base.html

Kode HTML ini melakukan beberapa hal. Hal menarik dalam "utama.css" stylesheet anda hanya diedit serta webfont dari Google. Ini menciptakan sebuah header statis yang menunjukkan site title dan tagline, dan footer dengan beberapa link ke berbagai jejaring sosial dan situs portofolio. Hal ini juga menciptakan ruang untuk primer menu navigasi untuk hidup, serta ruang untuk konten untuk muncul.

Integrasi dengan DropPages terjadi melalui dua sangat sederhana template tag:

  • {{PrimaryNavigation}} - Ini membuat unordered daftar dari semua halaman di situs anda, termasuk halaman rumah.
  • {{Tubuh}} - output isi dari file yang akan anda tambahkan ke "Content" folder.

Perhatikan penempatan dua template tag pada HTML di atas, dengan {{PrimaryNavigation}} tag ditempatkan di dalam nav elemen, dan {{Tubuh}} tag ditempatkan di dalam elemen utama.

Di refresh situs anda sekarang harus terlihat seperti ini:

Perhatikan cara yang sama "Hello world" konten anda melihat pada default baru situs ini masih di tempat, tetapi dikelilingi oleh styling kami hanya ditambahkan melalui menu "utama.css" dan "base.html" file.

Sekarang mari kita pergi ke depan dan menambahkan beberapa dari kita sendiri kustom homepage konten.

Menambahkan Konten Homepage

Sebagai bagian dari homepage kustom konten yang kami akan termasuk empat gambar. Anda bisa mendapatkan anda sendiri salinan dari gambar-gambar ini dari sumber file yang dilampirkan pada tutorial ini. Setelah men-download dan mengekstrak utama EasyDropPagesStaticSite.zip file anda akan melihat kedua file zip bernama ... homepage_images.zip. Extract file ini dan menempatkan gambar-gambar itu berisi ke situs anda "Umum" folder.

Kemudian copy semua kode di bawah ini dan paste ke dalam "index.txt" file di situs anda adalah "Konten" folder.

Konten > index.txt

Baris pertama dari file ini adalah yang paling signifikan sejauh DropPages integrasi pergi. Ini menentukan template yang anda ingin konten anda akan diberikan ke.

Dalam hal ini kami ingin konten ini akan diberikan ke "base.html" template, jadi baris pertama dari file harus: :dasar Anda dapat menentukan bahwa isi berkas yang harus diberikan ke setiap file template, sebuah fitur yang akan kita gunakan nanti.

Penurunan harga atau HTML?

DropPages isi file dapat membuat baik Penurunan harga atau HTML. Jika anda tertarik untuk belajar lebih banyak tentang Markdown syntax, check out Markdown: Seluk-Beluk.

Catatan: salah satu "gotcha" yang harus diperhatikan adalah bahwa jika anda membungkus garis Penurunan harga dalam HTML itu tidak akan diberikan oleh DropPages. Lain adalah bahwa jika anda menggunakan Markdown untuk teks, tidak tersedia sintaks untuk pusat itu 

Sebagai contoh, dalam kode di atas ada empat gambar yang ditempatkan, masing-masing dibungkus dalam sebuah div dengan styling yang akan membuat mereka situs berdampingan dalam kolom. Untuk menambahkan sebuah gambar melalui Penurunan harga yang akan anda gunakan sintaks ![Alt text](/path/to/img.jpg). Namun saya menemukan bahwa ketika gambar Markdown itu dibungkus dalam div aku digunakan di atas mereka tidak membuat, outputing sebenarnya Penurunan harga kode ke halaman sebaliknya.

Jadi, mengingat kami ingin homepage kami untuk memiliki gambar yang dibungkus dalam divs, dan kami ingin yang berpusat pada teks, semua konten ditambahkan ke "index.txt" file yang ditulis dalam HTML.

Refresh situs anda dan sekarang harus terlihat seperti ini:

Kami sekarang memiliki beberapa situs kustom konten di tempat, jadi sekarang saatnya untuk menambahkan beberapa tambahan sub halaman. Mari kita mulai dengan di mana-mana "Tentang" halaman.

Tambahkan "Tentang" Halaman Sub

Untuk menambahkan halaman tambahan untuk anda DropPages situs, semua harus anda lakukan adalah membuat yang baru .file txt di "Isi" folder. Link ke mereka maka akan secara otomatis muncul dalam "Primary Navigation" menu.

Nama yang muncul dalam menu anda akan diambil langsung dari nama file konten, yaitu Halaman Saya Name.txt. Selain itu, anda dapat mengontrol urutan menu link dengan mengawali setiap konten file dengan jumlah yang diikuti oleh sebuah titik.

Kami ingin kedua link pada menu kami yang akan kami "Tentang" halaman, jadi di "Isi" folder buat file teks baru dan beri nama: 2.Tentang Kami Studio.txt

Tambahkan kode berikut ke file baru:

Kali ini kita tidak perlu div pembungkus atau berpusat pada teks, sehingga kode ini ditulis seluruhnya di Markdown syntax.

Refresh situs dan anda akan melihat baru ditambahkan "Tentang Studio Kami" link pada navigasi utama menu. Klik link tersebut dan anda akan dibawa ke halaman baru, yang harus terlihat seperti ini:

Menambahkan halaman untuk anda DropPages situs adalah sebagai sederhana seperti itu. Hanya membuat file teks baru, nama itu sesuai dengan apa yang anda inginkan untuk muncul di menu anda, mengisinya dengan konten anda dan anda sudah selesai.

Membuat Halaman Dengan Sub Halama 

DropPages juga memberikan anda kemampuan untuk membuat tingkat kedua sub halaman. Misalnya, anda mungkin ingin untuk membuat sebuah halaman bernama "Bertemu Tim" yang memiliki link ke sub halaman untuk masing-masing anggota tim. Di bagian ini saya akan menunjukkan kepada anda bagaimana.

Menciptakan Tambahan Cascading Template

Untuk kami "Bertemu Tim" halaman kami ingin menunjukkan link ke sub halaman untuk masing-masing anggota tim kami, namun kami template dasar tidak termasuk area untuk menampilkan link tersebut. Seperti kita akan membuat template kustom untuk menangani ini persyaratan tambahan.

DropPages template memiliki kemampuan untuk cascade, yang berarti satu template yang dapat memuat dirinya ke {{Tubuh}} tag dari template lain.

Dalam kasus kami, kami ingin menambahkan sebuah area dengan link untuk subpages kami, tapi kami masih ingin menggunakan HTML "base.html" template   Untuk membuat hal ini terjadi, membuat file baru di "Template" folder dan nama itu "withsubpages.html". Kemudian copy dan paste kode di bawah ini:

Template > withsubpages.html

Seperti yang anda lihat sebelumnya dalam kami "index.txt" file konten, template ini juga menggunakan :dasar notasi pada baris pertama. Hal ini memungkinkan sistem yang tahu bahwa HTML dari template ini harus dimuat ke dalam {{Tubuh}} tag "base.html" template.

Konten halaman yang sebenarnya akan dimuat ke dalam {{Tubuh}} tag "withsubpages.html" template.

Dalam kasus yang membingungkan, proses loading dapat diringkas sebagai: base.html > {{Tubuh}} > withsubpages.html > {{Tubuh}} > halaman konten.

Kami baru "withsubpages.html" file kami telah menambahkan pembungkus div seluruh konten halaman, dan menambahkan sebuah kotak yang akan melayang ke kanan yang berisi template tag: {{SecondaryNavigation}}. Template ini tag menciptakan sebuah unordered list dari setiap saudara atau anak halaman.

Selanjutnya, mari kita lihat bagaimana anda benar-benar membuat sub halaman yang link akan muncul di "Sekunder Navigasi" kotak.

Membuat Halaman Setup untuk Memiliki Sub Halama

Setiap kali anda ingin halaman untuk memiliki sub halaman, bukan menciptakan .file txt di "Isi" folder, anda membuat sebuah direktori. Direktori yang akan menahan tingkat atas halaman serta anak-anak.

Anda menggunakan penamaan yang sama untuk direktori seperti yang anda lakukan untuk .txt file, yaitu dimulai dengan nomor untuk menunjukkan posisi utama navigasi link, maka penggunaan nama apa pun yang anda ingin muncul pada menu.

Membuat folder di "Isi" direktori dan nama itu "3.Bertemu Tim".

Di dalam folder itu buat sebuah file bernama "index.txt". Kode yang anda tambahkan ke file ini akan membentuk level atas anda "Bertemu Tim" halaman konten.

Copy dan paste kode di bawah ini:

Konten > 3.Bertemu Tim > index.txt

Catatan: Pada baris pertama dari kode ini kita tidak lagi menambahkan :dasar. Sebaliknya, kita tambahkan :withsubpages seperti ini menunjukkan bahwa kita ingin halaman konten yang akan dimuat ke dalam "withsubpages.html" template.

Tambahkan Sub Halaman

Dengan utama anda "Bertemu Tim" konten di tempat yang dalam "index.txt" file sekarang anda siap untuk menambahkan sub halaman. Proses penambahan file-file di dalam folder ini adalah sama seperti anda diikuti untuk menambah "Tentang" halaman dalam folder tingkat atas. Hanya membuat yang baru .file txt, dengan jumlah pemesanan, dan nama untuk mengontrol link teks di sekunder kotak navigasi.

Buat sebuah file bernama "1.Ross dan Monica.txt" dan menambahkan konten dalam:

Konten > 3.Bertemu Tim > 1.Ross dan Monica.txt

Sekali lagi, kita gunakan :withsubpages notasi untuk memiliki halaman ini memuat ke "withsubpages.html" template.

Membuat kedua file yang bernama "2.Junior dan Sales.txt" dengan konten ini dalam:

Konten > 3.Bertemu Tim > 2.Junior dan Sales.txt

Refresh situs anda dan anda harus melihat baru "Bertemu Tim" link pada navbar. Klik itu dan anda halaman baru akan muncul dengan sebuah link untuk masing-masing sub halaman di sekunder kotak navigasi di sisi kanan. Masing-masing sub-halaman anda juga harus memiliki tata letak yang sama, seperti ini:

Dua Halaman Lebih

Secara umum, dengan situs statis, lima tampaknya menjadi sihir jumlah halaman untuk memiliki (aku tidak tahu kenapa). Jadi mari kita pergi ke depan dan menambahkan dua lebih banyak halaman untuk situs anda untuk melengkapi jumlah itu.

Di "Isi" folder buat sebuah file bernama "4.Penurunan Harga Examples.txt" dan tambahkan kode berikut:

Kadar > 4.Penurunan Harga Examples.txt

Isi dari file ini memberi Anda beberapa contoh bekerja hal-hal yang dapat Anda lakukan dengan penurunan harga, seperti menciptakan daftar, huruf tebal, italicizing, menampilkan kode, menambahkan gambar, menambahkan link, menambahkan judul dan sebagainya.

Lagi-lagi, di "Isi" folder buat file lain dan kali ini nama itu "5.Hubungi Us.txt".

Kadar > 5.Hubungi Us.txt

Kode di halaman ini memberikan anda sebuah contoh bagaimana anda bisa menempatkan Google Map pada halaman kontak  Untuk yang lebih canggih halaman kontak anda juga mungkin ingin melihat ke dalam menggunakan penyedia layanan yang memberikan anda sebuah embeddable form kontak, mengingat bahwa DropPages mendukung sumber daya statis saja.

Akhir anda situs, dengan semua lima halaman di tempat, sekarang harus terlihat seperti ini;

Berurusan dengan Kesalahan 404 dan Konten yang di-Cache

DropPages adalah sangat dingin sistem, namun pada saat ini tampaknya memiliki kecenderungan untuk terus ke file cache seperti tupai dengan seteguk chestnut hari sebelum musim dingin.

Anda mungkin menemukan bahwa jika anda membuat perubahan dalam file konten mereka tidak muncul, atau jika anda mengubah nama halaman anda mendapatkan 404 error ketika mencoba untuk mengunjunginya. Ada "Publish now" tombol di my.droppages.com dashboard, namun dalam tes saya itu tampaknya tidak membantu.

Salah satu cara untuk mendorong melalui perubahan-perubahan yang tak muncul adalah untuk menambahkan file ke "Isi" folder, bernama sesuatu yang random misalnya flushme.txt. Sistem akan mendeteksi file baru dan kemudian memperbarui seluruh situs dalam proses, setelah itu saya bisa menghapus file lagi.

Namun hal ini tidak selalu bekerja dengan 404 kesalahan. Dalam beberapa kasus, saya menemukan satu-satunya cara untuk menyingkirkan kesalahan 404 adalah untuk pergi dengan benar-benar nama baru untuk halaman file/folder, misalnya dari 2.Tentang Us.txt 2. Tentang Kami Studio.txt, dan kemudian tambahkan lagi "flushme.txt" file untuk memaksa sistem untuk memperbarui dan menemukan nama diperbarui dalam proses.

Ekstra

Ada beberapa fitur tambahan yang dapat mengambil keuntungan dari di DropPages sistem yang tidak kami bahas di atas, jadi mari kita cepat melihat mereka sekarang.

Sitemap

Meskipun itu tidak mungkin akan diperlukan pada sebuah situs kecil, jika situs anda tumbuh dan anda ingin memiliki sitemap anda dapat membuat template kustom dan termasuk di dalamnya tag {{Navigasi}}. Tag ini menghasilkan sebuah unordered list dari semua halaman di situs anda. Membuat halaman menggunakan template kustom anda dengan hanya "Sitemap" menuju sebagai konten dan hey presto, anda memiliki sitemap.

Tersembunyi Halaman

Jika anda memiliki halaman yang anda tidak ingin link untuk muncul di navigasi, tambahkan nama dengan garis bawah. Misalnya, sitemap konten file yang mungkin akan bernama "_sitemap.txt" 

Kesalahan Kustom Template

Serta membuat template kustom khusus untuk menampilkan konten, anda juga memiliki pilihan untuk membuat template yang mengontrol apa yang pengunjung akan melihat jika mereka menemukan kesalahan atau jika halaman tidak ditemukan. Cukup membuat template file bernama "Error.html" dan "PageNotFound.html" dan termasuk di dalamnya apa pun yang anda inginkan. Anda dapat melihat contoh-contoh ini file template di "Dasar" tema yang tersedia untuk di-download dari: http://droppages.com/themes

Remah roti

Jika anda ingin menyertakan sebuah breadcrumb trail di setiap template, tambahkan tag {{Roti}}. Ini akan menghasilkan nenek moyang dari halaman saat ini unordered list.

Tag Kustom/Bagian

Serta memiliki konten anda membuat di mana {{Tubuh}} tag ditempatkan di template anda, anda juga dapat menambahkan tag kustom dan memiliki bagian dari konten anda membuat ke mereka.

Misalnya, selain rutin {{Tubuh}} tag anda bisa menambahkan tag khusus untuk template, seperti {{Mycustomtag}}.

Kemudian ketika membuat konten anda, file anda akan mencakup notasi @Tubuh pada baris atas konten yang anda inginkan untuk output melalui {{Tubuh}} tag, dan @Mycustomtag di atas konten untuk menunjukkan di mana {{Mycustomtag}} tag, misalnya

Membungkus

DropPages benar-benar cukup pintar bagian dari pekerjaan, terutama jika anda mempertimbangkan hal ini dibuat sebagai proyek sampingan oleh satu orang, Dave McDermid.

Gratis, anda memiliki batas pemakaian hingga 50MB. Untuk menempatkan bahwa dalam perspektif contoh kita hanya menjalankan melalui hanya digunakan 22Kb. Namun jika anda ingin meningkatkan batas pemakaian 1GB serta mengaktifkan domain kustom anda dapat meng-upgrade ke versi berbayar dengan dua minggu pertama gratis, maka £5.00 USD per bulan setelahnya.

Link Yang Berguna

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.