CS代写 Static Site Generation

程序代写 CS代考 / javascript, Java代写代考, jquery

Static Site Generation
Computer Science and Engineering  College of Engineering  The Ohio State University

What is Static Site Generation?

Copyright By PowCoder代写 加微信 powcoder

Computer Science and Engineering  The Ohio State University
Use a program to produce HTML pages
Analogous to compiling programs Translation: source code -> machine code
Development cycle:
Write source Compile Test/inspect result
Examples of translators
Jekyll (used for “GitHub Pages”) Middleman
Lots more, see: staticsitegenerators.net

Computer Science and Engineering  The Ohio State University
source generated files web site

Middleman: A Ruby Gem
Computer Science and Engineering  The Ohio State University
Project is a directory (eg myproj)
$ middleman init myproj
Configuration files, README, Gemfile, etc Create source files in myproj/source
Subdirectories for CSS, images, etc Compile all the source files
$ bundle exec middleman build
Result is placed in myproj/build
Copy site to some visible location
$ rsync -avz –del myproj/build ~/WWW
Or preview locally (live reload, no build)
$ bundle exec middleman server

Why Bother?
1. Code reuse and single-point-of-control over change
2. Authoring of content in a language that is more human-friendly
3. Parameterized generation of markup and content
Let’s look at each of these benefits in turn…
Computer Science and Engineering  The Ohio State University

Motivation #1: Visual Identity
Computer Science and Engineering  The Ohio State University

Motivation #1: Visual Identity
Computer Science and Engineering  The Ohio State University
Common headers & footers
Example: OSU web sites share nav bar Example: course web site
Duplication of code is evil
Corollary: cut-and-paste is evil Destroys single-point-of-control over change
Put common HTML in one file (a “partial”) Every document includes that file

ERb: Embedded Ruby
Computer Science and Engineering  The Ohio State University
General templating mechanism
“Template” = a string (usually contents of some file)
Contains (escaped) bits of ruby
<% code %> execute ruby code (“scriplet”)
<%= expr %> replace with result of ruby expr
<%# text %> ignore (a comment) Example: a text file
This is some text.
<% 5.times do %>
Current Time is <%= Time.now %>!
Process using erb tool to generate result
$ erb example.txt.erb > example.txt
Naming convention: filename.outputlang.erb Example index.html.erb
Many alternatives, eg HAML

Generation of Site
Source files in myproj/source
$ ls source
index.html.erb syll.html.erb meet.html.erb
$ bundle exec middleman build
Result after building
$ ls build
index.html meet.html syll.html
Computer Science and Engineering  The Ohio State University

A document fragment included in other documents
Include in template with partial function
<%= partial "navigation" %>
<%= partial "footer" %>
Partial’s filename begins with ‘_’ ie _navigation.erb

Note: ‘_’ omitted in argument to function
Computer Science and Engineering  The Ohio State University

Generation of Site with Partials
Computer Science and Engineering  The Ohio State University
Source files in myproj/source
$ ls source
_footer.erb meet.html.erb _navigation.erb syll.html.erb index.html.erb
$ bundle exec middleman build
Result after building
$ ls build
index.html meet.html syll.html

Site Generation With Partials
Computer Science and Engineering  The Ohio State University
index.html.erb
index.html
_navigation.erb
meet.html.erb
_footer.erb
syll.html.erb

Tricks with Partials
Computer Science and Engineering  The Ohio State University
Content of partial can be customized
with arguments in call
In call: pass a hash called :locals
<%= partial "banner", locals: { name: "Syllabus", amount: 34 } %>
In partial: access hash with variables

<%= name %>

Costs <%= "$#{amount}.00" %>

How to guarantee every page includes partial(s)
Partials don’t ensure one page structure across the site
Every page should look like:


Meetings
<%= partial "navigation" %>
… <%= partial "footer" %>
Computer Science and Engineering  The Ohio State University

Solution: Layouts
HTML formed from: Layout + Template
Layout is the common structure of HTML pages
Layout uses yield to include (page-specific) template File: layout.erb

… etc<br /> <%= partial "navigation" %><br /> <%= yield =><br /> <%= partial "footer" %><br /> Computer Science and Engineering  The Ohio State University<br /> Layout is where you put site-wide styling<br /> e.g., navigation bar, div’s with CSS classes, footers</p> <p> Site Generation With Layouts<br /> Computer Science and Engineering  The Ohio State University<br /> layout.erb<br /> index.html.erb<br /> meet.html.erb<br /> syll.html.erb<br /> index.html<br /> _navigation.erb<br /> _footer.erb</p> <p> Generation of Site with Layouts<br /> Computer Science and Engineering  The Ohio State University<br /> Default layout in<br /> source/layouts/layouts.erb $ ls –F source<br /> index.html.erb meet.html.erb layouts/ syll.html.erb<br /> $ ls source/layouts<br /> _footer.erb _navigation.erb layout.erb<br /> Result after building<br /> $ ls build<br /> index.html meet.html syll.html</p> <p> Page-Specific Data in Layout<br /> Computer Science and Engineering  The Ohio State University<br /> Some layout content is page-specific Example: <title> in document’s head<br /> Solution: Ruby variable current_page Example: current_page.path<br /> Template contains “frontmatter” that<br /> sets the value of current_page.data<br /> In template (contact.html.erb) —<br /> title: “Contact Information”<br /> In layout (layout.erb)<br /> <title> <%= current_page.data.title %>

Example: Navbar Highlights
Computer Science and Engineering  The Ohio State University

Why Bother?
1. Code reuse and single-point-of-control over change
2. Authoring of content in a language that is more human-friendly
3. Parameterized generation of markup and content
Let’s look at each of these benefits in turn…
Computer Science and Engineering  The Ohio State University

Motivation #2: Improved Syntax
Computer Science and Engineering  The Ohio State University
     
HTML tags make content hard to read

,

, , etc vs plain text, which is easier to read
Common plain text conventions:
Blank lines between paragraphs Underline titles with –’s or =’s Emphasize *words*, _words_, **words** Links as [text](url)
Unordered lists with bullets using * or – Numbered lists with 1., 2., 3.

Computer Science and Engineering  The Ohio State University

Why Middleman?

Computer Science and Engineering  The Ohio State University

The last few years have seen an explosion in the amount and
variety of tools developers can use to build web applications.
Ruby on Rails selects a handful of these tools:

  • Sass for DRY
    stylesheets
  • CoffeeScript for safer
    and less verbose javascript
  • Multiple asset management solutions, including Sprockets
    • ERb & Haml for dynamic pages and
    simplified HTML syntax

    Middleman gives the stand-alone developer…

    Formalizes these ASCII conventions Filename extension: .md
    Adds some less familiar ones (eg `) Translator generates HTML from markdown
    Examples: GitHub readme’s, user-posted comments on web boards (StackOverflow)
    Other target languages possible too
    See Middleman’s README.md Regular view
    Warning: many Markdown dialects
    daringfireball.net (original, 2004, stale) GitHub-flavored markdown (GFM), Markdown Extra kramdown, rdiscount, redcarpet, …
    Computer Science and Engineering  The Ohio State University

    CSS: Magic Numbers
    Computer Science and Engineering  The Ohio State University
    Literals are common in CSS
    h1 { background-color: #ff14a6; }
    h2 { color: #ff14a6; }
    Result: Lack of single-point-of-control
    Solution: SASS allows variables
    $primary: #ff14a6;
    h1 { background-color: $primary; } h2 { color: $primary; }
    Translator generates CSS from SASS

    CSS: Repeated Ancestors
    Computer Science and Engineering  The Ohio State University
    CSS requires separate rules for
    different elements with same ancestor
    .navbar ul { … }
    .navbar li { … }
    Changing classname requires changing
    all these rules
    Solution: SASS allows nested selectors
    ul { … }
    li { … }

    Why Bother?
    1. Code reuse and single-point-of-control over change
    2. Authoring of content in a language that is more human-friendly
    3. Parameterized generation of markup and content
    Let’s look at each of these benefits in turn…
    Computer Science and Engineering  The Ohio State University

    Motive #3: Content Generation
    Computer Science and Engineering  The Ohio State University
    Problem: Parameterized/repeated content Example: Course offering term
    Solution: Read content from data
    Files in subdirectory data/ define variables
    # data/dates.yml term: “Spring 2017”
    Variables then available in templates
    <%= data.dates.term %>
    Problem: Repeated structure Example: Each row in table
    Solution: Generate structure with code Iterate over array, creating table rows
    See course web site
    <% meetings.each do |meet| %>

    <%= meet.date %>

    …

    Generating Random Content
    Computer Science and Engineering  The Ohio State University
    Want placeholder content for prototype
    Useful for making style/layout decisions Don’t care about actual content
    Solution: use a method that returns an
    HTML string
    <%= lorem.sentence %>
    Many lorem methods available
    lorem.paragraphs 2
    lorem.date
    lorem.last_name
    lorem.image(‘300×400’)
    #=> http://placehold.it/300×400

    Helper Functions
    Computer Science and Engineering  The Ohio State University
    Used to generate common HTML snippets
    Example: hyperlinks
    About us
    With link_to helper in template:
    <%= link_to('About us', '/about.html') %> #=> About us
    Many optional arguments
    <%= link_to('My Blog', '/blog.html', class: 'happy') %>
    #=>
    My Blog

    (Many) More Helper Functions
    Computer Science and Engineering  The Ohio State University
    Format helpers
    pluralize 2, ‘person’ #=> ‘2 people’
    Tag helpers
    tag :img, src: ‘/kittens/png’
    content_tag :p, class: ‘warning’ do … end
    Form helpers
    form_tag ‘/login’, method: ‘post’
    button_tag ‘cancel’, class: ‘clear’
    Asset helpers
    stylesheet_link_tag ‘all’
    javascript_include_tag ‘jquery’
    favicon_tag ‘images/favicon.png’
    image_tag ‘padrino.png’,
    width: ’35’, class: ‘logo’

    Computer Science and Engineering  The Ohio State University
    Reuse of views with partials
    Included with partial (eg <%= partial...) Filename is prepended with underscore Parameter passing from parent template Layouts and templates Markdown, SASS Content generation and helpers Template for generating HTML Scriplets and expressions 程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com

    Related Posts