gitlab-pages.html 32.1 KB
Newer Older
1
2
3
4
5
6
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
7
    <title>Hilfe: Gitlab-Pages</title>
8
9
10
11
12
13
14
15
16
17
18
19
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/m4lab.css">
    <link rel="stylesheet" href="/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/fonts/ionicons.min.css">
    <link rel="stylesheet" href="/css/Testimonials.css">
    <link rel="stylesheet" href="/css/help.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>

<body>

    <div style="background-color: #dadada;">
20
    
21
22
23
        <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
            <div class="row">
            </div>
24
       </div> 
25
26
27
28
        <div id="Gitlab_Text" style="margin-top: 40px;margin-bottom: 30px;">
            <div class="container" style="background-color: #ffffff;">
                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
                    <div class="col-lg-12">
29
                        <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages</strong></h2>
30
31
32
33
34
                    </div>
                    <div class="col-auto flex-row flex-grow-1 flex-fill" style="background-color: #ffffff;">
                        <p><a href="https://de.wikipedia.org/wiki/GitLab">GitLab</a> ist eine umfangreiche Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von <a href="https://de.wikipedia.org/wiki/Git">Git</a> die auch Wiki-Funktionen und Issue Tracking bietet. Das Transferportal der HFT-Stuttgart betreibt eine eigene GitLab-Instanz für die Hochschule für Technik Stuttgart und ihre Kooperationspartner unter einer Open-Access-Lizenz. Mit <a href="https://docs.gitlab.com/ee/user/project/pages/">GitLab Pages </a> besteht für Angehörige der HFT die Möglichkeit, eine öffentliche statische Projektwebsite aus einem GitLab-Projekt heraus zu erzeugen. 
                        </p><p>
                        Die URL, unter der die Seite dann zu finden ist, lautet: <br/> <br/>  
Wolfgang Knopki's avatar
Wolfgang Knopki committed
35
                        <p class="justify-content-lg-start text-center">https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/</p>
36
37
38
39
40
41
42
43
44
45
46
                        </p>
                    </div>
                    <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
                            role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
                </div>
            </div>
        </div>
        <div id="create_Text" style="margin-top: 10px;margin-bottom: 30px;">
            <div class="container" style="background-color: #ffffff;">
                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
                    <div class="col-lg-12">
47
                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages Projekte</strong></h2> 
48
49
                    </div>
                    <div class="col-auto" style="background-color: #ffffff;">
50
51
52
53
54
55
56
57
                        <div class="help">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
                                        <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
                                        <small>Gitlab-pages Projekt erstellen</small></a>
                                    </h3>
                                </div>
Athanasios's avatar
Athanasios committed
58
                                <div id="collapse1" class="card-body collapse">
59
60
61
62
63
64
65
                                    <p>
                                        Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:
                                    </p>
                                    <ol>
                                        <li> Legen Sie sich auf <a href="https://transfer.hft-stuttgart.de"> https://transfer.hft-stuttgart.de</a> ein Benutzerkonto an bzw. loggen Sie sich   mit Ihren HFT-Nutzerdaten in das Transferportal ein.</li>
                                        <li> Besuchen Sie die Website <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">https://transfer.hft-stuttgart.de/gitlab/explore/projects</a></li>
                                        <li> Loggen Sie sich mit ihren Anmeldedaten ein </li>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
66
67
68
					<li> Standardmäßig wird Ihr Projekt als persönliches Projekt veröffentlicht, es wird also an Ihren persönlichen Benutzernamen gekoppelt, der dann auch in der URL auftaucht. Wenn Sie dies nicht wünschen, erstellen Sie eine neue Gruppe, unter der Sie das Projekt erstellen. Klicken Sie dazu auf <em>Groups</em>, <em> Your Groups </em> und wählen <em> New group </em> aus. Hier können Sie nun der Gruppe einen entsprechenden Namen geben. <p> <strong> Wichtig: </strong> Dieser Name wird später auch in der URL auftauchen, unter der Ihre Seite aufrufbar ist.</p> Nach Klick auf <em>create group</em> wird Ihre Gruppe angelegt, und Sie werden automatisch zur Gruppenseite weitergeleitet. 
						<img src="/img/help/newgroup.png" width="95%"/>
					</li>
69
70
71
                                        <li> Legen Sie ein neues Projekt an, indem Sie auf den Button <em> New Project </em> klicken
                                            <img src="/img/help/newproject.png" width="95%"/>
                                        </li>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
72
                                        <li> Wählen Sie <em> Create from template </em> aus und nutzen Sie ein Template aus dem Bereich <em> Instance </em>, Klicken Sie dort auf <em> Use template</em> <img src="/img/help/fromtemplate.png" width="95%"/> <img src="/img/help/choosetemplate.png" width="95%"/> </li>
73
74
75
                                        <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> 
Athanasios's avatar
Athanasios committed
76
77
78
79
80
81
82
83
84
85
86
87
88
                                            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"/>
89
90
91
92
                                        </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> 
                                        </li>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
93
94
95
96
97
98
99
                                        <li id="li_url"> 
                                            Sobald Sie Änderungen an Ihrer Seite vornehmen und diese in den Master-Branch eintragen (der Standard-Branch ihres Projektes), wird das Projekt veröffentlicht. Um den Link zu sehen, unter dem Sie Ihre Seite finden, gehen Sie in der Sitebar auf der linken Seite unter <em>CI / CD </em> auf <em>Jobs</em> und wählen den obersten Job mit den Namen <em> pages </em> aus. Im nun angezeigten Log finden Sie die Adresse, unter der Ihr Projekt ausgerollt wurde.
					    <img src="/img/help/show_jobs.png" width="95%">
					    <img src="/img/help/log_link.png" width="95%">						
					</li>
					<li>
					    Für weitere Schritte gehen Sie zum nächsten Abschnitt.
100
101
102
103
104
105
106
107
108
109
110
111
                                        </li>
                                    </ol>
                                </div>
                            </div>
                            <br/>
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
                                        <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                        <small>Gitlab-pages Projekt ändern</small></a>
                                    </h3>
                                </div>
Athanasios's avatar
Athanasios committed
112
                                <div id="collapse2" class="card-body collapse">
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
                                    <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>
                                            <li> 
                                                Klicken Sie die Datei, die Sie ändern wollen, in der Projektübersicht an <img src="/img/help/content_index_marked.png" width="95%"/>
                                            </li>
                                            <li> 
                                                Klicken Sie in der sich nun öffnenden Dateiansicht auf <em> Edit </em> <img src="/img/help/file_view.png" width="95%"/>
                                            </li>
                                            <li> 
                                                Bearbeiten Sie ihre Datei 
                                            </li>
                                            <li> 
                                                Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf <em> Commit changes </em> 
                                                <img src="/img/help/save_file.png" width="95%"/>
                                            </li>
                                            <li> 
                                                In der Projektübersicht sehen Sie nun den Status der Deployment-Pipeline, die ihre Webseite auf unserem Server veröffentlicht. Durch Klick auf das Symbol gelangen Sie zu einer Übersicht aller für Ihr Projekt angelaufenen Pipelines.
                                                <img src="/img/help/pipeline_pending.png" width="95%"/><br/>
                                                Durch Klick auf eine Pipeline wird Ihnen eine Erklärung zum aktuellen Status angezeigt, der Sie auch eventuelle Probleme entnehmen können.
                                                <img src="/img/help/overview_pipelines.png" width="95%"/><br/>
                                                Eine fehlerfrei durchgelaufene Pipeline liefert etwa ein solches Ergebnis:
                                                <img src="/img/help/output.png" width="95%"/><br/>
                                                Für eine Übersicht über häufig auftretende Fehler und was man dagegen tun kann, siehe <a href="#error_Text"> hier </a>.
                                            </li>
                                            <li> Wenn die Änderungen an Ihrer Homepage ohne Probleme übernommen wurden, sehen Sie dies an einem grünen Haken in der Projektübersicht
                                                <img src="/img/help/pipeline_good.png" width="95%"/>
                                            </li>
                                        </ol>
                                    </p>
                                </div>
                            </div>
145
			    <br/>	
Wolfgang Knopki's avatar
Wolfgang Knopki committed
146
147
148
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
149
                                        <a class="collapsed" data-toggle="collapse" href="#collapsedel" aria-expanded="false" aria-controls="collapsedel">
Wolfgang Knopki's avatar
Wolfgang Knopki committed
150
151
152
                                        <small>Gitlab-pages Seite entfernen</small></a>
                                    </h3>
                                </div>
Athanasios's avatar
Athanasios committed
153
                                <div id="collapsedel" class="card-body collapse">
Wolfgang Knopki's avatar
Wolfgang Knopki committed
154
155
156
157
158
159
160
161
162
163
164
165
166
167
                                    <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>
                                            <li> 
                                                Klicken Sie in der linken Sitebar auf <em> Settings </em> und <em>pages </em>.
                                            </li>
                                            <li> 
                                                Klicken Sie in der sich nun öffnenden Konfigurationsansicht auf <em> Remove pages </em>. Dies entfernt die Seite von unserem Server, das Projekt an sich bleibt aber erhalten.
                                            </li>
                                        </ol>
                                    </p>
                                </div>
                            </div>
					
168
                        </div>
169
170
171
172
173
                    </div>
                </div>
            </div>
        </div>
    
Wolfgang Knopki's avatar
Wolfgang Knopki committed
174
175
176
177
        <div id="error_Text" style="margin-top: 10px;margin-bottom: 30px;">
            <div class="container" style="background-color: #ffffff;">
                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
                    <div class="col-lg-12">
Wolfgang Knopki's avatar
Wolfgang Knopki committed
178
                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Häufige Fragen und Probleme</strong></h2> 
Wolfgang Knopki's avatar
Wolfgang Knopki committed
179
180
181
182
183
                    </div>
                    <div class="col-auto" style="background-color: #ffffff;">
                        <p>
                            <ul>
                                <li>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
184
185
186
187
188
189
                                    <h6> Pipeline schlägt beim Schritt <em> pages-test </em> fehl </h6>
                                    <p> In diesem Fall ist Ihr Projekt noch nicht vollständig konfiguriert. Bitte konfigurieren Sie ihr Projekt entsprechend der Vorlage im nächsten Abschnitt </p>
                                </li>

                                <li>
                                    <h6> Ich habe ein Gitlab-pages-Projekt erstellt, unter <em>Settings/ pages</em> steht aber eine kryptische URL der Form *.thishost.local:8090/*, die nicht funktioniert. </h6>
190
                                    <p> Dies ist die interne Repräsentation des Projektes auf unserem Server und ist somit nicht von außerhalb ereichbar. Um die tatsächliche, von außen erreichbare URL Ihrer Seite zu finden, gehen Sie in der Sitebar auf der linken Seite unter <em>CI / CD </em> auf <em>Jobs</em> und wählen den obersten Job mit den Namen <em> pages </em> aus. Im nun angezeigten Log finden Sie die Adresse, unter der Ihr Projekt ausgerollt wurde.</p>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
191
                                </li>
192
193
				<li>
                                    <h6> Ich möchte größere Projektdaten hochladen, wie groß darf mein Projekt maximal sein? </h6>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
194
                                    <p> Gegenwärtig ist die Gesamtgröße der ausgerollten Seite (Ordner <em> public </em>) auf 2 GB beschränkt.</p>
195
                                </li>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
196
197
198
199
200
201
202
203
204
205
206
207
208
209
                            </ul>
                        </p>
                    </div>
                     <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
                            role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
                </div>
            </div>
        </div>
        
        
        <div id="template_Text" style="margin-top: 10px;margin-bottom: 30px;">
            <div class="container" style="background-color: #ffffff;">
                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
                    <div class="col-lg-12">
Wolfgang Knopki's avatar
Wolfgang Knopki committed
210
                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages Template <em>pages-basic</em>  benutzen</strong></h2>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
211
212
213
214
                    </div>
                    <div class="col-auto" style="background-color: #ffffff;">
                        <p>
                            Wir stellen eine Vorlage für Projektwebseiten zur Verfügung.
215
                        </p>
216
217
218
219
                        <div class="help">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
Athanasios's avatar
Athanasios committed
220
                                        <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
221
222
223
                                        <small>Erste Schritte</small></a>
                                    </h3>
                                </div>
Athanasios's avatar
Athanasios committed
224
                                <div id="collapse3" class="card-body collapse">
225
226
227
228
229
230
231
232
233
234
235
236
                                    <p>
                                        Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
                                    </p>
                                    <ol>
                                        <li> Anpassen der Standardwerte in settings.js 
                                            <p><b> Wichtig: </b> Werden diese Werte nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler 
                                            </p>
                                            <p> 
                                                Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei. 
                                            </p>
                                            <img src="/img/help/select_settings.png" width="95%"/>
                                            <p>
Athanasios's avatar
Athanasios committed
237
                                                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.
238
                                            </p>
Athanasios's avatar
Athanasios committed
239
240
241
242
243
244
245
                                            <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.
246
                                            </p>
Athanasios's avatar
Athanasios committed
247
248
249
                                            <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).
250
                                            </p>
Athanasios's avatar
Athanasios committed
251
252
253
254
255
256
257
                                            <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.
258
                                            </p>
Athanasios's avatar
Athanasios committed
259
                                            <img src="/img/help/f_logos.png"/>
260
                                            <p>
Athanasios's avatar
Athanasios committed
261
262
263
264
                                                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.
265
                                            </p>
Athanasios's avatar
Athanasios committed
266
267
                                            <img src="/img/help/generic.png"/>

268
269
270
                                            <p>
                                                Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
                                            </p>
Athanasios's avatar
Athanasios committed
271
272
273

                                            <img src="/img/help/edit_settings.png" width="95%"/>

274
275
276
277
278
279
280
281
                                        </li>
                                    </ol>
                                </div>
                            </div>
                            <br/>
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
Athanasios's avatar
Athanasios committed
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
                                        <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">
307
308
309
                                        <small>Logo hinzufügen</small></a>
                                    </h3>
                                </div>
Athanasios's avatar
Athanasios committed
310
                                <div id="collapse5" class="card-body collapse">
Wolfgang Knopki's avatar
Wolfgang Knopki committed
311
                                    <p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen: 
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
                                        <ol>
                                            <li>
                                                Öffnen Sie den Ordner <em> public </em> 
                                            </li>
                                            <li>
                                                Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
                                                <img src="/img/help/publicplus.png" width="95%"/>
                                            </li>
                                            <li>
                                                Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
                                                <img src="/img/help/upload_logo.png" width="95%"/>
                                            </li>
                                            <li> 
                                                Öffnen Sie nun im Ordner <em> public </em> die Datei <em> settings.js </em> und editieren diese.
                                                <p>
                                                    In der Zeile mit <em>projektlogourl</em> schreiben Sie nun ./DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf <em> Commit changes </em> speichert die Datei.
                                                </p>
                                                <img src="/img/help/settings_logo.png" width="95%"/>
                                            </li>
                                            <li>
                                                Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule. 
                                            </li>
                                        </ol>
                                    </p>
                                </div>
                            </div>
                            <br/>
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
Athanasios's avatar
Athanasios committed
342
                                        <a class="collapsed" data-toggle="collapse" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
343
344
345
                                        <small>Neue Seite hinzufügen</small></a>
                                    </h3>
                                </div>
Athanasios's avatar
Athanasios committed
346
                                <div id="collapse6" class="card-body collapse">
347
348
349
                                    <p>
                                        Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
                                        <ol>
Athanasios's avatar
Athanasios committed
350
351
352
                                            <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>
353
354
355
356
357
358
359
                                            <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%"/>
                                            </li>
                                            <li>
                                                Klicken Sie dort auf <em> New File </em>
                                            </li>
Athanasios's avatar
Athanasios committed
360
                                            <li>Paste the text you copied from the template</li>
361
                                            <li>
Athanasios's avatar
Athanasios committed
362
                                                Geben Sie die Dateinamen index.html (<b> wichtig: </b> Endung .html)
363
364
365
366
367
368
369
370

                                                <img src="/img/help/editnewpage.png" width="95%"/>
                                            </li>
                                            <li>
                                                Nun können Sie noch den Inhalt der Seite anpassen. Wenn Sie mit dem Inhalt der Seite zufrieden sind, speichern Sie sie durch Klick auf <em> Commit changes </em>
                                            </li>
                                            <li>
                                                Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
Wolfgang Knopki's avatar
Wolfgang Knopki committed
371
                                                <p>https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/DATEINAME</p>
372
373
374
375
376
377
                                            </li> 
                                        </ol>
                                    </p>
                                </div>
                            </div>
                        </div>
378
379
380
                </div>
            </div>
        </div>
Wolfgang Knopki's avatar
Wolfgang Knopki committed
381
        
382
383
384
385
        <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
            <div class="row">
            </div>
       </div> 
386
387
388
389
390
391
392
393
394
395
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
</body>

</html>