Skapa en webbplatsmall från programladdning eller en mall för webbplatsdesign

Den öppna arkitekturen hos Oracle Content Management innebär att du kan använda arbete som utförts i andra kodningsramverk, t.ex. Foundation eller Programladdning. Med ett fåtal ändringar kan du förvandla en programladdningsmall till ett tema och göra det till en del av en mall i Oracle Content Management.

Grundläggande process

Här är en översikt över de steg som beskrivs i detalj i de avsnitt som följer:

  1. Förutsättningar

  2. Skapa en webbplats

  3. Synkronisera temamappen

  4. Ställ in det grundläggande temat

  5. Uppdatera webbplatssidorna

  6. Uppdatera navigering

  7. Uppdatera webbplatslayouterna

  8. Publicera webbplatsen

  9. Skapa den nya mallen

Förutsättningar

  • Ha datorappen för Oracle Content Management inställd och igång så att den synkroniserar mappar och filer med den lokala datorn.

  • Ladda ned programladdningsmallens temamappar, -filer och -innehåll till den lokala datorn och ha dem klara för användning.

Skapa en webbplats

Skapa en webbplats från en startmall i Oracle Content Management:

  1. Klicka på Webbplatser i sidnavigeringen.

    En lista över befintliga platser visas.

  2. Klicka på Skapa.

  3. I dialogrutan Skapa webbplats väljer du JET-startmall eller Startmall att använda som grund för webbplatsen.

  4. I dialogrutan anger du ett namn för platsen. Det här namnet används i URL:en till platsen. Du kan använda bokstäver, siffror, understreck (_) och bindestreck (-). Om du anger ett blanksteg ersätts det automatiskt med ett bindestreck.

    Använd inte följande namn för mallar, teman, komponenter, platser eller platssidor: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Även om du kan använda följande namn för platssidor bör du inte använda den för mallar, teman, komponenter och platser: documents, sites.

    Obs!:

    Sökvägen för URL:en till en webbplats i Oracle Content Management är skiftlägeskänslig. Skiftläget i fråge- eller fragmentsträngarna hanteras av utvecklarna i deras anpassade kod.

          https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data

  5. Du kan ange en beskrivning av platsen.

  6. När du är klar klickar du på Skapa.

    En förloppsindikator visar den nya platsens namn och skapandestatus. När platsen har skapats visas namnet i listan över webbplatser. Dess initiala status är offline.

    Du hittar snabbt den nya platsen du skapat i listan och du sorterar den per Senast uppdaterad. Den plats du precis har skapat visas längst upp i listan.

Synkronisera temamappen

När du skapar en webbplats utifrån en startmall skapas en kopia av startmalltemat, som namnges med webbplatsnamnet följt av temanamnet. Till exempel är temat för My_New_Site My_New_SiteTheme.

Använd datorappen för att synkronisera temamappen och filerna för webbplatsen med den lokala datorn. Se Komma igång med synkronisering i Samarbeta kring dokument med Oracle Content Management.

Du bör nu se mallens temamapphierarki och filer på den lokala klientdatorn. Här följer ett exempel:

    theme_name
        assets
            css
                main.css
            js
                topnav.js
        designs
            default
                design.css
                design.json
                facebook.png
                googleplus.png
                linkedin.png
                twitter.png
                youtube.pgn
        layouts
            index.html
        responsepages
            404.html
        _folder.json
        _folder_icon.png
        components.json
        viewport.json

Ställ in det grundläggande temat

  1. Kopiera dessa programladdningsfiler till de synkroniserade temamapparna på den lokala klientdatorn som överlägg på de befintliga filerna.

    • html-filer ska in i mappen theme_name/layouts

    • css-filer ska in i mappen theme_name/assets/css

    • js-filer ska in i mappen theme_name/assets/js

    • image-filer ska in i mappen theme_name/assets/images, som kan grupperas i undermappar med bilder för bakgrund, sidfot, personer osv.

  2. Ändra html-filerna i mappen layout för att uppdatera relativa sökvägar och lägga till obligatoriska element. För ett typiskt programladdningstema finns det många relativa sökvägar till mappen /assets, så du måste ändra dem så att de pekar på temamappen.

    Åtgärda sökvägarna för de css-, js- och images-mappar som ska användas:

    _scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/

    Obs!:

    När det här steget har slutförts justeras delen _scs_theme_root automatiskt efter den miljö som temat används i.

  3. Det finns tre krav för varje layout i Oracle Content Management:

    1. Inkludera följande taggar i html-filens <head>-tagg:

      • <!--$SCS_RENDER_INFO-->

      • <!--$SCS_SITE_HEADER-->

      •  <!--$SCS_PAGE_HEADER-->

    2. Inkludera återgivningsskriptet i slutet av layoutfilerna, precis innanför taggen <body>. Båda dessa sökvägar justeras automatiskt i webbplatsverktygs- och exekveringsmiljöerna.

      <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>

    3. Inkludera följande taggar efter inkluderandet av renderer.js-filen:

      • <!--$SCS_PAGE_FOOTER-->

      • <!--$SCS_SITE_FOOTER-->

Kontrollera att de ändrade temafilerna synkroniseras med webbplatsen i Oracle Content Management.

Uppdatera webbplatssidorna

När du öppnar webbplatsen i webbplatsverktyget ser du först de sidor som finns på standardwebbplatsen. Du kan ta bort sidor du inte vill ha och byta layout på de sidor du vill ha för att behålla någon av de nya layouterna.

  1. Klicka på Webbplatser i sidnavigeringen.

    En lista över befintliga platser visas.

  2. Välj webbplatsen och välj Öppna på snabbmenyn eller klicka på Ikonen Öppna i aktivitetsfältet.

  3. Ange ett namn på uppdateringen och en valfri beskrivning, och klicka sedan på Skapa.

    För uppdateringens namn kan du använda bokstäver, siffror, understreck (_) och bindestreck (-). Om du anger ett blanksteg ersätts det automatiskt med ett bindestreck.

    Om du redan har uppdateringar för en plats väljer du en i listan och klickar på Ikonen Redigera.

  4. Webbplatsverktyget öppnas i förhandsgranskningsläge. För att du ska göra ändringar eller använda navigeringsalternativen i sidlisten måste du kontrollera att alternativet Redigera Växeln Redigera är angett till Redigera.

  5. Du redigerar en viss sida genom att välja sidan med hjälp av webbplatsträdet i sidlisten eller med hjälp av webbplatsens egen navigering.

  6. Du kan ta bort en sida som du inte vill ha, genom att välja sidan och klicka på Ikonen Ta bort.

  7. Om du vill lägga till en ny sida klickar du på Lägg till sida. Du kan flytta sidan i webbplatsträdet, genom att dra och släppa den.

  8. Om du vill ändra den layout som är associerad med en sida väljer du sidan i webbplatsträdet och klickar på Ikonen Sidinställningar för att visa sidinställningarna.

    Gå till fältet Sidlayout och välj en annan layout på menyn. Antalet och typerna av sidlayouter beror på temat som är associerat med platsen.

  9. Spara om du vill spara ändringarna i den aktuella uppdateringen. Du kan fortsätta arbeta i den aktuella uppdateringen eller skapa nya uppdateringar vid behov.

Uppdatera navigering

När du tittar på navigeringen i förhandsgranskningen av webbplatsen matchar den inte den aktuella hierarkin, på grund av den fasta navigeringen i layouten från programladdningstemat.

Uppdatera navigeringen för att ersätta den hårdkodade koden i programladdningstemat med dynamiskt genererad kod från webbplatshierarkin.

Redigera de lokala synkroniserade kopiorna av temafilerna.

  1. Ta bort den hårdkodade navigeringskoden från layouterna. Här är ett exempel på den hårdkodade navigering som skulle behöva tas bort från ett typiskt programladdningstema. Det här är en typisk sidhuvudsektion med logotypen, delarna för Växla navigering för hamburgarmenyn när sidan är för smal (den följsamma delen) och den hårdkodade sidnavigeringen för de andra sidorna.

    <header id="header" class="header navbar-fixed-top">  
        <div class="container">       
            <h1 class="logo">
                <a href="index.html"><span class="text">Velocity</span></a>
            </h1><!--//logo-->
            <nav class="main-nav navbar-right" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button><!--//nav-toggle-->
                </div><!--//navbar-header-->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a href="index.html">Home</a></li>
                        <li class="nav-item"><a href="features.html">Features</a></li>
                        <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="download.html">Download Apps</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-single.html">Blog Single</a></li>
                                <li><a href="blog-category.html">Blog Category</a></li>
                                <li><a href="blog-archive.html">Blog Archive</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>                    
                            </ul>                            
                        </li><!--//dropdown-->                         
                        <li class="nav-item"><a href="login.html">Log in</a></li>
                        <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li>
                    </ul><!--//nav-->
                </div><!--//navabr-collapse-->
            </nav><!--//main-nav-->                     
        </div><!--//container-->
    </header><!--//header-->

  2. Skriv JavaScript-kod för att traversera webbplatsstrukturinformationen och generera navigeringskoden. Inkludera sedan JavaScript-koden i layouterna. Exempel:

    <script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>

  3. Ändra exakta utdata för filen topnav.js så att de matchar den uppmärkning som förväntas i aktuell CSS.

Uppdatera webbplatslayouterna

Nu är webbplatsen fungerande, men den har inga redigerbara områden (rutor) i layouterna.

  1. Hitta eller lägg till ett DIV-element i en layout och beteckna det som en ruta.

    Rutor är DIV-element i layouten som har värdet "scs-slot" i klassattributet. Varje ruta måste ha ett unikt id-attribut. Exempel:

    <div id="slot-content1" class="scs-slot scs-responsive"></div>

    Om du vill att rutan automatiskt ska justeras efter storleken på webbläsarens visningsområde inkluderar du klassattributet "scs-responsive".

  2. Upprepa det här steget efter behov för att skapa ytterligare rutor i layouten eller i andra layouter.

Publicera webbplatsen

När du har slutfört och sparat alla dina ändringar på en webbplats måste du Publicera webbplatsen.

Vid publiceringen av webbplatsen slås alla ändringar i den aktuella uppdateringen samman med basen, så att vad som var en uppdatering blir den nya baswebbplatsen.

Skapa den nya mallen

Du har nu en fungerande webbplats med ett associerat tema, så du kan göra den till en mall att dela med andra så att de kan skapa webbplatser utifrån den.

  1. Klicka på Utvecklare i sidnavigeringen för Oracle Content Management.

  2. Klicka på Visa alla mallar.

  3. Klicka på Skapa och välj Från befintlig plats.

  4. Välj den nya webbplats som du har skapat med hjälp av en startmall och programladdningsmallen.

  5. Ange ett namn på den nya mallen och klicka på Skapa.

  6. Om du vill paketera mallen för användning med andra instanser av Oracle Content Management ska du välja mallen och sedan menyalternativet Exportera för att skapa en .zip-fil som kan laddas ned.