Skip to content
GitLab
Commit d1628f63 authored by Athanasios's avatar Athanasios
Browse files

Update pages help

parent b041bafa
Hide whitespace changes
Inline Side-by-side
Showing
with 79 additions and 97 deletions
+79 -97
help/gitlab-pages.html
+ 79
- 97
View file @ d1628f63
......@@ -55,7 +55,7 @@
<small>Gitlab-pages Projekt erstellen</small></a>
</h3>
</div>
<div id="collapse1" class="card-body collapse" style="">
<div id="collapse1" class="card-body collapse">
<p>
Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:
</p>
......@@ -73,8 +73,19 @@
<li> Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie <em> Project name </em> und <em> Project description </em> ein.<img src="/img/help/createproject.png" width="95%"/> </li>
<li> Klicken Sie auf <em> Create project</em></li>
<li>
Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt. <img src="/img/help/folderpublic.png" width="95%"/> <br/>
In diesem Ordner befinden sich die Dateien <em> index.html, aktuelles.html </em>, <em> style.css </em> und <em>settings.js</em>. Diese sorgen für Inhalt (aktuelles.html, index.html) und Aussehen (style.css) der statischen Webseite und enthalten allgemeine Projektinformationen (settings.js). Direkt nach Projekterstellung enthalten sie zunächst nur allgemeine, grundsätzliche Informationen aus dem Template. <img src="/img/help/content_public.png" width="95%"/>
Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt.
<img src="/img/help/folderpublic.png" width="95%"/> <br/>
<p> This is the structure of a simple template.</p>
<p><em>assets</em> folder: You place in this folder files that should be common for all the subpages of your gitlab page. E.g. you should place any personal avatars or partner logos in the corresponding folders (images, logos).</p>
<p><em>home</em> folder: This is the default folder where you place your main template.</p>
<p><em>settings.js</em>: This is the file where you select the settings for your gitlab page.</p>
<img src="/img/help/content_public.jpg"/>
<p>You should not make changes to some of the files.</p>
<p>Red: Those files should not be changed.</p>
<p>Orange: Those files should be replaced by your own files. The filename should remain the same.</p>
<p>Green: Those files you can edit.</p>
<p>Blue: In those folders you can add your additional files. In case of assets, images, logos etc. In case of a template folder, your custom css, javascript or any other files.</p>
<img src="/img/help/content_public_colors.jpg"/>
</li>
<li>
Um Ihre eigenen Projektinhalte zu veröffentlichen, können Sie entweder eine komplett eigene HTML-Seite erzeugen oder sich an unseren Vorgaben aus dem Template orientieren. Eine Anleitung zur Verwendung unserer Vorlage finden Sie im Bereich <a href="#template_Text">Gitlab-pages Template benutzen</a>
......@@ -98,7 +109,7 @@
<small>Gitlab-pages Projekt ändern</small></a>
</h3>
</div>
<div id="collapse2" class="card-body collapse" style="">
<div id="collapse2" class="card-body collapse">
<p>
Nachdem Ihr Projekt das erste Mal veröffentlicht wurde, möchten Sie sicherlich Änderungen an der Seite vornehmen. Dafür gehen Sie wie folgt vor:
<ol>
......@@ -139,7 +150,7 @@
<small>Gitlab-pages Seite entfernen</small></a>
</h3>
</div>
<div id="collapsedel" class="card-body collapse" style="">
<div id="collapsedel" class="card-body collapse">
<p>
Um Ihre gitlab-pages Seite zu entfernen, gibt es zwei Möglichkeiten. Sie können entweder das gesamte Projekt löschen, oder aber nur die öffentliche Seite, das Projekt aber behalten, um daran Änderungen vorzunehmen. Um nur die Seite, nicht aber das Projekt an sich zu löschen, gehen Sie wie folgt vor:
<ol>
......@@ -206,11 +217,11 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
<a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
<small>Erste Schritte</small></a>
</h3>
</div>
<div id="collapse7" class="card-body collapse" style="">
<div id="collapse3" class="card-body collapse">
<p>
Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
</p>
......@@ -223,27 +234,43 @@
</p>
<img src="/img/help/select_settings.png" width="95%"/>
<p>
Passen Sie die Werte für projektname und projektseitenlink an, indem Sie die entsprechenden Werte in die Anführungszeichen schreiben.
Those are the default values for the social networks/personal website of a participant and the default avatar. It is recommended not to change them, but you can add another social network if you want.
</p>
<img src="/img/help/edit_settings.png" width="95%"/>
<p>
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
<img src="/img/help/default_settings.png"/>
<p>The switches control which parts of you gitlab page should turn on or off. E.g. if you want a single page and not a menu then you change the menu value to OFF.</p>
<img src="/img/help/switches.png"/>
<p>Here you change the project name. If the switch for the project name is OFF then it will not be visible.</p>
<img src="/img/help/pr_name.png"/>
<p>Here you change the menu of your gitlab page. A menu can be linked with a folder/template or with an external link, e.g. a demo. You can add or remove menu entries. You hide the menu when the switch is OFF.
Don't forget to add the forward slash at the end of a menu link if it is pointing to a folder.
</p>
</li>
<li> Anpassen der Kontaktperson in <em> kontakt.html </em>
<p><b> Wichtig: </b> Wird die Kontaktperson nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
<img src="/img/help/menu.png"/>
<p>Here you change the participants. You can use default values for a social network (They point to HFT's social networks) or you can use your own profiles.
You can also add your personal webpage. You can add or remove a social network. You can also use a personal avatar or the default one (DEFAULT.avatar).
</p>
<p>
Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> kontakt.html </em> und editieren Sie die Datei.
<img src="/img/help/partic.png"/>
<p>
Here is an example of two participants.
</p>
<img src="/img/help/partic2.png"/>
<p>
Here you change the footer logos of a project's partners. If you don't want a logo to link to an external website then use the href value EMPTY_LINK. The title will appear when you hover the mouse over a logo.
</p>
<img src="/img/help/select_contact.png" width="95%"/>
<img src="/img/help/f_logos.png"/>
<p>
Passen Sie die Kontaktperson und die Mailadresse an, indem Sie alle Vorkommen von Max Mustermann und die Mailadresse durch Ihre Werte ersetzen.
When you use the generic template there is an additional folder called templates. Inside this folder you will find all the available templates.
In order to use a template, you have to copy the folder from templates/&lttemplate name&gt and paste it (when you edit your pages locally) in the root folder.
Then it’s a good practice to rename this folder with the menu text you want to link it. Notice that the home page always points to the home folder.
That means if you want to use a template as home page then you have to rename the folder to home.
</p>
<img src="/img/help/edit_contact.png" width="95%"/>
<img src="/img/help/generic.png"/>
<p>
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
<img src="/img/help/edit_settings.png" width="95%"/>
</li>
</ol>
</div>
......@@ -252,11 +279,35 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
<a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
<small>Avatar hinzufügen</small></a>
</h3>
</div>
<div id="collapse4" class="card-body collapse">
<p> To add a personal avatar:
<ol>
<li>
Öffnen Sie den Ordner <em> public/assets/images </em>
</li>
<li>
Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
</li>
<li>
It is recommended the avatar to be square or portrait oriented. Also, better do not upload large avatars (>500px).
</li>
</ol>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
<small>Logo hinzufügen</small></a>
</h3>
</div>
<div id="collapse3" class="card-body collapse" style="">
<div id="collapse5" class="card-body collapse">
<p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
<ol>
<li>
......@@ -288,14 +339,17 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
<a class="collapsed" data-toggle="collapse" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
<small>Neue Seite hinzufügen</small></a>
</h3>
</div>
<div id="collapse4" class="card-body collapse" style="">
<div id="collapse6" class="card-body collapse">
<p>
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
<li>
Visit the templates folder and edit the index.html file. Select all the text inside this file and copy it. Then click the button <em>cancel</em>.
</li>
<li>
Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
<img src="/img/help/publicplus.png" width="95%"/>
......@@ -303,38 +357,10 @@
<li>
Klicken Sie dort auf <em> New File </em>
</li>
<li>Paste the text you copied from the template</li>
<li>
Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
<textarea rows="28" cols="64" disabled="true">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Neue Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<h2> Seitentitel: </h2>
Geben Sie die Dateinamen index.html (<b> wichtig: </b> Endung .html)
<p>
Content
</p>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
</div>
<script src="settings.js"> </script>
</body>
</html>
</textarea>
<img src="/img/help/editnewpage.png" width="95%"/>
</li>
<li>
......@@ -348,50 +374,6 @@
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
<small>Menü bearbeiten</small></a>
</h3>
</div>
<div id="collapse5" class="card-body collapse" style="">
<p>
Wenn Sie das Menü am oberen Seitenrand bearbeiten wollen, führen Sie folgende Schritte durch:
<ol>
<li>
Öffnen Sie im Ordner <em> public </em> die Datei <em>settings.js</em> und editieren Sie diese.
</li>
<li>
Im Menüblock kopieren Sie einen bereits bestehenden Teil und fügen diesen im Anschluss ein. Ein solcher Block besteht dabei aus folgenden Anweisungen:
<img src="/img/help/settingmenublock.png" width="95%"/>
<ul>
<li>
<em>//Link 4: Kontakt </em> Dies ist ein Kommentar, der der Ordnung und Verständlichkeit des Codes dient
</li>
<li>
<em>let NAME = document.createElement("a") </em> Dies legt einen neuen Eintrag fest
</li>
<li>
<em>NAME.href = "addresse" </em> Dies legt die Adresse fest, auf die der neue Menüeintrag verweist. Dies kann zum Beispiel eine neu angelegte Seite sein.
</li>
<li>
<em>NAME.innerHTML="" </em> Dies legt den Text des Eintrags fest, also was später im Menü angezeigt wird
</li>
<li>
<em> menu.appendChild(NAME); </em> Dies fügt letztlich den Eintrag dem Menü hinzu.
</li>
</ul>
</li>
<li>
Nachdem Sie den Block entsprechend Ihrer Wünsche bearbeitet haben, klicken Sie auf <em> Commit changes </em>, um Ihre Änderungen zu speichern.
<img src="/img/help/settingsnewmenublock.png" width="95%"/>
</li>
</ol>
</p>
</div>
</div>
</div>
</div>
</div>
......
img/help/content_index_marked.png
+ 0
- 0
View replaced file @ b041bafa View file @ d1628f63
img/help/content_index_marked.png

40.3 KB | W: | H:

img/help/content_index_marked.png

12.2 KB | W: | H:

img/help/content_index_marked.png
img/help/content_index_marked.png
img/help/content_index_marked.png
img/help/content_index_marked.png
  • 2-up
  • Swipe
  • Onion skin
img/help/content_public.jpg 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/content_public.jpg

17.6 KB

img/help/content_public.png deleted 100644 → 0
+ 0
- 0
View file @ b041bafa
img/help/content_public.png

33.7 KB

img/help/content_public_colors.jpg 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/content_public_colors.jpg

16.7 KB

img/help/default_settings.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/default_settings.png

23.7 KB

img/help/edit_contact.png deleted 100644 → 0
+ 0
- 0
View file @ b041bafa
img/help/edit_contact.png

73.2 KB

img/help/edit_settings.png
+ 0
- 0
View replaced file @ b041bafa View file @ d1628f63
img/help/edit_settings.png

84.4 KB | W: | H:

img/help/edit_settings.png

32.9 KB | W: | H:

img/help/edit_settings.png
img/help/edit_settings.png
img/help/edit_settings.png
img/help/edit_settings.png
  • 2-up
  • Swipe
  • Onion skin
img/help/editnewpage.png
+ 0
- 0
View replaced file @ b041bafa View file @ d1628f63
img/help/editnewpage.png

55.2 KB | W: | H:

img/help/editnewpage.png

70.3 KB | W: | H:

img/help/editnewpage.png
img/help/editnewpage.png
img/help/editnewpage.png
img/help/editnewpage.png
  • 2-up
  • Swipe
  • Onion skin
img/help/f_logos.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/f_logos.png

19.7 KB

img/help/generic.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/generic.png

3.64 KB

img/help/menu.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/menu.png

9.84 KB

img/help/partic.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/partic.png

21.9 KB

img/help/partic2.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/partic2.png

37.5 KB

img/help/pr_name.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/pr_name.png

1.63 KB

img/help/publicplus.png
+ 0
- 0
View replaced file @ b041bafa View file @ d1628f63
img/help/publicplus.png

36.9 KB | W: | H:

img/help/publicplus.png

30.8 KB | W: | H:

img/help/publicplus.png
img/help/publicplus.png
img/help/publicplus.png
img/help/publicplus.png
  • 2-up
  • Swipe
  • Onion skin
img/help/select_contact.png deleted 100644 → 0
+ 0
- 0
View file @ b041bafa
img/help/select_contact.png

21.8 KB

img/help/select_settings.png
+ 0
- 0
View replaced file @ b041bafa View file @ d1628f63
img/help/select_settings.png

22 KB | W: | H:

img/help/select_settings.png

14.9 KB | W: | H:

img/help/select_settings.png
img/help/select_settings.png
img/help/select_settings.png
img/help/select_settings.png
  • 2-up
  • Swipe
  • Onion skin
img/help/switches.png 0 → 100644
+ 0
- 0
View file @ d1628f63
img/help/switches.png

7.67 KB

Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal