Utvikler cookbook

1.1. Sidemal

Bakgrunn

I denne artikkelen går vi igjennom prosessen for å opprette en side fra en enkel statisk html fil, til en dynamisk EP-side full av objekter og innhold.

EP benytter Smarty 2.x (dokumentasjon) som template engine, noe som gir stor frihet i utforming a sider.

I denne artikkelen vil du lære:

 

Fremgangsmåte

La oss ta utgangspunkt i en eksempel side fra bootstrap 3, Narrow jumbotron

 Siden har følgende design:

 

En nedstrippet kildekode av denne siden ser slik ut:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Narrow Jumbotron Template for Bootstrap</title>
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="jumbotron-narrow.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <h3 class="text-muted">Project name</h3>
      </div>

      <div class="jumbotron">
        <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
        </div>

        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
        </div>
      </div>

      <div class="footer">
        <p>&copy; Company 2014</p>
      </div>

    </div>
  </body>
</html>

 

Dette er et veldig enkelt design, og etter litt erfaring med EP vil du fort se på denne siden som følgende objekter:

Dette og mer kommer vi tilbake til i de neste delkapitlene, først må vi opprette selve siden der disse objektene kan plasseres. 

 

  1. La oss begynne med å putte plasseringspunkter for objekter inn i <body>
<body>
        <div class="container">
                <div class="header">
                        {$ep_global_navigation}
                        <h3 class="text-muted">Project name</h3>
                </div>

                {$ep_documentcontent}

                <div class="footer">
                        {$ep_global_footer}
                </div>

        </div>
</body>

 

 

Her har vi byttet ut innhold med tre plasseringspunkter

 

Plasserings punkter som begynner på $ep_global_ referere til globale objekter

I malen har vi referert til de globale navigasjon og bunntekst(footer) objektene, disse skal vi opprette senere.
Mens statisk artikkel og nyhets-liste vil begge bli plassert i $ep_document_content.

$ep_documentcontent

Dette er et plasseringspunkt som vil bli brukt ved artikkelvisning på siden

 

 

Metadata og tittel:

<meta name="description" content="{$EP.page.metadata.description}">
<meta name="author" content="{$EP.page.metadata.author}">
<title>{$EP.page.properties.title}</title>

 

Her har vi satt inn informasjon som hentes ut ifra side objektet.
Les mer om hvordan du setter disse verdiene i Sider dokumentasjonen.

 

 

Smartedit tilpasninger

Ved bruk av smartedit er det ofte nødvendig med ekstra tilpasninger, les mer om dette i kapitel 3.2 SmartEdit-tilpasninger

 

 

Mer informasjon

I de neste delkapitelen vil vi opprette objekter som vi plasserer inn i sidemalens plasseringspunkter.

03.03.15

Hjelp / support

Jeg finner ikke det jeg leter etter

Vår dokumentasjon er stadig under utvikling. Vi endrer og legger til nye kapitler og bøker etter hvert som EasyPublish CMS endrer og vokser. Skulle du likevel ikke finne det du leter etter så ta kontakt med oss via support@escio.no.

Jeg har funnet en feil

Hvis du har funnet en feil i vår dokumentasjon så ønsker vi å rette på den. Send oss et hint til support@escio.no.

Translate

You can translate this documentation by using Google Translate. Select your language:

×