docs: Updated page creation guide
git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@65 a672b425-5310-4d7a-af5c-997e18724b81
This commit is contained in:
parent
24ae3cfc7c
commit
007666369d
3 changed files with 130 additions and 101 deletions
docs
|
|
@ -4,3 +4,4 @@
|
|||
*.pdf
|
||||
*.synctex.gz
|
||||
*.toc
|
||||
*.lof
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
\documentclass[hidelinks,12pt,a4paper,numbers=enddot]{scrartcl}
|
||||
|
||||
\usepackage[margin=2cm]{geometry}
|
||||
\usepackage{hyperref}
|
||||
\usepackage{listings}
|
||||
|
||||
\title{How to make a content page with Jekyll}
|
||||
\author{Joey Bevilacqua}
|
||||
|
||||
\begin{document}
|
||||
|
||||
\maketitle
|
||||
|
||||
We are using Jekyll to build our website: we've told you this allows us to split
|
||||
styling from contents, but what does this actually mean?\\
|
||||
|
||||
The CSS team has worked to provide you templates to build your page upon.\\
|
||||
|
||||
Using a template is easy once you get familiar with jekyll.
|
||||
|
||||
\section{The template header}
|
||||
|
||||
The template header consist in a series of variables defined at the very beginning
|
||||
of the web page. These variables have values associated that will be used
|
||||
to generate a proper styling.\\
|
||||
|
||||
This is an example for a page with the following stuffs:
|
||||
|
||||
\begin{table}[h]
|
||||
\begin{tabular}{l l p{5cm}}
|
||||
\textbf{Variable} & \textbf{Example} & \textbf{Explaination}\\\hline
|
||||
layout & page & The general style of the page. Use "page"\\
|
||||
topic & The \textbf{ls} command & What the page is about\\
|
||||
Author & Claudio Maggioni & The main author of the page\\
|
||||
category\_title & Basic commands & Name of the category (Your team full name)\\
|
||||
Team & basic & The name of the directory this file is in\\
|
||||
Tags & list file directory find & List of words separated by spaces that are relevant to this. Think of these as hashtags without the \#\\
|
||||
\end{tabular}
|
||||
\end{table}
|
||||
|
||||
Example
|
||||
|
||||
\begin{lstlisting}[language=html]
|
||||
---
|
||||
layout: page
|
||||
category: Basic commands
|
||||
tags: directory list
|
||||
author: Claudio Maggioni
|
||||
title: LS
|
||||
---
|
||||
\end{lstlisting}
|
||||
|
||||
\section{Content}
|
||||
|
||||
The content comes right after the Template header
|
||||
Keep your content as simple as possible, also don't worry about having a long page.\\
|
||||
|
||||
\textbf{DO NOT} insert screenshots of your terminal or any other kind of screenshot. Use
|
||||
the code tags and eventually describe the results using text.\\
|
||||
|
||||
\textbf{DO NOT} use div and spans, nor use class, id or other styling attributes / options before
|
||||
talking with the CSS team. \\
|
||||
|
||||
Place the html files straight inside the team folder, no subfolders allowed.\\
|
||||
Name the html file using the command / topic you're talking about name.\\
|
||||
|
||||
|
||||
Example content
|
||||
|
||||
\begin{lstlisting}[language=html]
|
||||
<h1>The cd command</h1>
|
||||
|
||||
<p>The <b>ls</b> command is used to list a directory content or a file.<br>
|
||||
The name stands for <i>LiSt</i>.
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<p>The default ls command syntax is<br>
|
||||
|
||||
<code>
|
||||
ls [flags] [path]
|
||||
</code>
|
||||
|
||||
<br>
|
||||
|
||||
Where [flags] are the ls flags, read below for more info, and [path] is the (optional) path (absolute or relative).<br>
|
||||
If no path is provided the current directory is listed
|
||||
</p>
|
||||
|
||||
<h2>Flags<h2>
|
||||
|
||||
<p>Here are some of the most common ls flags
|
||||
|
||||
<ul>
|
||||
<li> <b>-a</b>: Includes the hidden files (those which name starts with ".")
|
||||
<li> <b>-l</b>: Lists with more information about the list file(s) </li>
|
||||
<li> .... </.li>
|
||||
</ul>
|
||||
\end{lstlisting}
|
||||
|
||||
\end{document}
|
||||
129
docs/page_creation/page_creation.tex
Normal file
129
docs/page_creation/page_creation.tex
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
\documentclass[hidelinks,12pt,a4paper,numbers=enddot]{scrartcl}
|
||||
|
||||
\usepackage[margin=2cm,bottom=3cm]{geometry}
|
||||
\usepackage{hyperref}
|
||||
\usepackage{listings}
|
||||
\usepackage{xcolor}
|
||||
\usepackage{lmodern}
|
||||
|
||||
\title{How to make a content page with Jekyll}
|
||||
\author{Joey Bevilacqua}
|
||||
|
||||
% listings configuration
|
||||
\lstset{
|
||||
basicstyle=\small\ttfamily,
|
||||
frame=shadowbox,
|
||||
rulesepcolor=\color{gray},
|
||||
columns=fullflexible,
|
||||
commentstyle=\color{gray},
|
||||
keywordstyle=\bfseries\color{red},
|
||||
escapeinside={\%*}{*)},
|
||||
aboveskip=2em,
|
||||
captionpos=b,
|
||||
abovecaptionskip=1em,
|
||||
belowcaptionskip=1em
|
||||
}
|
||||
|
||||
\begin{document}
|
||||
|
||||
\maketitle
|
||||
\tableofcontents
|
||||
\listoffigures
|
||||
\newpage
|
||||
|
||||
\section{Introduction}
|
||||
We are using Jekyll to build our website: we've told you this allows us to split
|
||||
styling from contents, but what does this actually mean?
|
||||
The CSS team has worked to provide you templates to build your page upon.
|
||||
Using a template is easy once you get familiar with \textit{Jekyll}.
|
||||
|
||||
\section{The template header}
|
||||
|
||||
The template header consist in a series of variables defined at the very beginning
|
||||
of the web page. These variables have values associated that will be used
|
||||
to generate a proper styling.
|
||||
|
||||
\paragraph{}
|
||||
This is an example for a page with the following stuff:
|
||||
|
||||
\begin{table}[h]
|
||||
\centering{
|
||||
\begin{tabular}{l l p{9cm}}
|
||||
\textbf{Variable} & \textbf{Example value} & \textbf{Explaination}\\\hline
|
||||
\texttt{layout} & page & The general style of the page. Use "page"\\
|
||||
\texttt{topic} & The \textbf{ls} command & What the page is about\\
|
||||
\texttt{author} & Claudio Maggioni & The main author of the page\\
|
||||
\texttt{category\_title} & Basic commands & Name of the category (Your team full name)\\
|
||||
\texttt{category} & basic & The name of the directory this file is in\\
|
||||
\texttt{tags} & list file directory find & List of words separated by spaces that are relevant to this (Think of these as hashtags without the \#)\\
|
||||
\end{tabular}
|
||||
}
|
||||
\end{table}
|
||||
|
||||
\begin{figure}[h]
|
||||
\begin{lstlisting}[language=html]
|
||||
---
|
||||
layout: page
|
||||
category_title: Basic commands
|
||||
category: basic
|
||||
tags: directory list
|
||||
author: Claudio Maggioni
|
||||
title: ls
|
||||
---
|
||||
\end{lstlisting}
|
||||
\caption{An example of a template header}
|
||||
\end{figure}
|
||||
|
||||
\section{Content}
|
||||
|
||||
\paragraph{}
|
||||
The content comes right after the template header.
|
||||
Keep your content as simple as possible, also don't worry about having a long page.
|
||||
|
||||
\subsection{Don'ts}
|
||||
\textbf{DO NOT} insert screenshots of your terminal or any other kind of screenshot
|
||||
unless you are a member of the Basic team trying to show how to open the shell. Use
|
||||
the code tags and eventually describe the results using text.
|
||||
|
||||
\paragraph{}
|
||||
\textbf{DO NOT} use \texttt{div} and \texttt{span}s, nor use \texttt{class=}, \texttt{id=}
|
||||
or other styling attributes or options before talking with the CSS team.
|
||||
|
||||
\subsection{File placement}
|
||||
Place the \texttt{html} files straight inside the team folder: the creation of subfolders is not
|
||||
allowed. Name the \texttt{html} file using the command or topic you're talking about name.
|
||||
|
||||
\begin{figure}[h]
|
||||
\begin{lstlisting}[language=html]
|
||||
<p>The <code>ls</code> command is used to list a directory content or a file.<br>
|
||||
The name stands for <i>LiSt</i>.
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<p>The default ls command syntax is:
|
||||
|
||||
<pre>
|
||||
ls [flags] [path]
|
||||
</pre>
|
||||
|
||||
Where [flags] are the ls flags, read below for more info,
|
||||
and [path] is the (optional) path (absolute or relative).
|
||||
If no path is provided the current directory is listed.
|
||||
</p>
|
||||
|
||||
<h2>Flags<h2>
|
||||
|
||||
<p>Here are some of the most common ls flags:
|
||||
|
||||
<ul>
|
||||
<li> <b>-a</b>: Includes the hidden files (those which name starts with ".") </li>
|
||||
<li> <b>-l</b>: Lists with more information about the list file(s) </li>
|
||||
<li> %*\ldots*) </li>
|
||||
</ul>
|
||||
|
||||
</p>
|
||||
\end{lstlisting}
|
||||
\caption{An example for the content of a page}
|
||||
\end{figure}
|
||||
|
||||
\end{document}
|
||||
Loading…
Reference in a new issue