Δημιουργία προτύπου τοποθεσίας από πρότυπο Bootstrap ή σχεδίασης τοποθεσίας ιστού

Η ανοικτή αρχιτεκτονική του Oracle Content Management σημαίνει ότι μπορείτε να χρησιμοποιήσετε εργασία που έχει γίνει σε άλλα πλαίσια εργασιών προγραμματισμού, όπως τα Foundation ή Bootstrap. Με λίγες αλλαγές, μπορείτε να μετατρέψετε ένα πρότυπο Bootstrap σε ένα θέμα και να το κάνετε τμήμα ενός προτύπου του Oracle Content Management.

Αναγκαίες προϋποθέσεις

  • Να έχετε ρυθμισμένη και σε λειτουργία την εφαρμογή υπολογιστή του Oracle Content Management για τον συγχρονισμό φακέλων και αρχείων με τον τοπικό υπολογιστή σας.

  • Κάντε λήψη του περιεχομένου, των αρχείων και των φακέλων θεμάτων του προτύπου Bootstrap στον τοπικό υπολογιστή σας και ετοιμάστε για χρήση.

Δημιουργία μιας τοποθεσίας

Δημιουργήστε μια τοποθεσία από ένα πρότυπο αρχαρίου του Oracle Content Management:

  1. Στην πλαϊνή περιοχή πλοήγησης, κάντε κλικ στο στοιχείο Τοποθεσίες.

    Θα εμφανιστεί μια λίστα με τις υπάρχουσες τοποθεσίες.

  2. Κάντε κλικ στην επιλογή "Δημιουργία".

  3. Στο παράθυρο διαλόγου "Δημιουργία τοποθεσίας", επιλέξτε "Πρότυπο αρχαρίου JET" ή "Πρότυπο αρχαρίου" για χρήση ως βάση για την τοποθεσία σας.

  4. Στο πλαίσιο διαλόγου, εισαγάγετε ένα όνομα για την τοποθεσία. Αυτό το όνομα χρησιμοποιείται στη διεύθυνση της τοποθεσίας. Μπορείτε να χρησιμοποιήσετε γράμματα, αριθμούς, χαρακτήρες υπογράμμισης (_) και παύλες (-). Εάν εισαγάγετε ένα κενό διάστημα, θα αντικατασταθεί αυτόματα με μια παύλα.

    Μη χρησιμοποιείτε τα παρακάτω ονόματα για πρότυπα, θέματα, συστατικά στοιχεία, τοποθεσίες ή σελίδες τοποθεσίας: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Παρόλο που μπορείτε να χρησιμοποιήσετε τα παρακάτω ονόματα για σελίδες τοποθεσίας, δεν μπορείτε να τα χρησιμοποιήσετε για πρότυπα, θέματα, συστατικά στοιχεία ή τοποθεσίες: documents, sites.

    Σημείωση:

    Στη διαδρομή για μια διεύθυνση τοποθεσίας του Oracle Content Management γίνεται διάκριση κεφαλαίων/πεζών. Η διαχείριση της χρήσης κεφαλαίων/πεζών στις συμβολοσειρές ερωτήματος ή τμήματος γίνεται από τους προγραμματιστές στην προσαρμοσμένη κατάσταση λειτουργίας τους.

          https:[//host[:port]][/]path[?query][#fragment] 
         \____________________/\________________________/
            Location                     Data
  5. Προαιρετικά, εισαγάγετε μια περιγραφή για την τοποθεσία.

  6. Όταν είστε έτοιμοι, κάντε κλικ στην επιλογή "Δημιουργία".

    Μια γραμμή προόδου εμφανίζει το όνομα της νέας τοποθεσίας και την κατάσταση δημιουργίας. Όταν η τοποθεσία δημιουργηθεί, το όνομα θα εμφανίζεται στη λίστα τοποθεσιών. Η αρχική της κατάσταση είναι ανενεργή.

    Για να βρείτε γρήγορα τη νέα τοποθεσία σας στη λίστα, ταξινομήστε τη λίστα κατά "Τελευταία ενημέρωση". Η τοποθεσία που μόλις δημιουργήσατε θα εμφανιστεί στην κορυφή της λίστας.

Συγχρονισμός του φακέλου θεμάτων

Όταν δημιουργείτε μια τοποθεσία από ένα πρότυπο αρχαρίου, δημιουργείται ένα αντίγραφο του θέματος προτύπου αρχαρίου και ονομάζεται με το όνομα τοποθεσίας που ακολουθείται από το όνομα θέματος. Για παράδειγμα, το θέμα για την τοποθεσία My_New_Site είναι My_New_SiteTheme.

Χρησιμοποιήστε την εφαρμογή υπολογιστή για να συγχρονίσετε τον φάκελο και τα αρχεία θεμάτων για την τοποθεσία στον τοπικό υπολογιστή σας. Ανατρέξτε στην ενότητα Έναρξη χρήσης του συγχρονισμού στο θέμα Συνεργασία σε Έγγραφα με το Oracle Content Management.

Θα πρέπει τώρα να βλέπετε την ιεραρχία φακέλων θεμάτων προτύπου και τα αρχεία στον τοπικό υπολογιστή σας. Ακολουθεί ένα παράδειγμα:

    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

Ρύθμιση του βασικού θέματος

  1. Αντιγράψτε αυτά τα αρχεία Bootstrap στους συγχρονισμένους φακέλους θεμάτων στον τοπικό υπολογιστή σας για να επικαλύψετε τα υπάρχοντα αρχεία.

    • Τα αρχεία html μεταφέρονται στον φάκελο theme_name/layouts .

    • Τα αρχεία css μεταφέρονται στον φάκελο theme_name/assets/css .

    • Τα αρχεία js μεταφέρονται στον φάκελο theme_name/assets/js φάκελος

    • Τα αρχεία image μεταφέρονται στον φάκελο theme_name/assets/images, ο οποίος μπορεί να ομαδοποιηθεί σε υποφακέλους με εικόνες για φόντο, υποσέλιδο, άτομα, κ.ο.κ.

  2. Τροποποιήστε τα αρχεία html στον φάκελο layout για να ενημερώσετε τις σχετικές διαδρομές και να προσθέσετε τα απαιτούμενα στοιχεία. Για ένα τυπικό θέμα Bootstrap θα υπάρχουν πολλές σχετικές διαδρομές στον φάκελο /assets, οπότε πρέπει να τις τροποποιήσετε ώστε να παραπέμπουν στον φάκελο θεμάτων.

    Διορθώστε τις διαδρομές για τους φακέλους css, jsκαι images για χρήση:

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

    Σημείωση:

    Όταν ολοκληρωθεί αυτό το βήμα, το τμήμα _scs_theme_root θα προσαρμοστεί αυτόματα στο περιβάλλον στο οποίο χρησιμοποιείται το θέμα.
  3. Υπάρχουν τρεις απαιτήσεις για κάθε διάταξη Oracle Content Management:

    1. Συμπεριλάβετε τις ακόλουθες ετικέτες στην ετικέτα <head> του αρχείου html:

      • <!--$SCS_RENDER_INFO-->

      • <!--$SCS_SITE_HEADER-->

      •  <!--$SCS_PAGE_HEADER-->

    2. Συμπεριλάβετε τη δέσμη ενεργειών απόδοσης στο τέλος των αρχείων διάταξης, απλώς μέσα στην ετικέτα <body>. Και οι δύο αυτές διαδρομές προσαρμόζονται αυτόματα στο Εργαλείο δημιουργίας τοποθεσιών και στα περιβάλλοντα χρόνου εκτέλεσης.

      <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
    3. Συμπεριλάβετε τις ακόλουθες ετικέτες μετά τη συμπερίληψη του αρχείου renderer.js:

      • <!--$SCS_PAGE_FOOTER-->

      • <!--$SCS_SITE_FOOTER-->

Επαληθεύστε ότι τα τροποποιημένα αρχεία θεμάτων συγχρονίζονται με την τοποθεσία στο Oracle Content Management.

Ενημέρωση των σελίδων τοποθεσίας

Όταν ανοίξετε την τοποθεσία στο Εργαλείο δημιουργίας τοποθεσιών, θα δείτε αρχικά τις σελίδες που βρίσκονται στην προεπιλεγμένη τοποθεσία. Μπορείτε να διαγράψετε τις σελίδες που δεν θέλετε και να ενεργοποιήσετε τη διάταξη στις σελίδες που θέλετε να διατηρήσετε σε μία από τις νέες διατάξεις.

  1. Στην πλαϊνή περιοχή πλοήγησης, κάντε κλικ στο στοιχείο Τοποθεσίες.

    Θα εμφανιστεί μια λίστα με τις υπάρχουσες τοποθεσίες.

  2. Επιλέξτε την τοποθεσία και κατόπιν επιλέξτε Άνοιγμα στο εμφανιζόμενο με δεξί κλικ μενού ή κάντε κλικ στο εικονίδιο Εικονίδιο Άνοιγμα στη γραμμή ενεργειών.

  3. Εισαγάγετε ένα όνομα για την ενημέρωση και μια προαιρετική περιγραφή και έπειτα επιλέξτε Δημιουργία.

    Για το όνομα της ενημέρωσης, μπορείτε να χρησιμοποιήσετε γράμματα, αριθμούς, χαρακτήρες υπογράμμισης (_) και παύλες (-). Εάν εισαγάγετε ένα κενό διάστημα, θα αντικατασταθεί αυτόματα με μια παύλα.

    Εάν διαθέτετε ήδη ενημερώσεις για την τοποθεσία, επιλέξτε μια ενημέρωση από τη λίστα και κάντε κλικ στο εικονίδιο "Επεξεργασία".

  4. Το Εργαλείο δημιουργίας τοποθεσιών ανοίγει σε λειτουργία προεπισκόπησης. Για να πραγματοποιήσετε αλλαγές ή για να χρησιμοποιήσετε τις επιλογές πλοήγησης στην πλαϊνή γραμμή, βεβαιωθείτε ότι ο διακόπτης "Επεξεργασία" Διακόπτης Επεξεργασία έχει οριστεί ως Επεξεργασία.

  5. Για να επεξεργαστείτε μια συγκεκριμένη σελίδα, επιλέξτε τη σελίδα χρησιμοποιώντας τη δενδρική δομή της τοποθεσίας στην πλαϊνή γραμμή ή την πλοήγηση της τοποθεσίας.

  6. Για να αφαιρέσετε μια σελίδα που δεν θέλετε, επιλέξτε τη σελίδα και κάντε κλικ στο στοιχείο Εικονίδιο διαγραφής.

  7. Για να προσθέσετε μια νέα σελίδα, επιλέξτε "Προσθήκη σελίδας". Μπορείτε να επανατοποθετήσετε τη σελίδα στη δενδρική δομή της τοποθεσίας μέσω μεταφοράς και απόθεσης.

  8. Για να αλλάξετε τη διάταξη που σχετίζεται με μια σελίδα, επιλέξτε τη σελίδα στη δενδρική δομή της τοποθεσίας και επιλέξτε Εικονίδιο "Ρυθμίσεις σελίδας" για να εμφανιστούν οι ρυθμίσεις της σελίδας.

    Μεταβείτε στο πεδίο "Διάταξη σελίδας" και επιλέξτε μια διαφορετική διάταξη από το μενού. Ο αριθμός και ο τύπος των διατάξεων σελίδας εξαρτάται από το θέμα που σχετίζεται με την τοποθεσία σας.

  9. Επιλέξτε "Αποθήκευση" για να αποθηκεύσετε τις αλλαγές σας στην τρέχουσα ενημέρωση. Μπορείτε να συνεχίσετε να εργάζεστε στην τρέχουσα ενημέρωση ή να δημιουργήσετε νέες ενημερώσεις, αν χρειάζεται.

Ενημέρωση πλοήγησης

Όταν βλέπετε την πλοήγηση στην προεπισκόπηση τοποθεσίας, δεν αντιστοιχεί στην τρέχουσα ιεραρχία λόγω της πλοήγησης που είναι ενσωματωμένη στον κώδικα στη διάταξη από το θέμα Bootstrap.

Ενημερώστε την πλοήγηση για να αντικαταστήσετε τον ενσωματωμένο κώδικα στο θέμα Bootstrap με κώδικα που δημιουργείται δυναμικά από την ιεραρχία τοποθεσίας.

Επεξεργαστείτε τα τοπικά συγχρονισμένα αντίγραφα των αρχείων θεμάτων.

  1. Αφαιρέστε τον ενσωματωμένο κώδικα πλοήγησης από τις διατάξεις. Ακολουθεί ένα παράδειγμα από την πλοήγηση που είναι ενσωματωμένη στον κώδικα που θα πρέπει να αφαιρέσετε από ένα συνηθισμένο θέμα Bootstrap. Αυτή είναι μια τυπική ενότητα κεφαλίδας, με το λογότυπο, τα τμήματα "Εναλλαγή πλοήγησης" για το μενού "Hamburger" όταν η σελίδα είναι πολύ στενή (το αποκριτικό τμήμα) και την πλοήγηση σελίδας που είναι ενσωματωμένη στον κώδικα για τις άλλες σελίδες.

    <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. Δημιουργήστε κώδικα JavaScript για να διασχίσετε τις πληροφορίες δομής τοποθεσίας και δημιουργήστε τον κώδικα πλοήγησης και, στη συνέχεια, συμπεριλάβετε τον κώδικα JavaScript στις διατάξεις, για παράδειγμα:

    <script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
  3. Τροποποιήστε το ακριβές αποτέλεσμα εξόδου του αρχείου topnav.js ώστε να αντιστοιχεί στη σήμανση που αναμένεται στο συγκεκριμένο CSS σας.

Ενημέρωση διατάξεων τοποθεσίας

Σε αυτό το σημείο, η τοποθεσία είναι λειτουργική αλλά δεν έχει περιοχές με δυνατότητα επεξεργασίας (υποδοχές) στις διατάξεις.

  1. Εντοπίστε ή προσθέστε ένα στοιχείο DIV σε μια διάταξη και προσδιορίστε το ως υποδοχή.

    Οι υποδοχές είναι στοιχεία DIV στη διάταξη που έχουν την τιμή "scs-slot" στο χαρακτηριστικό κλάσης. Κάθε υποδοχή πρέπει να έχει ένα μοναδικό χαρακτηριστικό id. Για παράδειγμα:

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

    Για να κάνετε την υποδοχή να προσαρμόζεται αυτόματα στο μέγεθος της θύρας προβολής του προγράμματος περιήγησης, συμπεριλάβετε το χαρακτηριστικό κλάσης "scs-responsive".

  2. Επαναλάβετε αυτό το βήμα, όπως χρειάζεται, για να δημιουργήσετε πρόσθετες υποδοχές στη διάταξη ή σε άλλες διατάξεις.

Δημοσίευση τοποθεσίας

Αφού ολοκληρώσετε και αποθηκεύσετε όλες τις αλλαγές σας σε μια τοποθεσία, πρέπει να κάνετε Δημοσίευση της τοποθεσίας.

Δημοσιεύοντας την τοποθεσία, όλες οι αλλαγές στην τρέχουσα ενημέρωση συγχωνεύονται στη βάση, εφαρμόζοντας ότι ήταν στην ενημέρωση στη νέα βασική τοποθεσία.

Δημιουργία νέου προτύπου

Τώρα έχετε μια λειτουργική τοποθεσία με ένα συσχετισμένο θέμα, οπότε μπορείτε να την κάνετε πρότυπο για να την μοιραστείτε με άλλους ώστε να μπορούν να δημιουργούν τοποθεσίες από αυτό.

  1. Στην πλαϊνή περιοχή πλοήγησης του Oracle Content Management, κάντε κλικ στο στοιχείο Προγραμματιστής.

  2. Κάντε κλικ στην επιλογή Προβολή όλων των προτύπων.

  3. Κάντε κλικ στην επιλογή "Δημιουργία" και επιλέξτε "Από υπάρχουσα τοποθεσία".

  4. Επιλέξτε τη νέα τοποθεσία που δημιουργήσατε χρησιμοποιώντας ένα πρότυπο αρχαρίου και το πρότυπο Bootstrap.

  5. Εισαγάγετε ένα όνομα για το νέο πρότυπο και κάντε κλικ στο στοιχείο "Δημιουργία".

  6. Για να δημιουργήσετε ένα πακέτο με το πρότυπο για χρήση με άλλα στιγμιότυπα του Oracle Content Management, επιλέξτε το πρότυπο και επιλέξτε την επιλογή μενού Εξαγωγή, για να δημιουργήσετε ένα αρχείο .zip που μπορείτε να λάβετε.