GithubHelp home page GithubHelp logo

htmlerb_test's Introduction

#KumaKobo 製作要點紀錄 這次試著使用 Github pages 來當作網站空間,製作個人作品存放區,故此紀錄一下開發的一些經過。由於是一邊看教學一邊實作,所以若有問題還請多包涵。

網站傳送門:KumaKobo

樣板語言 ERB 實作

在實作上為了減少同樣語法要一直不斷複製貼上的囧境,在加上個人開發環境是使用Fire.app,所以使用 ERB( Embedded Ruby ) 樣板語言來加速製作,因此附檔名為 *.erb

###index部分 大部分的網站,在網頁中都會有重複性較高的地方,譬如說<header><banner><nav>footer等...,為了減少一直複製貼上以及提高修改的效率,所以需要把整個網站框架獨立出來,之後我們只要針對每個page獨立的內容部份去製作,剩下的就可以套用共同框架,節省更多的開發時間。

首先建立 page 共同面板,因為在 Fire.app 中,不需要編譯出來的檔案都會前面加上一個 _ 符號,而這個框架本身是為了讓其他 pages 做套用主要框架,所以我們把它命名為 _layout.html.erb ,並開始在裡面建立網頁需要的所有共同元素。

##內容參考: Fire.app官方網站

htmlerb_test's People

Contributors

kumaheika avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.