Nail/fission-src
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove/Redirect out-of-date docs to fission doc site (#1061)

Browse Source
This commit is contained in:
Ta-Ching Chen
2019-01-17 16:29:15 +08:00
committed by GitHub
parent 273c6c002f
commit 5e1e8f85cd
238 changed files with 6 additions and 19153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Compiling.md
-52
View File
@@ -1,52 +0,0 @@
Compiling Fission
=================
[You only need to do this if you're making Fission changes; if you're
just deploying Fission, use fission.yaml which points to prebuilt
images.]
You'll need the `go` compiler and tools installed, along with the
[glide dependency management
tool](https://github.com/Masterminds/glide#install). You'll also need
docker for building images.
The server side is compiled as one binary ("fission-bundle") which
contains controller, poolmgr and router; it invokes the right one
based on command-line arguments.
To build fission-bundle: clone this repo to
`$GOPATH/src/github.com/fission/fission`, then from the top level
directory (if you want to build the image with the docker inside
minikube, you'll need to set the proper environment variables with
`eval $(minikube docker-env)`):
```
# Get dependencies
$ glide install -v
# Build fission server and an image
$ pushd fission-bundle
$ ./build.sh
```
You now need to build the docker image for fission. You can use
`push.sh` and push it to a docker hub account. But it's easiest to use
minikube and its built-in docker daemon:
```
$ eval $(minikube docker-env)
$ docker build -t minikube/fission-bundle .
```
Next, install fission with this image on your kubernetes cluster using the helm chart:
```
$ helm install --set "image=minikube/fission-bundle,imageTag=latest,pullPolicy=IfNotPresent,analytics=false" charts/fission-all
```
And if you're changing the CLI too, you can build it with:
```
# Build Fission CLI
$ cd fission && go install
```
Documentation/README.md
+4
View File
@@ -0,0 +1,4 @@
Fission Document
=================
* Please visit [here](https://docs.fission.io/) for fission documentation.
Documentation/TERMINOLOGY
-15
View File
@@ -1,15 +0,0 @@
_Function_: A fission function is something that's mapped to a
_trigger_ and run on demand. Though we call it a "function", this is
a bit imprecise, since it's actually a module with an function as an
entry point -- it doesn't have to be just one function.
_Trigger_: Triggers are what cause functions to be called. For
example, an HTTP trigger causes functions to be called on HTTP
requests. Kubernetes Watch triggers cause functions to be called when
a Kubernetes watch changes. Future triggers will include message
queues, timers, storage systems, etc.
_Environments_: Environments are the language-specific parts of
Fission. Environment containers wrap the user's function and present
a common interface to the rest of the fission framework.
Documentation/docs-site/README.md
-11
View File
@@ -1,11 +0,0 @@
# Fission Documentation Website
## Development
* [Hugo Installation Guide](https://gohugo.io/getting-started/installing/)
* Local Preview
```
$ hugo server --buildDrafts --disableFastRender
```
Documentation/docs-site/config.toml
-35
View File
@@ -1,35 +0,0 @@
baseURL = "http://fission.io/docs/0.6.1"
languageCode = "en-US"
defaultContentLanguage = "en"
title = "Fission: Serverless Functions for Kubernetes"
theme = "learn"
metaDataFormat = "yaml"
defaultContentLanguageInSubdir= true
[params]
editURL = "https://github.com/fission/fission/edit/master/Documentation/docs-site/content/"
description = "Documentation for Fission"
author = "Fission"
showVisitedLinks = false
themeVariant = "fission"
[outputs]
home = [ "HTML", "RSS", "JSON"]
[Languages]
[Languages.en]
title = "Serverless Functions for Kubernetes"
weight = 1
languageName = "English"
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-fw fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/fission/fission"
weight = 10
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-fw fa-bullhorn'></i> Credits"
url = "https://github.com/fission/fission/graphs/contributors"
weight = 11
Documentation/docs-site/content/_header.en.md
-1
View File
@@ -1 +0,0 @@
![fission](http://fission.io/img/fission-logo-whitebg.png)
Documentation/docs-site/content/_index.en.md
-99
View File
@@ -1,99 +0,0 @@
---
title: Fission
weight: 1
---
Fission: Serverless Functions for Kubernetes
============================================
[fission.io](http://fission.io) [@fissionio](http://twitter.com/fissionio)
Fission is a fast serverless framework for Kubernetes with a focus on
developer productivity and high performance.
Fission operates on _just the code_: Docker and Kubernetes are
abstracted away under normal operation, though you can use both to
extend Fission if you want to.
Fission is extensible to any language; the core is written in Go, and
language-specific parts are isolated in something called
_environments_ (more below). Fission currently supports NodeJS, Python, Ruby, Go,
PHP, Bash, and any Linux executable, with more languages coming soon.
### Performance: 100msec cold start
Fission maintains a pool of "warm" containers that each contain a
small dynamic loader. When a function is first called,
i.e. "cold-started", a running container is chosen and the function is
loaded. This pool is what makes Fission fast: cold-start latencies
are typically about 100msec.
### Kubernetes is the right place for Serverless
We're built on Kubernetes because we think any non-trivial app will
use a combination of serverless functions and more conventional
microservices, and Kubernetes is a great framework to bring these
together seamlessly.
Building on Kubernetes also means that anything you do for operations
on your Kubernetes cluster &mdash; such as monitoring or log
aggregation &mdash; also helps with ops on your Fission deployment.
Fission Concepts
----------------
A _function_ is a piece of code that follows the fission function
interface.
An _environment_ contains the language- and runtime-specific parts of
running a function.
The following environments are currently available:
| Environment | Image |
| ------------------------------------ | ------------------------- |
| Binary (for executables or scripts) | `fission/binary-env` |
| Go | `fission/go-env` |
| .NET | `fission/dotnet-env` |
| .NET 2.0 | `fission/dotnet20-env` |
| NodeJS (Alpine) | `fission/node-env` |
| NodeJS (Debian) | `fission/node-env-debian` |
| Perl | `fission/perl-env` |
| PHP 7 | `fission/php-env` |
| Python 3 | `fission/python-env` |
| Ruby | `fission/ruby-env` |
You can also extend environments or create entirely new
ones if you want. (An environment is essentially just a container
with a webserver and dynamic loader.)
A _trigger_ is something that maps an event to a function; Fission
supports HTTP routes as triggers today, with upcoming support for
other types of event triggers, such as timers and Kubernetes events.
Usage
-----
```bash
# Add the stock NodeJS env to your Fission deployment
$ fission env create --name nodejs --image fission/node-env
# A javascript one-liner that prints "hello world"
$ curl https://raw.githubusercontent.com/fission/fission/master/examples/nodejs/hello.js > hello.js
# Upload your function code to fission
$ fission function create --name hello --env nodejs --code hello.js
# Map GET /hello to your new function
$ fission route create --method GET --url /hello --function hello
# Run the function. This takes about 100msec the first time.
$ fission function test --name hello
Hello, world!
```
See the [examples](examples) directory for more.
Documentation/docs-site/content/concepts/_index.en.md
-11
View File
@@ -1,11 +0,0 @@
---
title: "Fission Concepts"
chapter: true
draft: false
weight: 30
---
# Fission Concepts
This is an overview of the few main concepts in Fission: Functions,
Environments, and Triggers.
Documentation/docs-site/content/concepts/environments.en.md
-24
View File
@@ -1,24 +0,0 @@
---
title: "Environments"
draft: false
weight: 32
---
An environment contains the language and runtime specific parts of a function. An environment is essentially a container with a webserver and a dynamic loader for the function code.
The following pre-built environments are currently available for use in Fission:
| Environment | Image |
| ------------------------------------ | ------------------------- |
| Binary (for executables or scripts) | `fission/binary-env` |
| Go | `fission/go-env` |
| .NET | `fission/dotnet-env` |
| .NET 2.0 | `fission/dotnet20-env` |
| NodeJS (Alpine) | `fission/node-env` |
| NodeJS (Debian) | `fission/node-env-debian` |
| Perl | `fission/perl-env` |
| PHP 7 | `fission/php-env` |
| Python 3 | `fission/python-env` |
| Ruby | `fission/ruby-env` |
To create custom environments you can extend one of the environments in the list or create your own environment from scratch.
Documentation/docs-site/content/concepts/executor.en.md
-39
View File
@@ -1,39 +0,0 @@
---
title: "Controlling Function Execution"
draft: false
weight: 33
---
# Executors
When you create a function, you can specify an executor for a function. An executor controls how function pods are created and what capabilities are available for that executor type.
## Pool-based executor
A pool based executor (Refered to as poolmgr) creates a pool of generic environment pods as soon as you create an environment. The pool size of initial "warm" containers can be configured based on user needs. These warm containers contain a small dynamic loader for loading the function. Resource requirements are specified at environment level and are inherited by specialized function pods.
Once you create a function and invoke it, one of pods from the pool is taken out and "specialized" and used for execution. This pod is used for subseqnent requests for that function. If there are no more requests for a certain idle duration, then this pod is cleaned up. If a new requests come after the earlier specialized pod was cleaned up, then a new pod is specialised from the pool and used for execution.
Poolmgr executortype is great for functions where lower latency is a requirement. Poolmgr executortype has certain limitations: for example, you can not autoscale them based on demand.
## New-deployment executor
New-Deployment executor (Newdeploy) creates a Kubernetes Deployment along with a Service and HorizontalPodAutoscaler for function execution. This enables autoscaling of function pods and load balancing the requests between pods. In future additional capabilities will be added for newdeploy executortype such as support for volume etc. In the new-deploy executor, resource requirements can be specified at the function level. These requirements override those specified in the environment.
Newdeploy executortype can be used for requests with no particular low-latency requirements, such as those invoked asynchronously, minscale can be set to zero. In this case the Kubernetes deployment and other objects will be created on first invocation of the function. Subsequent requests can be served by the same deployment. If there are no requests for certain duration then the idle objects are cleaned up. This mechanism ensures resource consumption only on demand and is a good fit for asynchronous requests.
For requests where latency requirements are stringent, a minscale greater than zero can be set. This essentially keeps a minscale number of pods ready when you create a function. When the function is invoked, there is no delay since the pod is already created. Also minscale ensures that the pods are not cleaned up even if the function is idle. This is great for functions where lower latency is more important than saving resource consumption when functions are idle.
### The latency vs. idle-cost tradeoff
The executors allow you as a user to decide between latency and a small idle cost tradeoff. Depending on the need you can choose one of the combinations which is optimal for your use case. In future, a more intelligent dispatch mechanism will enable more complex combinations of executors.
| Executor Type | Min Scale| Latency | Idle cost |
|:---------|:---------:|:---------:|:---------|
|Newdeploy|0|High|Very low - pods get cleaned up after idlle time|
|Newdeploy|>0|Low|Medium, Min Scale number of pods are always up|
|Poolmgr|0|Low|Low, pool of pods are always up|
### Autoscaling
The new deployment based executor provides autoscaling for functions based on CPU usage. In future custom metrics will be also supported for scaling the functions. You can set the intial and maximum CPU for a function and target CPU at which autoscaling will be trigerred. Autoscaling is useful for workloads where you expect intermittant spikes in workloads. It also enables optimal usage of resources to execute functions, by using a baseline capacity with minimum scale and ability to burst up to maximum scale based on spikes in demand.
Documentation/docs-site/content/concepts/functions.en.md
-12
View File
@@ -1,12 +0,0 @@
---
title: "Function"
draft: true
weight: 31
---
A function is a piece of code that will be invoked based on a [trigger](../trigger). The code follows the Fission interface. In practice, the function is only an entry point for execution and it can be backed by a larger program or module.
A function is registered with Fission through a CLI and associated with a trigger. A function can be created based on a single source file or a source archive or a deployment archive.
It is possible to associate and use Kubernetes secrets and configmaps with a function.
Functions also accept minimum and maximum CPU and memory to be assigned, the behaviour of which varies based on executor types which are discussed in greater detail [here](../executor)
Documentation/docs-site/content/concepts/package.en.md
-15
View File
@@ -1,15 +0,0 @@
---
title: "Builder and Packages"
draft: false
weight: 36
---
Most real world applications are more than a single file of code and typically have dependencies on libraries etc. Packages in fission solve three distinct problems:
1) Enable a mechanism to store more than one file as a single unit and use them with functions. This is done through a combination of deployment archive builder environment associated with the environment.
2) Provide a mechanism to build from source code and dependencies into a binary based on a build command and store it as an object. User should be able to use this built artifact with a function. This is achieved with a source archive and a builder environment.
3) Decouple the execution logic from the functions and thus enable reuse of same logic for multiple functions. This will enable user to run same logic with different functions having different runtime charateristics and executor types.
When you create a function with a single source file, fission internally creates a package and links it to a function. Creating a package explicitly gives more flexibility in some use cases as explained above.
Documentation/docs-site/content/concepts/trigger.en.md
-23
View File
@@ -1,23 +0,0 @@
---
title: "Trigger"
draft: false
weight: 34
---
Triggers are events that can invoke a [function](../function). Fission has three kinds of triggers that can be used to invoke functions.
## Http Trigger
HTTP triggers enable calling functions with HTTP requests. Supported methods are GET, POST, PUT, DELETE, HEAD and by default GET is used. URL pattern follow the gorilla/mux supported patterns.
## Time Trigger
If you want a function to be called at a periodic frequency then the time triggers are perfect for the use case. Time triggers follow cron like specifications and are invoked based on the cron schedule.
Time trigger based invocations are great for running scheduled jobs, periodic cleanup jobs, periodic polling based invocations etc.
## MQ Trigger
Message queue based trigger enables ability to listen on a topic and invoke a function for each message. You can optinally send a response to another topic. By default it is assumed that the messages in queue are in application/json format but you can specify otherwise while creating the trigger. Currently `nats-streaming` and `azure-storage-queue` are supported message queues supported.
MQ triggers are great for integrating various systems in a decoupled and asynchronous manner.
Documentation/docs-site/content/contributing/_index.en.md
-10
View File
@@ -1,10 +0,0 @@
---
title: "Contributing to Fission"
draft: false
weight: 50
chapter: true
---
# Contributing to Fission
### Development guide
Documentation/docs-site/content/contributing/compiling.en.md
-56
View File
@@ -1,56 +0,0 @@
---
title: "Compiling Fission"
date: 2017-09-07T20:10:05-07:00
draft: false
weight: 51
---
[You only need to do this if you're making Fission changes; if you're
just deploying Fission, use fission.yaml which points to prebuilt
images.]
You'll need the `go` compiler and tools installed, along with the
[glide dependency management
tool](https://github.com/Masterminds/glide#install). You'll also need
docker for building images.
The server side is compiled as one binary ("fission-bundle") which
contains controller, poolmgr and router; it invokes the right one
based on command-line arguments.
To build fission-bundle: clone this repo to
`$GOPATH/src/github.com/fission/fission`, then from the top level
directory (if you want to build the image with the docker inside
minikube, you'll need to set the proper environment variables with
`eval $(minikube docker-env)`):
```
# Get dependencies
$ glide install --strip-vendor
# Build fission server and an image
$ pushd fission-bundle
$ ./build.sh
```
You now need to build the docker image for fission. You can use
`push.sh` and push it to a docker hub account. But it's easiest to use
minikube and its built-in docker daemon:
```
$ eval $(minikube docker-env)
$ docker build -t minikube/fission-bundle .
```
Next, install fission with this image on your kubernetes cluster using the helm chart:
```
$ helm install --set "image=minikube/fission-bundle,pullPolicy=IfNotPresent,analytics=false" charts/fission-all
```
And if you're changing the CLI too, you can build it with:
```
# Build Fission CLI
$ cd fission && go install
```
Documentation/docs-site/content/installation/_index.en.md
-10
View File
@@ -1,10 +0,0 @@
---
title: "Installation Guide"
draft: false
weight: 20
chapter : true
---
# Installation
### Installing and upgrading Fission
Documentation/docs-site/content/installation/installation.en.md
-157
View File
@@ -1,157 +0,0 @@
---
title: "Installation Guide"
draft: false
weight: 20
---
Welcome! This guide will get you up and running with Fission on a
Kubernetes cluster.
### Cluster preliminaries
If you don't have a Kubernetes cluster, [here's a quick guide to set
one up](../kubernetessetup).
Let's ensure you have the Kubernetes CLI and Helm installed and
ready. If you already have helm, [skip ahead to the fission install](#install-fission).
#### Kubernetes CLI
Ensure you have the Kubernetes CLI.
You can get the Kubernetes CLI for OSX like this:
```sh
$ curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/darwin/amd64/kubectl && chmod +x kubectl && sudo mv kubectl /usr/local/bin
```
Or, for Linux:
```sh
$ curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl && chmod +x kubectl && sudo mv kubectl /usr/local/bin
```
Ensure you have access to a cluster; use kubectl to check your
Kubernetes version:
```sh
$ kubectl version
```
We need at least Kubernetes 1.6 (older versions may work, but we don't
test them).
#### Helm
Helm is an installer for Kubernetes. If you already use helm, [skip to
the next section](#install-fission).
First, you'll need the helm CLI:
On __OS X__:
```sh
$ curl -LO https://storage.googleapis.com/kubernetes-helm/helm-v2.7.0-darwin-amd64.tar.gz
$ tar xzf helm-v2.7.0-darwin-amd64.tar.gz
$ mv darwin-amd64/helm /usr/local/bin
```
On __Linux__:
```sh
$ curl -LO https://storage.googleapis.com/kubernetes-helm/helm-v2.7.0-linux-amd64.tar.gz
$ tar xzf helm-v2.7.0-linux-amd64.tar.gz
$ mv linux-amd64/helm /usr/local/bin
```
Next, install the Helm server on your Kubernetes cluster:
```sh
$ helm init
```
### Install Fission
#### Minikube
```sh
$ helm install --namespace fission --set serviceType=NodePort https://github.com/fission/fission/releases/download/0.6.0/fission-all-0.6.0.tgz
```
The serviceType variable allows configuring the type of Kubernetes
service outside the cluster. You can use `ClusterIP` if you don't
want to expose anything outside the cluster.
#### Cloud hosted clusters (GKE, AWS, Azure etc.)
```sh
$ helm install --namespace fission https://github.com/fission/fission/releases/download/0.6.0/fission-all-0.6.0.tgz
```
#### Minimal version
The fission-all helm chart installs a full set of services including
the NATS message queue, influxDB for logs, etc. If you want a more
minimal setup, you can install the fission-core chart instead:
```sh
$ helm install --namespace fission https://github.com/fission/fission/releases/download/0.6.0/fission-core-0.6.0.tgz
```
### Install the Fission CLI
#### OS X
Get the CLI binary for Mac:
```sh
$ curl -Lo fission https://github.com/fission/fission/releases/download/0.6.0/fission-cli-osx && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Linux
```sh
$ curl -Lo fission https://github.com/fission/fission/releases/download/0.6.0/fission-cli-linux && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Windows
For Windows, you can use the linux binary on WSL. Or you can download
this windows executable: [fission.exe](https://github.com/fission/fission/releases/download/0.6.0/fission-cli-windows.exe)
### Run an example
Finally, you're ready to use Fission!
```sh
$ fission env create --name nodejs --image fission/node-env:0.6.0
$ curl -LO https://raw.githubusercontent.com/fission/fission/master/examples/nodejs/hello.js
$ fission function create --name hello --env nodejs --code hello.js
$ fission function test --name hello
Hello, world!
```
For a compiled language like Go:
```sh
$ fission env create --name go --image fission/go-env:0.6.0 --builder fission/go-builder:0.6.0
$ curl -LO https://raw.githubusercontent.com/fission/fission/master/examples/go/hello.go
$ fission function create --name gohello --env go --src hello.go --entrypoint Handler
$ fission function test --name gohello
Hello, world!
```
### What's next?
If something went wrong, we'd love to help -- please [drop by the
slack channel](http://slack.fission.io) and ask for help.
Check out the
[examples](https://github.com/fission/fission/tree/master/examples)
for some example functions.
Documentation/docs-site/content/installation/kubernetessetup.en.md
-41
View File
@@ -1,41 +0,0 @@
---
title: "Kubernetes Quick Install"
draft: false
weight: 21
---
This is a quick guide to help you get started running Kubernetes on
your laptop (or on the cloud).
(This isn't meant as a production Kuberenetes guide; it's merely
intended to give you something quickly so you can try Fission on it.)
## Minikube
Minikube is the usual way to run Kubernetes on your laptop:
### Install and start Kubernetes on OSX:
```
$ curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/darwin/amd64/kubectl && chmod +x kubectl && sudo mv kubectl /usr/local/bin
$ curl -Lo minikube https://storage.googleapis.com/minikube/releases/v0.16.0/minikube-darwin-amd64 && chmod +x minikube && sudo mv minikube /usr/local/bin/
$ minikube start
```
### Or, install and start Kubernetes on Linux:
```
$ curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl && chmod +x kubectl && sudo mv kubectl /usr/local/bin
$ curl -Lo minikube https://storage.googleapis.com/minikube/releases/v0.16.0/minikube-linux-amd64 && chmod +x minikube && sudo mv minikube /usr/local/bin/
$ minikube start
```
## Google Container Engine
Alternatively, you can use [Google Container Engine's](https://cloud.google.com/container-engine/) free trial to
get a 3-node cluster. Hop over to [Google Cloud](https://cloud.google.com/container-engine/) to set that up.
Documentation/docs-site/content/installation/releasenotes.en.md
-53
View File
@@ -1,53 +0,0 @@
---
title: "Release notes"
draft: false
weight: 22
---
- The fission team is on http://slack.fission.io if you have any questions.
### 0.4.0
- This release is compatible with Kubernetes 1.7 onwards.
- We switched from ThirdPartyResources to CustomResourceDefinitions. ThirdPartyResources are removed in Kubernetes 1.8, so upgrade with caution, using the upgrade guide below.
- Upgrade guides:
- [Upgrade guide from 0.3.0](../upgrade/upgrade-from-v0.3)
- To upgrade from 0.2.1, please upgrade to 0.3.0 first, following the upgrade guide in the 0.3.0 release.
### 0.3.0
Note: This release is incompatible with Kubernetes 1.8 (Because it uses ThirdPartyResources; see #314)
This release introduces:
- Build pipeline. Currently, only the Python environment supports this.
- Workflow engine support (compatible with fission-workflows 0.1.1)
### v0.2.1
Lots of big changes in this release!
- Most importantly, the API has changed a lot. We switched to Kubernetes
ThirdPartyResources, and improved various pieces of the API to support
new environments.
- The old API was too different from widely used Kubernetes patterns,
and so we decided to fully break compatibility for this release. We're still in
alpha, so you should expect the occasional API breakage; we'll be
better at preserving compatibility once we reach beta.
- The CLI is still compatible. Environments are also still compatible --
environment images that worked before continue to work.
- We're creating an upgrade tool to help migrate; if you're upgrading
v0.1.0 and can't do a fresh install, wait for the upgrade tool.
- We now use Helm for installation instead of a set of YAML files.
- The Fission "controller" is now stateless. Fission's etcd deployment
is removed, since Fission stores state in ThirdPartyResources. Large
function files are stored in a new function storage service, which
uses a persistent volume.
- And, we've started a new docs site; for now it's just the installation
and upgrade guides, but we'll be writing more docs soon.
Documentation/docs-site/content/installation/upgrade/_index.en.md
-13
View File
@@ -1,13 +0,0 @@
---
title: "Upgrade"
weight: 30
---
### From v0.4.x to v0.5.0
* [Upgrade guide](upgrade-from-v0.4)
### From v0.3 to v0.4.x
* [Upgrade guide](upgrade-from-v0.3)
### From v0.1 to v0.2.x
* [Upgrade guide](upgrade-from-v0.1)
Documentation/docs-site/content/installation/upgrade/upgrade-from-v0.1.en.md
-117
View File
@@ -1,117 +0,0 @@
---
title: "Upgrading from v0.1 to v0.2.x"
draft: false
weight: 31
---
## TL;DR
The Fission API has changed significantly in this version. The new API is incompatible with the
old one. The CLI is compatible; if you wrote scripts using it, those should still work.
Below we describe a tool for migrating your state from your old install to the new one.
While this upgrade is going to be disruptive, we're going to do our best to make sure future
upgrades aren't as bad.
## Why is this so complicated?
For a couple of reasons, we wanted to switch to using Kubernetes resources (ThirdPartyResources
now, CustomResources in the next release) for storing Fission state: (a) it would allow users to
avoid management of another database and (b) Fission would fit better into the Kubernetes
ecosystem.
Concurrently with this change, we were also trying to make our versioning approach less
opinionated, so it would work with other tools.
Thirdly, we were also enabling build pipelines (v2 Environments).
These changes, especially the difference in versioning approach, made maintaining compatiblity not
worth the effort at this early stage of the project.
All that said, we want you to know that we care a lot about compatiblity, and we'll be more
rigorous about it from the beta release onwards.
## How to Upgrade
1. Get the v0.2.1 CLI
1. Get the Fission state from your old install
1. Install Fission v0.2.1
1. Restore Fission state into your new install
1. Destroy your old install
### Get the new CLI
#### OS X
```
$ curl -Lo fission https://github.com/fission/fission/releases/download/v0.2.1-rc/fission-cli-osx && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Linux
```
$ curl -Lo fission https://github.com/fission/fission/releases/download/v0.2.1-rc/fission-cli-linux && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Windows
For Windows, you can use the linux binary on WSL. Or you can download
this windows executable: [fission.exe](https://github.com/fission/fission/releases/download/v0.2.1-rc/fission-cli-windows.exe)
### Get Fission state from v0.1 install
```
fission --server <your V1 server> upgrade dump --file state.json
```
You can skip the --server argument if you have the environment
variable `$FISSION_URL` set to point at a v0.1 Fission server.
This will create a JSON file with all your fission state in the
current directory.
### Install the new version
Read the [install guide](../install). You can follow all of it, except that you will need to
ensure your two installs don't conflict. To do that, use separate namespaces and ensure nodeports
don't conflict. Install with a command similar to this:
```
helm install fission-all --namespace fission2 --set controllerPort=31303,routerPort=31304,natsStreamingPort=31305,functionNamespace=fission2-function
```
This installs fission in the `fission2` namespace and runs functions
in the `fission2-function` namespace.
### Restore your Fission state into Fission v0.2.1
```
fission upgrade restore --file state.json
```
This commands needs $FISSION_URL set to point to new fission installation.
It uses the file created in the first step. It doesn't modify state.json.
(Note that you can run this restore on any cluster; it doesn't have the be the same kubernetes
cluster as your old install.)
### Verify
How exactly you do this is up to you! But, at a minimum, run `fission
fn list` to check that all the functions you expect are there.
### Switch over
If you had exposed fission's router to the outside world, switch over to using the new install's router.
### Destroy your old install
Once you're no longer using the old install, you can destroy it by
deleting the namespaces that was installed in.
```
kubectl delete namespace fission fission-function
```
Documentation/docs-site/content/installation/upgrade/upgrade-from-v0.3.en.md
-131
View File
@@ -1,131 +0,0 @@
---
title: "Upgrading from v0.3 to v0.4.x"
draft: false
weight: 32
---
## Introduction
Kubernetes ThirdPartyResources ("TPR") are replaced by
CustomResourceDefinitions ("CRD"). TPRs have been deprecated and are
removed in Kubernetes 1.8.
Since Fission stores state in TPRs, we need to migrate this state from
TPRs to CRDs while upgrading.
Follow the instructions below if you're upgrading a Fission 0.2.1 or
0.3.0 cluster to 0.4. If you're using a pre-0.2 Fission cluster, use
the [upgrade guide from 0.1 to 0.2]() and then upgrade to 0.4.0.
## How to Upgrade
1. Get the 0.4.0 CLI
2. Get the Fission state from v0.3 install
3. Upgrade to Fission 0.4.0
4. Upgrade Kubernetes cluster version to 1.7.x or higher
5. Remove all TPR definition (for Kubernetes 1.7.x)
6. Restore Fission state into CRDs
### Get the new CLI
#### OS X
```
$ curl -Lo fission https://github.com/fission/fission/releases/download/0.4.0/fission-cli-osx && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Linux
```
$ curl -Lo fission https://github.com/fission/fission/releases/download/0.4.0/fission-cli-linux && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Windows
For Windows, you can use the linux binary on WSL. Or you can download
this windows executable: [fission.exe](https://github.com/fission/fission/releases/download/0.4.0/fission-cli-windows.exe)
### Get Fission state from v0.3 install
```
fission --server <your v0.3 server> tpr2crd dump --file state.json
```
You can skip the --server argument if you have the environment
variable `$FISSION_URL` set to point at a v0.3 Fission server.
This will create a JSON file with all your fission state in the
current directory.
### Upgrade to Fission 0.4.0
Upgrade fission with a command similar to this:
```
helm upgrade fission-all --namespace fission
```
### Upgrade Kubernetes cluster version
Since CustomResource is only supported on Kubernetes v1.7+ and higher, please make sure
that you upgrade to the right version that supports CustomResource.
### Remove all TPR definition (for Kubernetes 1.7.x)
** NOTICE **: This step will remove TPR definition from your kubernetes cluster. Please make sure that you dump all TPRs at the second step!
Though Kubernetes will migrate TPRs to CRDs automatically when TPR definition is deleted if the same name CRD exists. We still need to make sure that there is no resource gets lost during the migration. Also, since we changed the capitalization of some CRDs to CamelCase (e.g. Httptrigger -> HTTPTrigger), we need to recreate those resources by ourselves.
```
fission tpr2crd delete
```
### Restore your Fission state into Fission 0.4.0
```
fission tpr2crd restore --file state.json
```
This commands needs `$FISSION_URL` set to point to new fission installation.
It uses the file created in the first step. It doesn't modify state.json.
(Note that you can run this restore on any cluster; it doesn't have the be the same kubernetes
cluster as your old install.)
### Verify
Let's check the migration result, first run following command to check CRD established state.
```
kubectl get crd -o 'custom-columns=NAME:{.metadata.name},ESTABLISHED:{.status.conditions[?(@.type=="Established")].status}'
```
The output should be like this
```
NAME ESTABLISHED
environments.fission.io True
functions.fission.io True
httptriggers.fission.io True
kuberneteswatchtriggers.fission.io True
messagequeuetriggers.fission.io True
packages.fission.io True
timetriggers.fission.io True
```
And check that CRD resources you expect are there.
```
COMMAND:
fission [resource] list
RESOURCES:
environments
functions
httptriggers
kuberneteswatchtriggers
messagequeuetriggers
packages
timetriggers
```
Documentation/docs-site/content/installation/upgrade/upgrade-from-v0.4.en.md
-43
View File
@@ -1,43 +0,0 @@
---
title: "Upgrading from v0.4.x to v0.5.0"
draft: false
weight: 33
---
## How to Upgrade
1. Get the 0.5.0 CLI
2. Upgrade to Fission 0.5.0
### Get the new CLI
#### OS X
``` bash
$ curl -Lo fission https://github.com/fission/fission/releases/download/0.5.0/fission-cli-osx && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Linux
``` bash
$ curl -Lo fission https://github.com/fission/fission/releases/download/0.5.0/fission-cli-linux && chmod +x fission && sudo mv fission /usr/local/bin/
```
#### Windows
For Windows, you can use the linux binary on WSL. Or you can download
this windows executable: [fission.exe](https://github.com/fission/fission/releases/download/0.5.0/fission-cli-windows.exe)
### Upgrade to Fission 0.5.0
Upgrade fission with a command similar to this:
``` bash
# find the release want to upgrade
$ helm list
# upgrade to 0.5.0
$ helm upgrade <release_name> https://github.com/fission/fission/releases/download/0.5.0/fission-all-0.5.0.tgz
```
Documentation/docs-site/content/tutorial/enabling-istio-on-fission.md
-203
View File
@@ -1,203 +0,0 @@
---
title: "Enabling Istio on Fission"
draft: false
weight: 42
---
This is the very first step for fission to integrate with [Istio](https://istio.io/). For those interested in trying to integrate fission with istio, following is the set up tutorial.
## Test Environment
* Google Kubernetes Engine: 1.9.2-gke.1
## Set Up
### Create Kubernetes v1.9+ cluster
Enable both RBAC & initializer features on kubernetes cluster.
``` bash
$ export ZONE=<zone name>
$ gcloud container clusters create istio-demo-1 \
--machine-type=n1-standard-2 \
--num-nodes=1 \
--no-enable-legacy-authorization \
--zone=$ZONE \
--cluster-version=1.9.2-gke.1
```
### Grant cluster admin permissions
Grant admin permission for `system:serviceaccount:kube-system:default` and current user.
``` bash
# for system:serviceaccount:kube-system:default
$ kubectl create clusterrolebinding --user system:serviceaccount:kube-system:default kube-system-cluster-admin --clusterrole cluster-admin
# for current user
$ kubectl create clusterrolebinding cluster-admin-binding --clusterrole=cluster-admin --user=$(gcloud config get-value core/account)
```
### Set up Istio environment
For Istio 0.5.1 you can follow the installation tutorial below. Also, you can follow the latest installation guides on Istio official site: [Quick Start](https://istio.io/docs/setup/kubernetes/quick-start.html) and [Sidecar Injection](https://istio.io/docs/setup/kubernetes/sidecar-injection.html).
Download Istio 0.5.1
``` bash
$ export ISTIO_VERSION=0.5.1
$ curl -L https://git.io/getLatestIstio | sh -
$ cd istio-0.5.1
```
Apply istio related YAML files
``` bash
$ kubectl apply -f install/kubernetes/istio.yaml
```
Automatic sidecar injection
``` bash
$ kubectl api-versions | grep admissionregistration
admissionregistration.k8s.io/v1beta1
```
Installing the webhook
Download the missing files in istio release 0.5.1
``` bash
$ wget https://raw.githubusercontent.com/istio/istio/master/install/kubernetes/webhook-create-signed-cert.sh -P install/kubernetes/
$ wget https://raw.githubusercontent.com/istio/istio/master/install/kubernetes/webhook-patch-ca-bundle.sh -P install/kubernetes/
$ chmod +x install/kubernetes/webhook-create-signed-cert.sh install/kubernetes/webhook-patch-ca-bundle.sh
```
Install the sidecar injection configmap.
``` bash
$ ./install/kubernetes/webhook-create-signed-cert.sh \
--service istio-sidecar-injector \
--namespace istio-system \
--secret sidecar-injector-certs
$ kubectl apply -f install/kubernetes/istio-sidecar-injector-configmap-release.yaml
```
Install the sidecar injector
``` bash
$ cat install/kubernetes/istio-sidecar-injector.yaml | \
./install/kubernetes/webhook-patch-ca-bundle.sh > \
install/kubernetes/istio-sidecar-injector-with-ca-bundle.yaml
$ kubectl apply -f install/kubernetes/istio-sidecar-injector-with-ca-bundle.yaml
# Check sidecar injector status
$ kubectl -n istio-system get deployment -listio=sidecar-injector
NAME DESIRED CURRENT UP-TO-DATE AVAILABLE AGE
istio-sidecar-injector 1 1 1 1 26s
```
### Install fission
Set default namespace for helm installation, here we use `fission` as example namespace.
``` bash
$ export FISSION_NAMESPACE=fission
```
Create namespace & add label for Istio sidecar injection.
``` bash
$ kubectl create namespace $FISSION_NAMESPACE
$ kubectl label namespace $FISSION_NAMESPACE istio-injection=enabled
$ kubectl config set-context $(kubectl config current-context) --namespace=$FISSION_NAMESPACE
```
Follow the [installation guide](../../installation/) to install fission with flag `enableIstio` true.
``` bash
$ helm install --namespace $FISSION_NAMESPACE --set enableIstio=true --name istio-demo <chart-fission-all-url>
```
### Create a function
Set environment
``` bash
$ export FISSION_URL=http://$(kubectl --namespace fission get svc controller -o=jsonpath='{..ip}')
$ export FISSION_ROUTER=$(kubectl --namespace fission get svc router -o=jsonpath='{..ip}')
```
Let's create a simple function with Node.js.
``` js
# hello.js
module.exports = async function(context) {
console.log(context.request.headers);
return {
status: 200,
body: "Hello, World!\n"
};
}
```
Create environment
``` bash
$ fission env create --name nodejs --image fission/node-env:latest
```
Create function
``` bash
$ fission fn create --name h1 --env nodejs --code hello.js --method GET
```
Create route
``` bash
$ fission route create --method GET --url /h1 --function h1
```
Access function
``` bash
$ curl http://$FISSION_ROUTER/h1
Hello, World!
```
### Install Istio Add-ons
* Prometheus
``` bash
$ kubectl apply -f istio-0.5.1/install/kubernetes/addons/prometheus.yaml
$ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod -l app=prometheus -o jsonpath='{.items[0].metadata.name}') 9090:9090
```
Web Link: [http://127.0.0.1:9090/graph](http://127.0.0.1:9090/graph)
* Grafana
Please install Prometheus first.
![grafana min](https://user-images.githubusercontent.com/202578/33528556-639493e2-d89d-11e7-9768-976fb9208646.png)
``` bash
$ kubectl apply -f istio-0.5.1/install/kubernetes/addons/grafana.yaml
$ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod -l app=grafana -o jsonpath='{.items[0].metadata.name}') 3000:3000
```
Web Link: [http://127.0.0.1:3000/dashboard/db/istio-dashboard](http://127.0.0.1:3000/dashboard/db/istio-dashboard)
* Jaegar
![jaeger min](https://user-images.githubusercontent.com/202578/33528554-572c4f28-d89d-11e7-8a01-1543fc2aa064.png)
``` bash
$ kubectl apply -n istio-system -f https://raw.githubusercontent.com/jaegertracing/jaeger-kubernetes/master/all-in-one/jaeger-all-in-one-template.yml
$ kubectl port-forward -n istio-system $(kubectl get pod -n istio-system -l app=jaeger -o jsonpath='{.items[0].metadata.name}') 16686:16686
```
Web Link: [http://localhost:16686](http://localhost:16686)
Documentation/docs-site/content/usage/_index.en.md
-10
View File
@@ -1,10 +0,0 @@
---
title: "Using Fission"
chapter: true
draft: false
weight: 40
---
# Using Fission
### Usage guides, tutorials and examples
Documentation/docs-site/content/usage/access-secret-cfgmap-in-function.md
-120
View File
@@ -1,120 +0,0 @@
---
title: "Accessing Secrets in Functions"
draft: false
weight: 47
---
Functions can access Kubernetes
[Secrets](https://kubernetes.io/docs/concepts/configuration/secret/)
and
[ConfigMaps](https://kubernetes.io/docs/concepts/storage/volumes/#configmap).
Use secrets for things like API keys, authentication tokens, and so
on.
Use config maps for any other configuration that doesn't need to be a
secret.
### Create A Secret or a ConfigMap
You can create a Secret or ConfigMap with the Kubernetes CLI:
``` bash
$ kubectl -n default create secret generic my-secret --from-literal=TEST_KEY="TESTVALUE"
$ kubectl -n default create configmap my-configmap --from-literal=TEST_KEY="TESTVALUE"
```
Or, use `kubectl create -f <filename.yaml>` to create these from a YAML file.
``` yaml
apiVersion: v1
kind: Secret
metadata:
namespace: default
name: my-secret
data:
TEST_KEY: VEVTVFZBTFVF # value after base64 encode
type: Opaque
---
apiVersion: v1
kind: ConfigMap
metadata:
namespace: default
name: my-configmap
data:
TEST_KEY: TESTVALUE
```
### Accessing Secrets and ConfigMaps
Secrets and configmaps are accessed similarly. Each secret or
configmap is a set of key value pairs. Fission sets these up as files
you can read from your function.
``` bash
# Secret path
/secrets/<namespace>/<name>/<key>
# ConfigMap path
/configs/<namespace>/<name>/<key>
```
From the previous example, the paths are:
``` bash
# secret my-secret
/secrets/default/my-secret/TEST_KEY
# confimap my-configmap
/configs/default/my-configmap/TEST_KEY
```
Now, let's create a simple python function (leaker.py) that returns
the value of Secret `my-secret` and ConfigMap `my-configmap`.
``` python
# leaker.py
def main():
path = "/configs/default/my-configmap/TEST_KEY"
f = open(path, "r")
config = f.read()
path = "/secrets/default/my-secret/TEST_KEY"
f = open(path, "r")
secret = f.read()
msg = "ConfigMap: %s\nSecret: %s" % (config, secret)
return msg, 200
```
Create an environment and a function:
``` bash
# create python env
$ fission env create --name python --image fission/python-env
# create function named "leaker"
$ fission fn create --name leaker --env python --code leaker.py --secret my-secret --configmap my-configmap
```
Run the function, and the output should look like this:
``` bash
$ fission function test --name leaker
ConfigMap: TESTVALUE
Secret: TESTVALUE
```
{{% notice note %}}
If the Secret or ConfigMap value is updated, the function may
not get the updated value for some time; it may get a cached older
value.
{{% /notice %}}
Documentation/docs-site/content/usage/environments.en.md
-37
View File
@@ -1,37 +0,0 @@
---
title: "Environment"
draft: false
weight: 42
---
### Create an environment
You can create an environment on your cluster from an image for that language. Optionally, you can specify CPU and memory resource limits. You can also specify the number of initially pre-warmed pods, which is called the poolsize.
```
$ fission env create --name node --image fission/node-env:0.4.0 --mincpu 40 --maxcpu 80 --minmemory 64 --maxmemory 128 --poolsize 4
```
In case of pool based executor, the resources specified for environment are used for function pod as well. In case of new deployment executor, you can override the resources when you create a function.
### Using a builder
When you create an environment, you can specify a builder image and builder command which will be used for building from source code. You can override the build command when creating a function. For more details on builder and packages you should check out examples in [Functions](../functions) and [packages](../package)
```
$ fission env create --name python --image fission/python-env:latest --builder fission/python-builder:latest
```
### Viewing environment information
You can list the environments or view information of an individual environment:
```
$ fission env list
NAME UID IMAGE POOLSIZE MINCPU MAXCPU MINMEMORY MAXMEMORY
node ac84d62e-001f-11e8-85c9-42010aa00010 fission/node-env:0.4.0 4 40m 80m 64Mi 128Mi
$ fission env get --name node
NAME UID IMAGE
node ac84d62e-001f-11e8-85c9-42010aa00010 fission/node-env:0.4.0
```
Documentation/docs-site/content/usage/executor.en.md
-86
View File
@@ -1,86 +0,0 @@
---
title: "Controlling Function Execution"
draft: false
weight: 43
---
### Autoscaling
Let's create a function to demonstrate the autoscaling behaviour in Fission. We create a simple function which outputs "Hello World" in using NodeJS. We have kept the CPU request and limit purposefully low to simulate the load and also kept the target CPU percent to 50%.
```
$ fission fn create --name hello --env node --code hello.js --mincpu 10 --maxcpu 40 --minmemory 64 --maxmemory 128 --minscale 1 --maxscale 6 --executortype newdeploy --targetcpu 50
function 'hello' created
```
Now let's use [hey](https://github.com/rakyll/hey) to generate the load with 250 concurrent and a total of 10000 requests:
```
$ hey -c 250 -n 10000 http://$FISSION_ROUTER/hello
Summary:
Total: 67.3535 secs
Slowest: 4.6192 secs
Fastest: 0.0177 secs
Average: 1.6464 secs
Requests/sec: 148.4704
Total data: 160000 bytes
Size/request: 16 bytes
Response time histogram:
0.018 [1] |
0.478 [486] |∎∎∎∎∎∎∎
0.938 [971] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎
1.398 [2686] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
1.858 [2326] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
2.318 [1641] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
2.779 [1157] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
3.239 [574] |∎∎∎∎∎∎∎∎∎
3.699 [120] |∎∎
4.159 [0] |
4.619 [38] |∎
Latency distribution:
10% in 0.7037 secs
25% in 1.1979 secs
50% in 1.5038 secs
75% in 2.1959 secs
90% in 2.6670 secs
95% in 2.8855 secs
99% in 3.4102 secs
Details (average, fastest, slowest):
DNS+dialup: 0.0058 secs, 0.0000 secs, 1.0853 secs
DNS-lookup: 0.0000 secs, 0.0000 secs, 0.0000 secs
req write: 0.0000 secs, 0.0000 secs, 0.0026 secs
resp wait: 1.6405 secs, 0.0176 secs, 3.6144 secs
resp read: 0.0001 secs, 0.0000 secs, 0.0056 secs
Status code distribution:
[200] 10000 responses
```
While the load is being generated, we will watch the HorizontalPodAutoscaler and how it scales over period of time. As you can notice, the number of pods is scaled from 1 to 3 after the load rises from 8 - 103%. After the load generator stops, it takes a few iterations to scale down from 3 to 1 pod.
```
$ kubectl -n fission-function get hpa -w
NAME REFERENCE TARGETS MINPODS MAXPODS REPLICAS AGE
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 1 3m
hello-qoxmothj Deployment/hello-qoxmothj 8% / 50% 1 6 1 3m
hello-qoxmothj Deployment/hello-qoxmothj 103% / 50% 1 6 1 4m
hello-qoxmothj Deployment/hello-qoxmothj 103% / 50% 1 6 3 5m
hello-qoxmothj Deployment/hello-qoxmothj 25% / 50% 1 6 3 5m
hello-qoxmothj Deployment/hello-qoxmothj 25% / 50% 1 6 3 6m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 6m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 7m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 7m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 8m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 8m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 9m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 9m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 10m
hello-qoxmothj Deployment/hello-qoxmothj 5% / 50% 1 6 3 10m
hello-qoxmothj Deployment/hello-qoxmothj 7% / 50% 1 6 1 11m
hello-qoxmothj Deployment/hello-qoxmothj 6% / 50% 1 6 1 11m
hello-qoxmothj Deployment/hello-qoxmothj 6% / 50% 1 6 1 12m
hello-qoxmothj Deployment/hello-qoxmothj 6% / 50% 1 6 1 12m
```
Documentation/docs-site/content/usage/functions.en.md
-271
View File
@@ -1,271 +0,0 @@
---
title: "Function"
draft: false
weight: 41
---
### Create a function
Before creating a function the environment should be created, we will assume that you have already created environment named `node`.
Let's create a simple code snippet in nodejs which will output Hello world:
``` js
module.exports = async function(context) {
return {
status: 200,
body: "Hello, world!\n"
};
}
```
Let's create a function based on pool based executor.
``` bash
$ fission fn create --name hello --code hello.js --env node --executortype poolmgr
```
### Access function
Before accessing function, we need to set the `FISSION_ROUTER` environment variable first. It is needed for the examples below to work
#### Minikube
If you're using minikube, use these commands:
``` bash
$ export FISSION_ROUTER=$(minikube ip):$(kubectl -n fission get svc router -o jsonpath='{...nodePort}')
```
#### Cloud setups
Save the external IP addresses of router services in FISSION_ROUTER.
Wait for services to get IP addresses (check this with `kubectl --namespace fission get svc`). Then:
``` bash
# AWS
$ export FISSION_ROUTER=$(kubectl --namespace fission get svc router -o=jsonpath='{..hostname}')
# GCP
$ export FISSION_ROUTER=$(kubectl --namespace fission get svc router -o=jsonpath='{..ip}')
```
#### Create a HTTP trigger
Let's create a route for the function which can be used for making HTTP requests:
``` bash
$ fission route create --function hello --url /hello
trigger '5327e9a7-6d87-4533-a4fb-c67f55b1e492' created
```
When you hit this function's URL , you get a response:
``` bash
$ curl http://$FISSION_ROUTER/hello
Hello, world!
```
Similarly you can create a new deployment executor type function and provide minmum and maximum scale for the function.
``` bash
$ fission fn create --name hello --code hello.js --env node --minscale 1 --maxscale 5 --executortype newdeploy
```
### View & update function source code
You can look at the source code associated with given function:
``` bash
$ fission fn get --name hello
module.exports = async function(context) {
return {
status: 200,
body: "Hello, world!\n"
};
}
```
Let's say you want to update the function to output "Hello Fission" instead of "Hello world", you can update the source file and update the source code for function:
``` bash
$ fission fn update --name hello --code ../hello.js
package 'hello-js-ku9s' updated
function 'hello' updated
```
Let's verify that the function now respond with a different output than earlier:
``` bash
$ curl http://$FISSION_ROUTER/hello
Hello, Fission!
```
### Test and debug function
You can directly test a function using test command. If the function call succeeds, it will output the function's response.
``` bash
$ fission fn test --name hello
Hello, Fission!
```
But if there is an error in function execution then the logs of function execution are displayed:
``` bash
$ fission fn test --name hello
Error calling function hello: 500 Internal server error (fission)
> fission-nodejs-runtime@0.1.0 start /usr/src/app
> node server.js
Codepath defaulting to /userfunc/user
Port defaulting to 8888
user code load error: SyntaxError: Unexpected token function
::ffff:10.8.1.181 - - [16/Feb/2018:08:44:33 +0000] "POST /specialize HTTP/1.1" 500 2 "-" "Go-http-client/1.1"
```
You can also look at function execution logs explicitly:
``` bash
$ fission fn logs --name hello
[2018-02-16 08:41:43 +0000 UTC] 2018/02/16 08:41:43 fetcher received fetch request and started downloading: {1 {hello-js-rqew default 0 0001-01-01 00:00:00 +0000 UTC <nil> <nil> map[] map[] [] nil [] } user [] []}
[2018-02-16 08:41:43 +0000 UTC] 2018/02/16 08:41:43 Successfully placed at /userfunc/user
[2018-02-16 08:41:43 +0000 UTC] 2018/02/16 08:41:43 Checking secrets/cfgmaps
[2018-02-16 08:41:43 +0000 UTC] 2018/02/16 08:41:43 Completed fetch request
[2018-02-16 08:41:43 +0000 UTC] 2018/02/16 08:41:43 elapsed time in fetch request = 89.844653ms
[2018-02-16 08:41:43 +0000 UTC] user code loaded in 0sec 4.235593ms
[2018-02-16 08:41:43 +0000 UTC] ::ffff:10.8.1.181 - - [16/Feb/2018:08:41:43 +0000] "POST /specialize HTTP/1.1" 202 - "-" "Go-http-client/1.1"
[2018-02-16 08:41:43 +0000 UTC] ::ffff:10.8.1.182 - - [16/Feb/2018:08:41:43 +0000] "GET / HTTP/1.1" 200 16 "-" "curl/7.54.0"
```
### Fission builds & compiled artifacts
Most real world functions will require more than one source files. It is also easier to simply provide source files and let Fission take care of building from source files. Fission provides first class support for building from source as well as using compiled artifacts to create functions.
You can attach the source/deployment packages to a function or explicitly create packages and use them across functions. Check documentation for [package](../package) for more information.
#### Building function from source
Let's take a simple python function which has dependency on a python pyyaml module. We can specify the dependencies in requirements.txt and a simple command to build from source. The tree structure of directory looks like:
``` bash
sourcepkg/
├── __init__.py
├── build.sh
├── requirements.txt
└── user.py
```
And the file contents:
``` bash
$ cat user.py
import sys
import yaml
document = """
a: 1
b:
c: 3
d: 4
"""
def main():
return yaml.dump(yaml.load(document))
$ cat requirements.txt
pyyaml
$ cat build.sh
#!/bin/sh
pip3 install -r ${SRC_PKG}/requirements.txt -t ${SRC_PKG} && cp -r ${SRC_PKG} ${DEPLOY_PKG}
```
You first need to create an environment with environment image and python-builder image specified:
``` bash
$ fission env create --name python --image fission/python-env:latest --builder fission/python-builder:latest --mincpu 40 --maxcpu 80 --minmemory 64 --maxmemory 128 --poolsize 2
```
Now let's zip the directory containing the source files and create a function with source package:
``` bash
$ zip -jr demo-src-pkg.zip sourcepkg/
adding: __init__.py (stored 0%)
adding: build.sh (deflated 24%)
adding: requirements.txt (stored 0%)
adding: user.py (deflated 25%)
$ fission fn create --name hellopy --env python --src demo-src-pkg.zip --entrypoint "user.main" --buildcmd "./build.sh"
function 'hellopy' created
$ fission route create --function hellopy --url /hellopy
```
Once we create the function, the build process is started. You can check logs of the builder in fission-builder namespace:
``` bash
$ kubectl -n fission-builder logs -f py3-4214348-59555d9bd8-ks7m4 builder
2018/02/16 11:44:21 Builder received request: {demo-src-pkg-zip-ninf-djtswo ./build.sh}
2018/02/16 11:44:21 Starting build...
=== Build Logs ===command=./build.sh
env=[PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin HOSTNAME=py3-4214348-59555d9bd8-ks7m4 PYTHON_4212095_PORT_8000_TCP_PROTO=tcp PY3_4214348_SERVICE_HOST=10.11.250.161 KUBERNETES_PORT=tcp://10.11.240.1:443 PYTHON_4212095_PORT=tcp://10.11.244.134:8000 PYTHON_4212095_PORT_8000_TCP=tcp://10.11.244.134:8000 PYTHON_4212095_PORT_8001_TCP_PROTO=tcp PYTHON_4212095_PORT_8001_TCP_ADDR=10.11.244.134 PY3_4214348_SERVICE_PORT=8000 PY3_4214348_SERVICE_PORT_BUILDER_PORT=8001 PY3_4214348_PORT_8001_TCP=tcp://10.11.250.161:8001 KUBERNETES_PORT_443_TCP_PORT=443 KUBERNETES_PORT_443_TCP_ADDR=10.11.240.1 PY3_4214348_SERVICE_PORT_FETCHER_PORT=8000 PY3_4214348_PORT_8000_TCP=tcp://10.11.250.161:8000 PY3_4214348_PORT_8001_TCP_PORT=8001 PYTHON_4212095_SERVICE_PORT_FETCHER_PORT=8000 PYTHON_4212095_PORT_8000_TCP_ADDR=10.11.244.134 KUBERNETES_SERVICE_HOST=10.11.240.1 PY3_4214348_PORT=tcp://10.11.250.161:8000 PYTHON_4212095_SERVICE_PORT_BUILDER_PORT=8001 PYTHON_4212095_PORT_8001_TCP=tcp://10.11.244.134:8001 PY3_4214348_PORT_8000_TCP_PROTO=tcp PY3_4214348_PORT_8000_TCP_PORT=8000 KUBERNETES_SERVICE_PORT_HTTPS=443 KUBERNETES_PORT_443_TCP=tcp://10.11.240.1:443 PYTHON_4212095_PORT_8001_TCP_PORT=8001 PY3_4214348_PORT_8000_TCP_ADDR=10.11.250.161 PY3_4214348_PORT_8001_TCP_PROTO=tcp KUBERNETES_SERVICE_PORT=443 PYTHON_4212095_SERVICE_PORT=8000 PYTHON_4212095_PORT_8000_TCP_PORT=8000 PY3_4214348_PORT_8001_TCP_ADDR=10.11.250.161 KUBERNETES_PORT_443_TCP_PROTO=tcp PYTHON_4212095_SERVICE_HOST=10.11.244.134 HOME=/root SRC_PKG=/packages/demo-src-pkg-zip-ninf-djtswo DEPLOY_PKG=/packages/demo-src-pkg-zip-ninf-djtswo-c40gfu]
Collecting pyyaml (from -r /packages/demo-src-pkg-zip-ninf-djtswo/requirements.txt (line 1))
Downloading PyYAML-3.12.tar.gz (253kB)
Installing collected packages: pyyaml
Running setup.py install for pyyaml: started
Running setup.py install for pyyaml: finished with status 'done'
Successfully installed pyyaml-3.12
==================
2018/02/16 11:44:24 elapsed time in build request = 3.460498847s
```
Once the build has succeeded, you can hit the function URL to test the function:
``` bash
$ curl http://$FISSION_ROUTER/hellopy
a: 1
b: {c: 3, d: 4}
```
#### Using compiled artifacts with Fission
In some cases you have a pre-built deployment package which you need to deploy to Fission. For this example let's use a simple python file as a deployment package but in practice it can be any other compiled package.
We will use a simple python file in a directory and turn it into a deployment package:
``` bash
$ cat testDir/hello.py
def main():
return "Hello, world!"
$zip -jr demo-deploy-pkg.zip testDir/
```
Let's use the deployment package to create a function and route and then test it.
``` bash
$ fission fn create --name hellopy --env python --deploy demo-deploy-pkg.zip --entrypoint "hello.main"
function 'hellopy' created
$ fission route create --function hellopy --url /hellopy
$ curl http://$FISSION_ROUTER/hellopy
Hello, world!
```
### View function information
You can retrieve metadata information of a single function or list all functions to look at basic information of functions:
``` bash
$ fission fn getmeta --name hello
NAME UID ENV
hello 34234b50-12f5-11e8-85c9-42010aa00010 node
$ fission fn list
NAME UID ENV EXECUTORTYPE MINSCALE MAXSCALE TARGETCPU
hello 34234b50-12f5-11e8-85c9-42010aa00010 node poolmgr 0 1 80
hello2 e37a46e3-12f4-11e8-85c9-42010aa00010 node newdeploy 1 5 80
```
Documentation/docs-site/content/usage/package.en.md
-130
View File
@@ -1,130 +0,0 @@
---
title: "Packaging source code"
draft: false
weight: 46
---
### Creating source package
Before you create a package, you need to create an environment with associated builder image:
```
$ fission env create --name pythonsrc --image fission/python-env:latest --builder fission/python-builder:latest --mincpu 40 --maxcpu 80 --minmemory 64 --maxmemory 128 --poolsize 2
environment 'pythonsrc' created
```
Let's take a simple python function which has dependency on a python pyyaml module. We can specify the dependencies in requirements.txt and a simple command to build from source. The tree structure of directory and contents of the file looks like:
```
sourcepkg/
├── __init__.py
├── build.sh
├── requirements.txt
└── user.py
```
And the file contents:
```
$ cat user.py
import sys
import yaml
document = """
a: 1
b:
c: 3
d: 4
"""
def main():
return yaml.dump(yaml.load(document))
$ cat requirements.txt
pyyaml
$ cat build.sh
#!/bin/sh
pip3 install -r ${SRC_PKG}/requirements.txt -t ${SRC_PKG} && cp -r ${SRC_PKG} ${DEPLOY_PKG}
$zip -jr demo-src-pkg.zip sourcepkg/
adding: __init__.py (stored 0%)
adding: build.sh (deflated 24%)
adding: requirements.txt (stored 0%)
adding: user.py (deflated 25%)
```
Using the source archive creared in previous step, you can create a package in Fission:
```
$ fission package create --sourcearchive demo-src-pkg.zip --env pythonsrc --buildcmd "./build.sh"
Package 'demo-src-pkg-zip-8lwt' created
```
Since we are working with source package, we provided the build command. Once you create the package, the build process will start and you can check the build logs by getting information of the package:
```
$ fission pkg info --name demo-src-pkg-zip-8lwt
Name: demo-src-pkg-zip-8lwt
Environment: pythonsrc
Status: succeeded
Build Logs:
Collecting pyyaml (from -r /packages/demo-src-pkg-zip-8lwt-v57qil/requirements.txt (line 1))
Using cached PyYAML-3.12.tar.gz
Installing collected packages: pyyaml
Running setup.py install for pyyaml: started
Running setup.py install for pyyaml: finished with status 'done'
Successfully installed pyyaml-3.12
```
Using the package above you can create the function. Since package already is associated with a source package, environment and build command, these will be ignored when creating a function. Only addition thing you will need to provide is the entrypoint. Assuming you hace created the route, the function should be reachable with successful output:
```
$ fission fn create --name srcpy --pkg demo-src-pkg-zip-8lwt --entrypoint "user.main"
function 'srcpy' created
$ curl http://$FISSION_ROUTER/srcpy
a: 1
b: {c: 3, d: 4}
```
### Creating deployment package
Before you create a package you need to create an environment with the builder image:
```
$ fission env create --name pythondeploy --image fission/python-env:latest --builder fission/python-builder:latest --mincpu 40 --maxcpu 80 --minmemory 64 --maxmemory 128 --poolsize 2
environment 'pythonsrc' created
```
We will use a simple Python example which outputs "Hello World!" in a directory to create a deployment archive:
```
$ cat testDir/hello.py
def main():
return "Hello, world!"
$zip -jr demo-deploy-pkg.zip testDir/
```
Using the archive and environments created previously, you can create a package:
```
$ fission package create --deployarchive demo-deploy-pkg.zip --env pythondeploy
Package 'demo-deploy-pkg-zip-whzl' created
```
Since it is a deployment archive, there is no need to build it, hence the build logs for the package will be empty:
```
$ fission package info --name demo-deploy-pkg-zip-whzl
Name: demo-deploy-pkg-zip-xlaw
Environment: pythondeploy2
Status: succeeded
Build Logs:
```
Finally you can create a function with the package and test the function:
```
$ fission fn create --name deploypy --pkg demo-deploy-pkg-zip-whzl --entrypoint "hello.main"
$curl http://$FISSION_ROUTER/deploypy
Hello, world!
```
Documentation/docs-site/content/usage/trigger.en.md
-53
View File
@@ -1,53 +0,0 @@
---
title: "Triggers"
draft: false
weight: 44
---
### Create a HTTP Trigger
You can create a HTTP trigger with default method (GET) for a function:
```
$ fission ht create --url /hello --function hello
trigger '94cd5163-30dd-4fb2-ab3c-794052f70841' created
```
### Create a Time Trigger
Time based triggers can be created with cron specifications:
```
$ fission tt create --name halfhourly --function hello --cron "0 30 * * *"
trigger 'halfhourly' created
```
Also a more friendly syntax such "every 1m" or "@hourly" can be used to create a time based trigger.
```
$ fission tt create --name minute --function hello --cron "@every 1m"
trigger 'minute' created
```
You can list time based triggers to inspect their associated function and cron specifications:
```
$ fission tt list
NAME CRON FUNCTION_NAME
halfhourly 0 30 * * * hello
minute @every 1m hello
```
### Create a Message Queue Trigger
A message queue trigger invokes a function based on messages from an
message queue. Currently, NATS and Azure Storage Queue are supported
queues. (Kafka support is under development.)
```
$ fission mqt create --name hellomsg --function hello --mqtype nats-streaming --topic newfile --resptopic newfileresponse
trigger 'hellomsg' created
```
You can list or update message queue triggers with `fission mqt list`,
or `fission mqt update`.
Documentation/docs-site/content/workflows/_index.en.md
-158
View File
@@ -1,158 +0,0 @@
---
title: "Fission Workflows"
draft: false
weight: 70
---
### Prerequisites
Fission Workflows requires the following components to be installed on your local machine:
- [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/)
- [helm](https://github.com/kubernetes/helm)
Fission Workflows is deployed on top of a Kubernetes cluster.
If you don't have a Kubernetes cluster, [here's a quick guide to set one up](../kubernetessetup).
It also requires a [Fission](https://github.com/fission/fission) deployment to be present on your Kubernetes cluster.
If you do not have a Fission deployment, follow [Fission's installation guide](../install).
**(Note that Fission Workflows 0.2.0 requires Fission 0.4.1 or higher, with the NATS component installed!)**
### Installing Fission Workflows
Fission Workflows is an add-on to Fission. You can install both
Fission and Fission Workflows using helm charts.
Assuming you have your Kubernetes cluster set up with a functioning deployment of Fission 0.4.1 or higher, run the following commands:
```bash
# If you haven't already, add the Fission charts repo
$ helm repo add fission-charts https://fission.github.io/fission-charts/
$ helm repo update
# Install Fission Workflows
$ helm install --wait -n fission-workflows fission-charts/fission-workflows --version 0.2.0
```
### Creating your first workflow
After installing Fission and Workflows, you're all set to run a simple
test workflow.
With the following code snippet you will be able to deploy and run a small workflow example:
```bash
# Fetch the required files, alternatively you could clone the fission-workflow repo
$ curl https://raw.githubusercontent.com/fission/fission-workflows/0.2.0/examples/whales/fortune.sh > fortune.sh
$ curl https://raw.githubusercontent.com/fission/fission-workflows/0.2.0/examples/whales/whalesay.sh > whalesay.sh
$ curl https://raw.githubusercontent.com/fission/fission-workflows/0.2.0/examples/whales/fortunewhale.wf.yaml > fortunewhale.wf.yaml
#
# Add binary environment and create two test functions on your Fission setup:
#
$ fission env create --name binary --image fission/binary-env
$ fission function create --name whalesay --env binary --deploy ./whalesay.sh
$ fission function create --name fortune --env binary --deploy ./fortune.sh
#
# Create a workflow that uses those two functions. A workflow is just
# a function that uses the "workflow" environment.
#
$ fission function create --name fortunewhale --env workflow --src ./fortunewhale.wf.yaml
#
# Map an HTTP GET to your new workflow function:
#
$ fission route create --method GET --url /fortunewhale --function fortunewhale
#
# Invoke the workflow with an HTTP request:
#
$ curl ${FISSION_ROUTER}/fortunewhale
```
This last command, the invocation of the workflow, should return a whale saying something wise
```
______________________________________
/ Anthony's Law of Force: \
| |
\ Don't force it; get a larger hammer. /
--------------------------------------
\
\
\
## .
## ## ## ==
## ## ## ## ## ===
/"""""""""""""""""\___/ ===
{ / ===-
\______ O __/
\ \ __/
\____\_______/
```
So what happened here?
Let's see what the workflow consists of (for example by running `cat fortunewhale.wf.yaml`):
```yaml
# This whale shows off a basic workflow that combines both Fission Functions (fortune, whalesay) and internal functions (noop)
apiVersion: 1
output: WhaleWithFortune
tasks:
InternalFuncShowoff:
run: noop
GenerateFortune:
run: fortune
requires:
- InternalFuncShowoff
WhaleWithFortune:
run: whalesay
inputs: "{$.Tasks.GenerateFortune.Output}"
requires:
- GenerateFortune
```
What you see is the [YAML](http://yaml.org/)-based workflow definition of the `fortunewhale` workflow.
A workflow consists of multiple tasks, which are steps that it needs to complete.
Each task has a unique identifier, such as `GenerateFortune`, a reference to a Fission function in the `run` field.
Optionally, it can contain `inputs` which allows you to specify inputs to the task,
as well as contain `requires` which allows you to specify which tasks need to complete before this task can start.
Finally, at the top you will find the `output` field, which specifies the task whose output is used as the workflow's output.
In this case, the `fortunewhale` workflow consists of a sequence of 3 tasks:
```
InternalFuncShowoff -> GenerateFortune -> WhaleWithFortune
```
First, it starts with `InternalFuncShowoff` by running `noop`, which is an *internal function* in the workflow engine.
Internal functions are run inside of the workflow engine, which makes them run much faster at the cost of expressiveness and scalability.
So typically, light-weight functions, such as logic or control flow operations, are good candidates to be used as internal functions.
Besides, a minimal set of predefined internal functions, you can define internal function - there is nothing special about them.
After `InternalFuncShowff` completes, the `GenerateFortune` task can start as its `requires` has been fulfilled.
It runs the `fortune` Fission function, which outputs a random piece of wisdom.
After `GenerateFortune` completes, the `WhaleWithFortune` task can start.
This task uses a javascript expression in its `inputs` to reference the output of the `GenerateFortune` task.
In the inputs of a task you can reference anything in the workflow, such as outputs, inputs, and task definitions, or just provide a constant value.
The workflow engine invokes the `whalesay` fission function with as input the piece of wisdom, which outputs the ASCI whale that wraps the phrase.
Finally, with all tasks completed, the workflow engine uses the top-level `output` field to fetch the output of the `WhaleWithFortune` and return it to the user.
As the workflow engine adheres to the Fission function specification, a Fission workflow is just another Fission Function.
This means that you could use this workflow as a function in the `run` in other workflows.
### What's next?
To learn more about the Fission Workflows system and its advanced concepts, see the [documentation on Github](https://github.com/fission/fission-workflows/tree/master/Docs).
Or, check out the [examples](https://github.com/fission/fission-workflows/tree/0.2.0/examples) for more example workflows.
If something went wrong, we'd love to help -- please [drop by the slack channel](http://slack.fission.io) and ask for help.
Documentation/docs-site/static/images/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

Documentation/docs-site/static/images/fission-logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

Documentation/docs-site/themes/learn/LICENSE.md
-22
View File
@@ -1,22 +0,0 @@
The MIT License (MIT)
Copyright (c) 2014 Grav
Copyright (c) 2016 MATHIEU CORNIC
Copyright (c) 2017 Valere JEANTET
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Documentation/docs-site/themes/learn/README.md
-53
View File
@@ -1,53 +0,0 @@
# Hugo Learn Theme
This repository contains a theme for [Hugo](https://gohugo.io/), based on great [Grav Learn Theme](http://learn.getgrav.org/).
Visit the [theme documentation](https://learn.netlify.com/en/) to see what is going on. It is actually built with this theme.
## Main features
- Automatic Search
- Multilingual mode
- Unlimited menu levels
- Automatic next/prev buttons to navigate through menu entries
- Image resizing, shadow…
- Attachments files
- List child pages
- Mermaid diagram (flowchart, sequence, gantt)
- Customizable look and feel and themes variants
- Buttons, Tip/Note/Info/Warning boxes, Expand
## Installation
Navigate to your themes folder in your Hugo site and use the following commands:
```
$ cd themes
$ git clone https://github.com/matcornic/hugo-theme-learn.git
```
Check that your Hugo version is minimum `0.25` with `hugo version`.
![Overview](https://github.com/matcornic/hugo-theme-learn/raw/master/images/tn.png)
## Usage
- [Visit the documentation](https://learn.netlify.com/en/)
## Download old versions (prior to 2.0.0)
If you need old version for compatibility purpose, either download [theme source code from releases](https://github.com/matcornic/hugo-theme-learn/releases) or use the right git tag. For example, with `1.1.0`
- Direct download way: https://github.com/matcornic/hugo-theme-learn/archive/1.1.0.zip
- Git way:
```shell
cd themes/hugo-theme-learn
git checkout tags/1.1.0
```
For both solutions, the documentation is available at https://github.com/matcornic/hugo-theme-learn/releases/download/1.1.0/hugo-learn-doc-1.1.0.zip
## Credits
Many thanks to [@vjeantet](https://github.com/vjeantet/) for the fork [docdock](https://github.com/vjeantet/hugo-theme-docdock). The v2 of this theme is mainly based on his work !
Documentation/docs-site/themes/learn/archetypes/chapter.md
-13
View File
@@ -1,13 +0,0 @@
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
weight = 5
chapter = true
pre = "<b>X. </b>"
+++
### Chapter X
# Some Chapter title
Lorem Ipsum.
Documentation/docs-site/themes/learn/archetypes/default.md
-7
View File
@@ -1,7 +0,0 @@
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
weight = 5
+++
Lorem Ipsum.
Documentation/docs-site/themes/learn/exampleSite/LICENSE.md
-20
View File
@@ -1,20 +0,0 @@
The MIT License (MIT)
Copyright (c) 2016 MATHIEU CORNIC
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Documentation/docs-site/themes/learn/exampleSite/config.toml
-73
View File
@@ -1,73 +0,0 @@
baseURL = "/"
languageCode = "en-US"
defaultContentLanguage = "en"
title = "Hugo Learn Documentation"
theme = "learn"
themesdir = "../.."
metaDataFormat = "yaml"
defaultContentLanguageInSubdir= true
[params]
editURL = "https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/"
description = "Documentation for Hugo Learn Theme"
author = "Mathieu Cornic"
showVisitedLinks = true
[outputs]
home = [ "HTML", "RSS", "JSON"]
[Languages]
[Languages.en]
title = "Documentation for Hugo Learn Theme"
weight = 1
languageName = "English"
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-fw fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-fw fa-camera'></i> Showcases"
url = "showcase"
weight = 11
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-fw fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-fw fa-bullhorn'></i> Credits"
url = "/credits"
weight = 30
[Languages.fr]
title = "Documentation du thème Hugo Learn"
weight = 2
languageName = "Français"
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-fw fa-github'></i> Repo Github"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-fw fa-camera'></i> Vitrine"
url = "/showcase"
weight = 11
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-fw fa-bookmark'></i> Documentation Hugo"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-fw fa-bullhorn'></i> Crédits"
url = "/credits"
weight = 30
Documentation/docs-site/themes/learn/exampleSite/content/_index.en.md
-41
View File
@@ -1,41 +0,0 @@
---
title: "Learn Theme for Hugo"
---
# Hugo learn theme
[Hugo-theme-learn](http://github.com/matcornic/hugo-theme-learn) is a theme for [Hugo](https://gohugo.io/), a fast and modern static website engine written in Go. Where Hugo is often used for blogs, this multilingual-ready theme is **fully designed for documentation**.
This theme is a partial porting of the [Learn theme](http://learn.getgrav.org/) of [Grav](https://getgrav.org/), a modern flat-file CMS written in PHP.
{{% notice tip %}}Learn theme works with a _page tree structure_ to organize content : All contents are pages, which belong to other pages. [read more about this]({{%relref "cont/pages/_index.md"%}})
{{% /notice %}}
## Main features
* [Automatic Search]({{%relref "basics/configuration/_index.md#activate-search" %}})
* [Multilingual mode]({{%relref "cont/i18n/_index.md" %}})
* **Unlimited menu levels**
* **Automatic next/prev buttons to navigate through menu entries**
* [Image resizing, shadow...]({{%relref "cont/markdown.en.md#images" %}})
* [Attachments files]({{%relref "shortcodes/attachments.en.md" %}})
* [List child pages]({{%relref "shortcodes/children/_index.md" %}})
* [Mermaid diagram]({{%relref "shortcodes/mermaid.en.md" %}}) (flowchart, sequence, gantt)
* [Customizable look and feel and themes variants]({{%relref "basics/style-customization/_index.md"%}})
* [Buttons]({{%relref "shortcodes/button.en.md" %}}), [Tip/Note/Info/Warning boxes]({{%relref "shortcodes/notice.en.md" %}}), [Expand]({{%relref "shortcodes/expand.en.md" %}})
![Screenshot](https://github.com/matcornic/hugo-theme-learn/raw/master/images/screenshot.png?width=40pc&classes=shadow)
## Contribute to this documentation
Feel free to update this content, just click the **Edit this page** link displayed on top right of each page, and pullrequest it
{{% notice info %}}
Your modification will be deployed automatically when merged.
{{% /notice %}}
## Documentation website
This current documentation has been statically generated with Hugo with a simple command : `hugo -t hugo-theme-learn` -- source code is [available here at GitHub](https://github.com/matcornic/hugo-theme-learn)
{{% notice note %}}
Automatically published and hosted thanks to [Netlify](https://www.netlify.com/). Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)
{{% /notice %}}
Documentation/docs-site/themes/learn/exampleSite/content/_index.fr.md
-43
View File
@@ -1,43 +0,0 @@
---
title: "Learn Theme for Hugo"
---
# Thème Hugo learn
[Hugo-theme-learn](http://github.com/matcornic/hugo-theme-learn) est un thème pour [Hugo](https://gohugo.io/), un générateur de site statique, rapide et modern, écrit en Go. Tandis que Hugo est souvent utilisé pour des blogs, ce thème multi-langue est **entièrement conçu pour la documentation**.
Ce thème est un portage partiel du [thème Learn](http://learn.getgrav.org/) de [Grav](https://getgrav.org/), un CMS modern écrit en PHP.
{{% notice tip %}}Le thème Learn fonctionne grâce à la structure de page aborescentes pour organiser le contenu: tous les contenus sont des pages qui appartiennent à d'autres pages. [Plus d'infos]({{%relref "cont/pages/_index.md"%}})
{{% /notice %}}
## Fonctionnalités principales
* [Recherche automatique]({{%relref "basics/configuration/_index.md#activer-recherche" %}})
* [Mode multi-langue]({{%relref "cont/i18n/_index.md" %}})
* **Nombre de niveau infini dans le menu**
* **Boutons suivant/précédent automatiquement générés pour naviguer entre les items du menu**
* [Taille d'image, ombres...]({{%relref "cont/markdown.fr.md#images" %}})
* [Fichiers joints]({{%relref "shortcodes/attachments.fr.md" %}})
* [Lister les pages filles]({{%relref "shortcodes/children/_index.md" %}})
* [Diagrammes Mermaid]({{%relref "shortcodes/mermaid.fr.md" %}}) (flowchart, sequence, gantt)
* [Style configurable and variantes de couleurs]({{%relref "basics/style-customization/_index.md"%}})
* [Boutons]({{%relref "shortcodes/button.fr.md" %}}), [Messages Astuce/Note/Info/Attention]({{%relref "shortcodes/notice.fr.md" %}}), [Expand]({{%relref "shortcodes/expand.fr.md" %}})
![Screenshot](https://github.com/matcornic/hugo-theme-learn/raw/master/images/screenshot.png?width=40pc&classes=shadow)
## Contribuer à cette documentation
N'hésitez pas à mettre à jour ce contenu en cliquant sur le lien **Modifier cette page** en haut de chaque page, et créer la Pull Request associée.
{{% notice info %}}
Votre modification sera déployée automatiquement quand elle sera mergée.
{{% /notice %}}
## Site de documentation
Cette documentation statique a été générée avec Hugo avec une simple commande : `hugo -t hugo-theme-learn` -- le code source est [disponible sur Github](https://github.com/matcornic/hugo-theme-learn)
{{% notice note %}}
Le site est auomatiquement publié et hébergé par [Netlify](https://www.netlify.com/). Plus d'infos sur le [déploiement de site Hugo avec Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)(En anglais)
{{% /notice %}}
Documentation/docs-site/themes/learn/exampleSite/content/basics/_index.en.md
-12
View File
@@ -1,12 +0,0 @@
---
title: Basics
weight: 5
pre: "<b>1. </b>"
chapter: true
---
### Chapter 1
# Basics
Discover what this Hugo theme is all about and the core-concepts behind it.
Documentation/docs-site/themes/learn/exampleSite/content/basics/_index.fr.md
-12
View File
@@ -1,12 +0,0 @@
---
title: Démarrage
weight: 5
pre: "<b>1. </b>"
chapter: true
---
### Chapitre 1
# Démarrage
Découvrez comment utiliser ce thème Hugo et apprenez en les concepts
Documentation/docs-site/themes/learn/exampleSite/content/basics/configuration/_index.en.md
-54
View File
@@ -1,54 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Configuration
weight: 20
---
## Global site parameters
On top of [Hugo global configuration](https://gohugo.io/overview/configuration/), **Hugo-theme-learn** lets you define the following parameters in your `config.toml` (here, values are default).
Note that some of these parameters are explained in details in other sections of this documentation.
```toml
[params]
# Prefix URL to edit current page. Will display an "Edit this page" button on top right hand corner of every page.
# Useful to give opportunity to people to create merge request for your doc.
# See the config.toml file from this documentation site to have an example.
editURL = ""
# Author of the site, will be used in meta information
author = ""
# Description of the site, will be used in meta information
description = ""
# Shows a checkmark for visited pages on the menu
showVisitedLinks = false
# Disable search function. It will hide search bar
disableSearch = false
# Javascript and CSS cache are automatically busted when new version of site is generated.
# Set this to true to disable this behavior (some proxies don't handle well this optimization)
disableAssetsBusting = false
# Set this to true to disable copy-to-clipboard button for inline code.
disableInlineCopyToClipBoard = false
# A title for shortcuts in menu is set by default. Set this to true to disable it.
disableShortcutsTitle = false
# When using mulitlingual website, disable the switch language button.
disableLanguageSwitchingButton = false
# Order sections in menu by "weight" or "title". Default to "weight"
ordersectionsby = "weight"
# Change default color scheme with a variant one. Can be "red", "blue", "green".
themeVariant = ""
```
## Activate search
If not already present, add the follow lines in the same `config.toml` file.
```toml
[outputs]
home = [ "HTML", "RSS", "JSON"]
```
Learn theme uses the last improvement available in hugo version 20+ to generate a json index file ready to be consumed by lunr.js javascript search engine.
> Hugo generate lunrjs index.json at the root of public folder.
> When you build the site with hugo server, hugo generates it internally and of course it don’t show up in the filesystem
Documentation/docs-site/themes/learn/exampleSite/content/basics/configuration/_index.fr.md
-54
View File
@@ -1,54 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Configuration
weight: 20
---
## Paramètres globaux du site
En plus de la [configuration globale d'Hugo](https://gohugo.io/overview/configuration/), **Hugo-theme-learn** vous permet de définir les paramètres suivant dans votre fichier `config.toml` (ci-dessous sont affichées les valeurs par défaut).
Notez que certains de ces paramètres sont expliqués en détails dans d'autres sections de cette documentation.
```toml
[params]
# L'URL préfixe pour éditer la page courante. Ce paramètre affichera un bouton "Modifier cette page" on haut de de chacune des pages.
# Pratique pour donner les possibilité à vos utilisateurs de créer une merge request pour votre doc.
# Allez voir le fichier config.toml de cette documentation pour avoir un exemple.
editURL = ""
# Autheur du site, est utilisé dans les informations meta
author = ""
# Description du site, est utilisé dans les informations meta
description = ""
# Affiche une icône lorsque la page a été visitée
showVisitedLinks = false
# Désactive la fonction de recherche. Une valeur à true cache la barre de recherche.
disableSearch = false
# Par défaut, le cache Javascript et CSS est automatiquement vidé lorsqu'une nouvelle version du site est générée.
# Utilisez ce paramètre lorsque vous voulez désactiver ce comportement (c'est parfois incompatible avec certains proxys)
disableAssetsBusting = false
# Utilisez ce paramètre pour désactiver le bouton copy-to-clipboard pour le code formatté sur une ligne.
disableInlineCopyToClipBoard = false
# Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher.
disableShortcutsTitle = false
# Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue.
disableLanguageSwitchingButton = false
# Ordonne les sections dans menu par poids ("weight") ou titre ("title"). Défaut à "weight"
ordersectionsby = "weight"
# Utilisez ce paramètre pour modifier le schéma de couleur du site. Les valeurs par défaut sont "red", "blue", "green".
themeVariant = ""
```
## Activer la recherche {#activer-recherche}
Si ce n'est pas déjà présent, ajoutez les lignes suivantes dans le fichier `config.toml`.
```toml
[outputs]
home = [ "HTML", "RSS", "JSON"]
```
Le thème *Learn* utilise les dernières amélioraions d'Hugo pour générer un fichier d'index JSON, prêt à être consommé par le moteur de recherche lunr.js.
> Hugo génère lunrjs index.json à la racine du dossier `public`.
> Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque.
Documentation/docs-site/themes/learn/exampleSite/content/basics/installation/_index.en.md
-102
View File
@@ -1,102 +0,0 @@
---
title: Installation
weight: 15
---
The following steps are here to help you initialize your new website. If you don't know Hugo at all, we strongly suggest you to train by following this [great documentation for beginners](https://gohugo.io/overview/quickstart/).
## Create your project
Hugo provides a `new` command to create a new website.
```
hugo new site <new_project>
```
## Install the theme
Install the **Hugo-theme-learn** theme by following [this documentation](https://gohugo.io/themes/installing/)
The theme's repository is: https://github.com/matcornic/hugo-theme-learn.git
Alternatively, you can [download the theme as .zip](https://github.com/matcornic/hugo-theme-learn/archive/master.zip) file and extract it in the themes directory
## Basic configuration
When building the website, you can set a theme by using `--theme` option. We suggest you to edit your configuration file and set the theme by default. By the way, add requirements for search functionnality to be enabled.
```toml
# Change the default theme to be use when building the site with Hugo
theme = "hugo-theme-learn"
# For search functionnality
[outputs]
home = [ "HTML", "RSS", "JSON"]
```
## Create your first chapter page
Chapters are pages containg other child pages. It has a special layout style and usually just contains a _chapter name_, the _title_ and a _brief abstract_ of the section.
```
### Chapter 1
# Basics
Discover what this Hugo theme is all about and the core-concepts behind it.
```
renders as
![A Chapter](/basics/installation/images/chapter.png?classes=shadow&width=60pc)
**Hugo-theme-learn** provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command
```
hugo new --kind chapter basics/_index.md
```
By opening the given file, you should see the property `chapter=true` on top, meaning this page is a _chapter_.
By default all chapters and pages are created as draft. If you want to render these pages, remove the property `draft: true` from the metadata.
## Create your first content pages
Then, create content pages inside the previous chapter. Here are two ways to create content in the chapter :
```
hugo new basics/first-content.md
hugo new basics/second-content/_index.md
```
Feel free to edit thoses files by adding some sample content and replacing `title` value in the beginning of the files.
## Launching the website locally
Launch the following command:
```
hugo serve
```
Go to `http://localhost:1313`
You should notice three things:
1. You have a left **Basics** menu, containing two submenus with names equals to `title` properties in previously created files.
2. The home page explains you to how to customize it. Follow the instructions.
3. With `hugo serve` command, the page refresh as soon as you save a file. Neat !
## Build the website
When your site is ready to deploy, launch the following command:
```
hugo
```
A `public` folder has been generated, containing all statics content and assets for your website. It can now be deployed on any web server !
{{% notice note %}}
This website can be automatically published and hosted with [Netlify](https://www.netlify.com/) (Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)). Alternatively, you can use [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/)
{{% /notice %}}
Documentation/docs-site/themes/learn/exampleSite/content/basics/installation/_index.fr.md
-100
View File
@@ -1,100 +0,0 @@
---
title: Installation
weight: 15
---
Les étapes suivantes sont là pour vous aider à initialiser votre site. Si vous ne connaissez pas du tout Hugo, il est fortement conseillé de vous entrainer en suivant ce [super tuto pour débutants](https://gohugo.io/overview/quickstart/).
## Créer votre projet
Hugo fournit une commande `new` pour créer un nouveau site.
```
hugo new site <new_project>
```
## Installer le thème
Installer le thème **Hugo-theme-learn** en suivant [cette documentation](https://gohugo.io/themes/installing/)
Le repo du thème est : https://github.com/matcornic/hugo-theme-learn.git
Sinon, vous pouvez [télécharger le thème sous forme d'un fichier .zip](https://github.com/matcornic/hugo-theme-learn/archive/master.zip) et extrayez le dans votre dossier de thèmes.
## Configuration simple
Lorsque vous générez votre site, vous pouvez définir un thème en utilisant l'option `--theme`. Il est conseillé de modifier votre fichier de configuration `config.toml` and définir votre thème par défaut. En passant, ajoutez les prérequis à l'utilisation de la fonctionnalité de recherche.
```toml
# Modifiez le thème pour qu'il soit utilisé par défaut à chaque génération de site.
theme = "hugo-theme-learn"
# Pour la fonctionnalité de recherche
[outputs]
home = [ "HTML", "RSS", "JSON"]
```
## Créer votre première page chapitre
Les *chapitres* sont des pages contenant d'autre pages filles. Elles ont un affichage spécial et contiennent habituellement juste un _nom_ de chapitre, le _titre_ et un _résumé_ de la section.
```
### Chapitre 1
# Démarrage
Découvrez comment utiliser ce thème Hugo et apprenez en les concepts
```
s'affiche comme
![Un chapitre](/basics/installation/images/chapter.png?classes=shadow&width=60pc)
**Hugo-theme-learn** fournit des archétypes pour créer des squelettes pour votre site. Commencez par créer votre premier chapitre avec la commande suivante:
```
hugo new --kind chapter basics/_index.md
```
En ouvrant le fichier généré, vous devriez voir la propriété `chapter=true` en haut, paramètre quit définit que le page est un _chapitre_.
## Créer votre première page
Puis, créez votre premier page dans le chapitre précédent. Pour ce faire, il existe deux possibilités :
```
hugo new basics/first-content.md
hugo new basics/second-content/_index.md
```
N'hésitez pas à éditer ces fichiers en ajoutant des exemple de contenu et en remplaçant le paramètre `title` au début du fichier.
## Lancer le site localement
Lancez la commande suivante :
```
hugo serve
```
Se rendre sur `http://localhost:1313`
Vous devriez voir trois choses:
1. Vous avez un menu **Basics** à gauche, qui contient deux sous-menu avec des noms égal au paramètre `title` des fichiers précédemment générés.
2. La page d'accueil vous explique comment la modifier. Suivez les instructions.
3. Avec la commande `hugo serve`, la page se rafraichit automatiquement à chaque fois que vous sauvegardez. Super !
## Générez le site
Quand votre site est prêt à être déployé, lancez la commande suivante:
```
hugo
```
Un dossier `public` a été généré. Il contient tout le contenu statique et les ressources nécessaires pour votre site. Votre site peut maintenant être déployé en utilisant n'importe quel serveur !
{{% notice note %}}
Ce site peut être automatiquement publié et hébergé avec [Netlify](https://www.netlify.com/) ([Plus d'infos](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)). Sinon, vous pouvez utiliser les [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/)
{{% /notice %}}
Documentation/docs-site/themes/learn/exampleSite/content/basics/installation/images/chapter.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

Documentation/docs-site/themes/learn/exampleSite/content/basics/requirements/_index.en.md
-11
View File
@@ -1,11 +0,0 @@
---
title: Requirements
weight: 10
disableToc: true
---
Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.
Just download latest version of [Hugo binary (> 0.25)](https://gohugo.io/getting-started/installing/) for your OS (Windows, Linux, Mac) : it's that simple.
![Magic](/basics/requirements/images/magic.gif?classes=shadow)
Documentation/docs-site/themes/learn/exampleSite/content/basics/requirements/_index.fr.md
-11
View File
@@ -1,11 +0,0 @@
---
title: Prérequis
weight: 10
disableToc: true
---
Grâce à la simplicité d'Hugo, cette page est vide car il n'y a quasi pas de prérequis pour utiliser le thème.
Téléchargez la dernière version du [binaire Hugo (> 0.25)](https://gohugo.io/getting-started/installing/) pour votre Système d'exploitation (Windows, Linux, Mac) : et c'est tout !
![Magic](/basics/requirements/images/magic.gif?classes=shadow)
Documentation/docs-site/themes/learn/exampleSite/content/basics/requirements/images/magic.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

Documentation/docs-site/themes/learn/exampleSite/content/basics/style-customization/_index.en.md
-194
View File
@@ -1,194 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Style customization
weight: 25
---
**Hugo-theme-learn** has been built to be as configurable as possible by defining multiple [partials](https://gohugo.io/templates/partials/)
In `themes/hugo-theme-learn/layouts/partials/`, you will find all the partials defined for this theme. If you need to overwrite something, don't change the code directly. Instead [follow this page](https://gohugo.io/themes/customizing/). You'd create a new partial in the `layouts/partials` folder of your local project. This partial will have the priority.
This theme defines the following partials :
- *header*: the header of the content page (contains the breadcrumbs). _Not meant to be overwritten_
- *custom-header*: custom headers in page. Meant to be overwritten when adding CSS imports. Don't forget to include `style` HTML tag directive in your file
- *footer*: the footer of the content page (contains the arrows). _Not meant to be overwritten_
- *custom-footer*: custom footer in page. Meant to be overwritten when adding Javacript. Don't forget to include `javascript` HTML tag directive in your file
- *favicon*: the favicon
- *logo*: the logo, on top left hand corner.
- *meta*: HTML meta tags, if you want to change default behavior
- *menu*: left menu. _Not meant to be overwritten_
- *menu-footer*: footer of the the left menu
- *search*: search box
- *toc*: table of contents
## Change the logo
Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want.
You could use an `img` HTML tag and reference an image created under the *static* folder, or you could paste a SVG definition !
{{% notice note %}}
The size of the logo will adapt automatically
{{% /notice %}}
## Change the favicon
If your favicon is a png, just drop off your image in your local `static/images/` folder and names it `favicon.png`
If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this:
```html
<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon" />
```
## Change default colors {#theme-variant}
**Hugo Learn theme** let you choose between 3 native color scheme variants, but feel free to add one yourself ! Default color scheme is based on [Grav Learn Theme](https://learn.getgrav.org/).
### Red variant
```toml
[params]
# Change default color scheme with a variant one. Can be "red", "blue", "green".
themeVariant = "red"
```
![Red variant](/basics/style-customization/images/red-variant.png?width=60pc)
### Blue variant
```toml
[params]
# Change default color scheme with a variant one. Can be "red", "blue", "green".
themeVariant = "blue"
```
![Blue variant](/basics/style-customization/images/blue-variant.png?width=60pc)
### Green variant
```toml
[params]
# Change default color scheme with a variant one. Can be "red", "blue", "green".
themeVariant = "green"
```
![Green variant](/basics/style-customization/images/green-variant.png?width=60pc)
### 'Yours‘ variant
First, create a new CSS file in your local `static/css` folder prefixed by `theme` (e.g. with _mine_ theme `static/css/theme-mine.css`). Copy the following content and modify colors in CSS variables.
```css
:root{
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#1C90F3; /* Color of links */
--MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
--MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
--MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
--MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
--MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
--MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
--MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
--MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
}
body {
color: var(--MAIN-TEXT-color) !important;
}
textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
border-color: none;
box-shadow: none;
}
h2, h3, h4, h5 {
color: var(--MAIN-TITLES-TEXT-color) !important;
}
a {
color: var(--MAIN-LINK-color);
}
.anchor {
color: var(--MAIN-ANCHOR-color);
}
a:hover {
color: var(--MAIN-LINK-HOVER-color);
}
#sidebar ul li.visited > a .read-icon {
color: var(--MENU-VISITED-color);
}
#body a.highlight:after {
display: block;
content: "";
height: 1px;
width: 0%;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
transition: width 0.5s ease;
background-color: var(--MAIN-HOVER-color);
}
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
#sidebar a {
color: var(--MENU-SECTIONS-LINK-color);
}
#sidebar a:hover {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar ul li.active > a {
background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
}
#sidebar hr {
border-color: var(--MENU-SECTION-HR-color);
}
```
Then, set the `themeVariant` value with the name of your custom theme file. That's it !
```toml
[params]
# Change default color scheme with a variant one. Can be "red", "blue", "green".
themeVariant = "mine"
```
Documentation/docs-site/themes/learn/exampleSite/content/basics/style-customization/_index.fr.md
-194
View File
@@ -1,194 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Personnalisation du style
weight: 25
---
**Hugo-theme-learn** a été conçu pour être aussi configurable que possible en définissant plusieurs [partials](https://gohugo.io/templates/partials/)
Dans `themes/hugo-theme-learn/layouts/partials/`, vous pourrez trouver tous les *partials* définis pour ce thème. Si vous avez besoin d'écraser quelque chose, ne modifiez pas le code directement. A la place, [suivez cette page](https://gohugo.io/themes/customizing/). Vous créerez alors un nouveau *partial* dans le dossier `layouts/partials` de votre site local. Ce *partial* aura la priorité.
Ce thème définit les *partials* suivant :
- *header*: l'en-tête de la page page (contient le fil d'Ariane). _Pas voué à être écrasé_
- *custom-header*: En-tête personnalisé. Voué à être écrasé quand vous ajoutez des imports CSS. N'oubliez pas d'inclure la balise HTML `style` dans votre fichier
- *footer*: le pied-de-page de la page (contains les flèches). _Pas voué à être écrasé_
- *custom-footer*: Pied-de-page personnalisé. Voué à être écrasé quand vous ajoutez du Javascript. N'oubliez pas d'inclure la balise HTML `javascript` dans votre fichier
- *favicon*: le favicon
- *logo*: le logo, affiché un haut à gauche.
- *meta*: les balises HTML meta, que vous pouvez écraser sans problème.
- *menu*: Le menu à gauche. _Pas voué à être écrasé_
- *menu-footer*: Le pied-de-page du menu
- *search*: le champ de recherche
- *toc*: le sommaire
## Changer le logo
Créez un nouveau fichier dans `layouts/partials/`, nommé `logo.html`. Puis, écrivez le code HTML voulu.
Vous pourriez utiliser une balise HTML `img` et référencer une image créée dans le dossier *static*, voire même y coller un cod SVG !
{{% notice note %}}
La taille du logo va s'adapter automatiquement
{{% /notice %}}
## Changer le favicon
Si votre favicon est un png, déposez votre image dans votre dossier local `static/images/` et nommez le `favicon.png`
Si vous avez besoin de changer ce comportement par défaut, créer un nouveau fichier dans `layouts/partials/` et nommez le `favicon.html`. Puis ajoutez quelque chose comme:
```html
<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon" />
```
## Changer les couleurs par défaut {#theme-variant}
**Hugo Learn theme** vous permet de choisir nativement entre 3 schéma de couleurs, mais n'hésitez pas à en ajouter d'autres ! Les couleurs par défaut sont celles de [Grav Learn Theme](https://learn.getgrav.org/).
### Variante rouge
```toml
[params]
# Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green".
themeVariant = "red"
```
![Variante rouge](/basics/style-customization/images/red-variant.png?width=60pc)
### Variante bleue
```toml
[params]
# Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green".
themeVariant = "blue"
```
![Variante bleue](/basics/style-customization/images/blue-variant.png?width=60pc)
### Variante verte
```toml
[params]
# Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green".
themeVariant = "green"
```
![Variante verte](/basics/style-customization/images/green-variant.png?width=60pc)
### Votre variante
Premièrement, créez un nouveau fichier CSS dans votre dossier `static/css`, préfixé par `theme` (ex: avec le theme_lemien_ `static/css/theme-lemien.css`). Copiez le contenu suivant et modifiez les couleurs dans les variables CSS.
```css
:root{
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#1C90F3; /* Color of links */
--MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
--MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
--MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
--MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
--MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
--MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
--MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
--MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
}
body {
color: var(--MAIN-TEXT-color) !important;
}
textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
border-color: none;
box-shadow: none;
}
h2, h3, h4, h5 {
color: var(--MAIN-TITLES-TEXT-color) !important;
}
a {
color: var(--MAIN-LINK-color);
}
.anchor {
color: var(--MAIN-ANCHOR-color);
}
a:hover {
color: var(--MAIN-LINK-HOVER-color);
}
#sidebar ul li.visited > a .read-icon {
color: var(--MENU-VISITED-color);
}
#body a.highlight:after {
display: block;
content: "";
height: 1px;
width: 0%;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
transition: width 0.5s ease;
background-color: var(--MAIN-HOVER-color);
}
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
#sidebar a {
color: var(--MENU-SECTIONS-LINK-color);
}
#sidebar a:hover {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar ul li.active > a {
background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
}
#sidebar hr {
border-color: var(--MENU-SECTION-HR-color);
}
```
Puis, configurez le paramètre `themeVariant` avec le nom de votre variante. C'est tout !
```toml
[params]
# Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green".
themeVariant = "lemien"
```
Documentation/docs-site/themes/learn/exampleSite/content/basics/style-customization/images/blue-variant.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 380 KiB

Documentation/docs-site/themes/learn/exampleSite/content/basics/style-customization/images/green-variant.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 382 KiB

Documentation/docs-site/themes/learn/exampleSite/content/basics/style-customization/images/red-variant.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 381 KiB

Documentation/docs-site/themes/learn/exampleSite/content/cont/_index.en.md
-12
View File
@@ -1,12 +0,0 @@
---
title: Content
weight: 10
chapter: true
pre: "<b>2. </b>"
---
### Chapter 2
# Content
Find out how to create and organize your content quickly and intuitively.
Documentation/docs-site/themes/learn/exampleSite/content/cont/_index.fr.md
-12
View File
@@ -1,12 +0,0 @@
---
title: Contenu
weight: 10
chapter: true
pre: "<b>2. </b>"
---
### Chapitre 2
# Contenu
Découvrez comment créer et organiser votre contenu facilement et intuitivement.
Documentation/docs-site/themes/learn/exampleSite/content/cont/archetypes.en.md
-57
View File
@@ -1,57 +0,0 @@
---
title: Archetypes
weight: 10
---
Using the command: `hugo new [relative new content path]`, you can start a content file with the date and title automatically set. While this is a welcome feature, active writers need more : [archetypes](https://gohugo.io/content/archetypes/).
It is pre-configured skeleton pages with default front matter. Please refer to the documentation for types of page to understand the differences.
## Chapter {#archetypes-chapter}
To create a Chapter page, run the following commands
```
hugo new --kind chapter <name>/_index.md
```
It will create a page with predefined Front-Matter:
```markdown
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
weight = 5
chapter = true
pre = "<b>X. </b>"
+++
### Chapter X
# Some Chapter title
Lorem Ipsum.
```
## Default
To create a default page, run either one of the following commands
```
# Either
hugo new <chapter>/<name>/_index.md
# Or
hugo new <chapter>/<name>.md
```
It will create a page with predefined Front-Matter:
```markdown
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
weight = 5
+++
Lorem Ipsum.
```
Documentation/docs-site/themes/learn/exampleSite/content/cont/archetypes.fr.md
-57
View File
@@ -1,57 +0,0 @@
---
title: Archétypes
weight: 10
---
En utilisant la commande: `hugo new [chemin vers nouveau contenu]`, vous pouvez créer un nouveau fichier avec la date et le title automatiquement initialisé. Même si c'est une fonctionnalité intéressante, elle reste limitée pour les auteurs actifs qui ont besoin de mieux : les [archetypes](https://gohugo.io/content/archetypes/).
Les archétypes sont des squelettes de pages préconfigurées avec un Front Matter par défaut. Merci de vous référer à la documentation pour connaitre les différents types de page.
## Chapitre {#archetypes-chapter}
Pour créer un chapitre, lancez les commandes suivantes
```
hugo new --kind chapter <name>/_index.md
```
Cela crééra une page avec le Front Matter suivant:
```markdown
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
weight = 5
chapter = true
pre = "<b>X. </b>"
+++
### Chapter X
# Some Chapter title
Lorem Ipsum.
```
## Défaut
Pour créer une page classique, lancer l'une des deux commandes suivantes
```
# Soit
hugo new <chapter>/<name>/_index.md
# Ou
hugo new <chapter>/<name>.md
```
Cela crééra une page avec le Front Matter suivant:
```markdown
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
weight = 5
+++
Lorem Ipsum.
```
Documentation/docs-site/themes/learn/exampleSite/content/cont/i18n/_index.en.md
-78
View File
@@ -1,78 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Multilingual and i18n
weight: 30
---
**Learn theme** is fully compatible with Hugo multilingual mode.
It provides:
- Translation strings for default values (English and French). Feel free to contribute !
- Automatic menu generation from multilingual content
- In-browser language switching
![I18n menu](/cont/i18n/images/i18n-menu.gif)
## Basic configuration
After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your `config.toml` file.
For example with current French and English website.
```toml
# English is the default language
defaultContentLanguage = "en"
# Force to have /en/my-page and /fr/my-page routes, even for default language.
defaultContentLanguageInSubdir= true
[Languages]
[Languages.en]
title = "Documentation for Hugo Learn Theme"
weight = 1
languageName = "English"
[Languages.fr]
title = "Documentation du thème Hugo Learn"
weight = 2
languageName = "Français"
```
Then, for each new page, append the *id* of the language to the file.
- Single file `my-page.md` is split in two files:
- in English: `my-page.en.md`
- in French: `my-page.fr.md`
- Single file `_index.md` is split in two files:
- in English: `_index.en.md`
- in French: `_index.fr.md`
{{% notice info %}}
Be aware that only translated pages are displayed in menu. It's not replaced with default language content.
{{% /notice %}}
{{% notice tip %}}
Use [slug](https://gohugo.io/content-management/multilingual/#translate-your-content) Front Matter parameter to translate urls too.
{{% /notice %}}
## Overwrite translation strings
Translations strings are used for common default values used in the theme (*Edit this page* button, *Search placeholder* and so on). Translations are available in french and english but you may use another language or want to override default values.
To override these values, create a new file in your local i18n folder `i18n/<idlanguage>.toml` and inspire yourself from the theme `themes/hugo-theme-learn/i18n/en.toml`
By the way, as these translations could be used by other people, please take the time to propose a translation by [making a PR](https://github.com/matcornic/hugo-theme-learn/pulls) to the theme !
## Disable language switching
Switching the language in the browser is a great feature, but for some reasons you may want to disable it.
Just set `disableLanguageSwitchingButton=true` in your `config.toml`
```toml
[params]
# When using mulitlingual website, disable the switch language button.
disableLanguageSwitchingButton = true
```
![I18n menu](/cont/i18n/images/i18n-menu.gif)
Documentation/docs-site/themes/learn/exampleSite/content/cont/i18n/_index.fr.md
-78
View File
@@ -1,78 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Multi-langue et i18n
weight: 30
---
**Learn** est complètement compatible avec le mode multi-langue d'Hugo.
Il fournit :
- Des *translation strings* pour les valeurs par défaut utilisées par le thème (Anglais et Français). N'hésitez pas à contribuer !
- Génération automatique du menu avec le contenu multi-langue
- Modification de la langue dans le navigateur
![I18n menu](/cont/i18n/images/i18n-menu.gif)
## Configuration simple
Après avoir appris [comment Hugo gère les sites multi-langue](https://gohugo.io/content-management/multilingual), définissez vos langues dans votre fichier `config.toml`.
Par exemple, pour ce site, avec du contenu en français et en anglais.
```toml
# Anglais est la langue par défaut
defaultContentLanguage = "en"
# Force d'avoir /en/ma-page et /fr/ma-page routes, même avec la langue par défaut.
defaultContentLanguageInSubdir= true
[Languages]
[Languages.en]
title = "Documentation for Hugo Learn Theme"
weight = 1
languageName = "English"
[Languages.fr]
title = "Documentation du thème Hugo Learn"
weight = 2
languageName = "Français"
```
Puis, pour chaque nouvelle page, ajoutez *l'id* de la langue du fichier.
- Le fichier `my-page.md` est découpé en deux fichiers :
- en anglais : `my-page.en.md`
- en français : `my-page.fr.md`
- Le fichier `_index.md` est découpé en deux fichiers :
- en anglais: `_index.en.md`
- en français: `_index.fr.md`
{{% notice info %}}
Attention, seulement les pages traduites sont affichées dans le menu. Le contenu n'est pas remplacé par les pages de la langue par défaut.
{{% /notice %}}
{{% notice tip %}}
Utilisez le paramètre du Front Matter [slug](https://gohugo.io/content-management/multilingual/#translate-your-content) pour traduire également les URLs.
{{% /notice %}}
## Surcharger les *translation strings*
Les *Translations strings* sont utilisées comme valeurs par défaut dans le thème (Bouton *Modifier la page*, Element de subsitution *Recherche*, etc.). Les traductions sont disponibles en français et en anglais mais vous pouvez utiliser n'importe quelle autre langue et surcharger avec vos propres valeurs.
Pour surcharger ces valeurs, créer un nouveau fichier dans votre dossier i18n local `i18n/<idlanguage>.toml` et inspirez vous du thème `themes/hugo-theme-learn/i18n/en.toml`
D'ailleurs, ces traductions pour servir à tout le monde, donc svp prenez le temps de [proposer une Pull Request](https://github.com/matcornic/hugo-theme-learn/pulls) !
## Désactiver le changement de langue
Vous pouvez changer de langue directement dans le navigateur. C'est une super fonctionnalité, mais vous avez peut-être besoin de la désactiver.
Pour ce faire, ajouter le paramètre `disableLanguageSwitchingButton=true` dans votre `config.toml`
```toml
[params]
# Quand vous utilisez un site en multi-langue, désactive le bouton de changment de langue.
disableLanguageSwitchingButton = true
```
![I18n menu](/cont/i18n/images/i18n-menu.gif)
Documentation/docs-site/themes/learn/exampleSite/content/cont/i18n/images/i18n-menu.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

Documentation/docs-site/themes/learn/exampleSite/content/cont/markdown.en.md
-663
View File
@@ -1,663 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Markdown syntax
weight: 15
---
{{% notice note %}}
This page is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).
Only difference is information about image customization ([resizing]({{< relref "#resizing-image" >}}), [add CSS classes]({{< relref "#add-css-classes" >}})...)
{{% /notice%}}
Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
**Markdown** is a better way to write **HTML**, without all the complexities and ugliness that usually accompanies it.
Some of the key benefits are:
1. Markdown is simple to learn, with minimal extra characters so it's also quicker to write content.
2. Less chance of errors when writing in markdown.
3. Produces valid XHTML output.
4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
5. Write in any text editor or Markdown application you like.
6. Markdown is a joy to use!
John Gruber, the author of Markdown, puts it like this:
> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
> -- <cite>John Gruber</cite>
Grav ships with built-in support for [Markdown](http://daringfireball.net/projects/markdown/) and [Markdown Extra](https://michelf.ca/projects/php-markdown/extra/). You must enable **Markdown Extra** in your `system.yaml` configuration file
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:
{{% notice info %}}
<i class="fa fa-bookmark"></i> Bookmark this page for easy future reference!
{{% /notice %}}
## Headings
Headings from `h1` through `h6` are constructed with a `#` for each level:
```markdown
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
```
Renders to:
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
HTML:
```html
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
```
## Comments
Comments should be HTML compatible
```html
<!--
This is a comment
-->
```
Comment below should **NOT** be seen:
<!--
This is a comment
-->
## Horizontal Rules
The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements. In markdown, you can create a `<hr>` with any of the following:
* `___`: three consecutive underscores
* `---`: three consecutive dashes
* `***`: three consecutive asterisks
renders to:
___
---
***
## Body Copy
Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
So this body copy:
```markdown
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
```
renders to this HTML:
```html
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
```
## Emphasis
### Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is **rendered as bold text**.
```markdown
**rendered as bold text**
```
renders to:
**rendered as bold text**
and this HTML
```html
<strong>rendered as bold text</strong>
```
### Italics
For emphasizing a snippet of text with italics.
The following snippet of text is _rendered as italicized text_.
```markdown
_rendered as italicized text_
```
renders to:
_rendered as italicized text_
and this HTML:
```html
<em>rendered as italicized text</em>
```
### strikethrough
In GFM (GitHub flavored Markdown) you can do strikethroughs.
```markdown
~~Strike through this text.~~
```
Which renders to:
~~Strike through this text.~~
HTML:
```html
<del>Strike through this text.</del>
```
## Blockquotes
For quoting blocks of content from another source within your document.
Add `>` before any text you want to quote.
```markdown
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
```
Renders to:
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
and this HTML:
```html
<blockquote>
<p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>
```
Blockquotes can also be nested:
```markdown
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
```
Renders to:
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
## Notices
{{% notice note %}}
The old mechanism for notices overriding the block quote syntax (`>>>`) has been deprecated. Notices are now handled via a dedicated plugin called [Markdown Notices](https://github.com/getgrav/grav-plugin-markdown-notices)
{{% /notice %}}
## Lists
### Unordered
A list of items in which the order of the items does not explicitly matter.
You may use any of the following symbols to denote bullets for each list item:
```markdown
* valid bullet
- valid bullet
+ valid bullet
```
For example
```markdown
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
```
Renders to:
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
And this HTML
```html
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
```
### Ordered
A list of items in which the order of items does explicitly matter.
```markdown
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
```
Renders to:
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
And this HTML:
```html
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
```
**TIP**: If you just use `1.` for each number, Markdown will automatically number each item. For example:
```markdown
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem
```
Renders to:
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
## Code
### Inline code
Wrap inline snippets of code with `` ` ``.
```markdown
In this example, `<section></section>` should be wrapped as **code**.
```
Renders to:
In this example, `<section></section>` should be wrapped with **code**.
HTML:
```html
<p>In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped with <strong>code</strong>.</p>
```
### Indented code
Or indent several lines of code by at least four spaces, as in:
<pre>
// Some comments
line 1 of code
line 2 of code
line 3 of code
</pre>
Renders to:
// Some comments
line 1 of code
line 2 of code
line 3 of code
HTML:
```html
<pre>
<code>
// Some comments
line 1 of code
line 2 of code
line 3 of code
</code>
</pre>
```
### Block code "fences"
Use "fences" ```` ``` ```` to block in multiple lines of code.
<pre>
``` markup
Sample text here...
```
</pre>
```
Sample text here...
```
HTML:
```html
<pre>
<code>Sample text here...</code>
</pre>
```
### Syntax highlighting
GFM, or "GitHub Flavored Markdown" also supports syntax highlighting. To activate it, simply add the file extension of the language you want to use directly after the first code "fence", ` ```js `, and syntax highlighting will automatically be applied in the rendered HTML. For example, to apply syntax highlighting to JavaScript code:
<pre>
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
</pre>
Renders to:
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
## Tables
Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
```markdown
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
```
Renders to:
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
And this HTML:
```html
<table>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
<tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</table>
```
### Right aligned text
Adding a colon on the right side of the dashes below any heading will right align text for that column.
```markdown
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
```
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
### Basic link
```markdown
[Assemble](http://assemble.io)
```
Renders to (hover over the link, there is no tooltip):
[Assemble](http://assemble.io)
HTML:
```html
<a href="http://assemble.io">Assemble</a>
```
### Add a title
```markdown
[Upstage](https://github.com/upstage/ "Visit Upstage!")
```
Renders to (hover over the link, there should be a tooltip):
[Upstage](https://github.com/upstage/ "Visit Upstage!")
HTML:
```html
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
```
### Named Anchors
Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
```markdown
# Table of Contents
* [Chapter 1](#chapter-1)
* [Chapter 2](#chapter-2)
* [Chapter 3](#chapter-3)
```
will jump to these sections:
```markdown
## Chapter 1 <a id="chapter-1"></a>
Content for chapter one.
## Chapter 2 <a id="chapter-2"></a>
Content for chapter one.
## Chapter 3 <a id="chapter-3"></a>
Content for chapter one.
```
**NOTE** that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
## Images {#images}
Images have a similar syntax to links but include a preceding exclamation point.
```markdown
![Minion](http://octodex.github.com/images/minion.png)
```
![Minion](http://octodex.github.com/images/minion.png)
or
```markdown
![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
```
![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
Like links, Images also have a footnote style syntax
### Alternative usage : note images
```markdown
![Alt text][id]
```
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: http://octodex.github.com/images/dojocat.jpg "The Dojocat"
[id]: http://octodex.github.com/images/dojocat.jpg "The Dojocat"
### Resizing image
Add HTTP parameters `width` and/or `height` to the link image to resize the image. Values are CSS values (default is `auto`).
```markdown
![Minion](http://octodex.github.com/images/minion.png?width=20pc)
```
![Minion](http://octodex.github.com/images/minion.png?width=20pc)
```markdown
![Minion](http://octodex.github.com/images/minion.png?height=50px)
```
![Minion](http://octodex.github.com/images/minion.png?height=50px)
```markdown
![Minion](http://octodex.github.com/images/minion.png?height=50px&width=300px)
```
![Minion](http://octodex.github.com/images/minion.png?height=50px&width=300px)
### Add CSS classes
Add a HTTP `classes` parameter to the link image to add CSS classes. `shadow`and `border` are available but you could define other ones.
```markdown
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?classes=shadow)
```
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?width=40pc&classes=shadow)
```markdown
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?classes=border)
```
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?width=40pc&classes=border)
```markdown
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?classes=border,shadow)
```
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?width=40pc&classes=border,shadow)
Documentation/docs-site/themes/learn/exampleSite/content/cont/markdown.fr.md
-665
View File
@@ -1,665 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Syntaxe Markdown
weight: 15
---
{{% notice note %}}
Cette page est une copie de la [doc de Grav](http://learn.getgrav.org/content/markdown).
La seule différence porte sur la personalisation des images ([taille]({{< relref "#resizing-image" >}}), [ajout de classes CSS]({{< relref "#add-css-classes" >}})...)
Pour des raisons évidentes, cette page n'a pas été traduites en français 😁
{{% /notice%}}
Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
**Markdown** is a better way to write **HTML**, without all the complexities and ugliness that usually accompanies it.
Some of the key benefits are:
1. Markdown is simple to learn, with minimal extra characters so it's also quicker to write content.
2. Less chance of errors when writing in markdown.
3. Produces valid XHTML output.
4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
5. Write in any text editor or Markdown application you like.
6. Markdown is a joy to use!
John Gruber, the author of Markdown, puts it like this:
> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
> -- <cite>John Gruber</cite>
Grav ships with built-in support for [Markdown](http://daringfireball.net/projects/markdown/) and [Markdown Extra](https://michelf.ca/projects/php-markdown/extra/). You must enable **Markdown Extra** in your `system.yaml` configuration file
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:
{{% notice info %}}
<i class="fa fa-bookmark"></i> Bookmark this page for easy future reference!
{{% /notice %}}
## Headings
Headings from `h1` through `h6` are constructed with a `#` for each level:
```markdown
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
```
Renders to:
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
HTML:
```html
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
```
## Comments
Comments should be HTML compatible
```html
<!--
This is a comment
-->
```
Comment below should **NOT** be seen:
<!--
This is a comment
-->
## Horizontal Rules
The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements. In markdown, you can create a `<hr>` with any of the following:
* `___`: three consecutive underscores
* `---`: three consecutive dashes
* `***`: three consecutive asterisks
renders to:
___
---
***
## Body Copy
Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
So this body copy:
```markdown
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
```
renders to this HTML:
```html
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
```
## Emphasis
### Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is **rendered as bold text**.
```markdown
**rendered as bold text**
```
renders to:
**rendered as bold text**
and this HTML
```html
<strong>rendered as bold text</strong>
```
### Italics
For emphasizing a snippet of text with italics.
The following snippet of text is _rendered as italicized text_.
```markdown
_rendered as italicized text_
```
renders to:
_rendered as italicized text_
and this HTML:
```html
<em>rendered as italicized text</em>
```
### strikethrough
In GFM (GitHub flavored Markdown) you can do strikethroughs.
```markdown
~~Strike through this text.~~
```
Which renders to:
~~Strike through this text.~~
HTML:
```html
<del>Strike through this text.</del>
```
## Blockquotes
For quoting blocks of content from another source within your document.
Add `>` before any text you want to quote.
```markdown
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
```
Renders to:
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
and this HTML:
```html
<blockquote>
<p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>
```
Blockquotes can also be nested:
```markdown
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
```
Renders to:
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
## Notices
{{% notice note %}}
The old mechanism for notices overriding the block quote syntax (`>>>`) has been deprecated. Notices are now handled via a dedicated plugin called [Markdown Notices](https://github.com/getgrav/grav-plugin-markdown-notices)
{{% /notice %}}
## Lists
### Unordered
A list of items in which the order of the items does not explicitly matter.
You may use any of the following symbols to denote bullets for each list item:
```markdown
* valid bullet
- valid bullet
+ valid bullet
```
For example
```markdown
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
```
Renders to:
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
And this HTML
```html
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
```
### Ordered
A list of items in which the order of items does explicitly matter.
```markdown
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
```
Renders to:
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
And this HTML:
```html
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
```
**TIP**: If you just use `1.` for each number, Markdown will automatically number each item. For example:
```markdown
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem
```
Renders to:
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
## Code
### Inline code
Wrap inline snippets of code with `` ` ``.
```markdown
In this example, `<section></section>` should be wrapped as **code**.
```
Renders to:
In this example, `<section></section>` should be wrapped with **code**.
HTML:
```html
<p>In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped with <strong>code</strong>.</p>
```
### Indented code
Or indent several lines of code by at least four spaces, as in:
<pre>
// Some comments
line 1 of code
line 2 of code
line 3 of code
</pre>
Renders to:
// Some comments
line 1 of code
line 2 of code
line 3 of code
HTML:
```html
<pre>
<code>
// Some comments
line 1 of code
line 2 of code
line 3 of code
</code>
</pre>
```
### Block code "fences"
Use "fences" ```` ``` ```` to block in multiple lines of code.
<pre>
``` markup
Sample text here...
```
</pre>
```
Sample text here...
```
HTML:
```html
<pre>
<code>Sample text here...</code>
</pre>
```
### Syntax highlighting
GFM, or "GitHub Flavored Markdown" also supports syntax highlighting. To activate it, simply add the file extension of the language you want to use directly after the first code "fence", ` ```js `, and syntax highlighting will automatically be applied in the rendered HTML. For example, to apply syntax highlighting to JavaScript code:
<pre>
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
</pre>
Renders to:
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
## Tables
Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
```markdown
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
```
Renders to:
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
And this HTML:
```html
<table>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
<tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</table>
```
### Right aligned text
Adding a colon on the right side of the dashes below any heading will right align text for that column.
```markdown
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
```
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
### Basic link
```markdown
[Assemble](http://assemble.io)
```
Renders to (hover over the link, there is no tooltip):
[Assemble](http://assemble.io)
HTML:
```html
<a href="http://assemble.io">Assemble</a>
```
### Add a title
```markdown
[Upstage](https://github.com/upstage/ "Visit Upstage!")
```
Renders to (hover over the link, there should be a tooltip):
[Upstage](https://github.com/upstage/ "Visit Upstage!")
HTML:
```html
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
```
### Named Anchors
Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
```markdown
# Table of Contents
* [Chapter 1](#chapter-1)
* [Chapter 2](#chapter-2)
* [Chapter 3](#chapter-3)
```
will jump to these sections:
```markdown
## Chapter 1 <a id="chapter-1"></a>
Content for chapter one.
## Chapter 2 <a id="chapter-2"></a>
Content for chapter one.
## Chapter 3 <a id="chapter-3"></a>
Content for chapter one.
```
**NOTE** that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
## Images {#images}
Images have a similar syntax to links but include a preceding exclamation point.
```markdown
![Minion](http://octodex.github.com/images/minion.png)
```
![Minion](http://octodex.github.com/images/minion.png)
or
```markdown
![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
```
![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
Like links, Images also have a footnote style syntax
### Alternative usage : note images
```markdown
![Alt text][id]
```
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: http://octodex.github.com/images/dojocat.jpg "The Dojocat"
[id]: http://octodex.github.com/images/dojocat.jpg "The Dojocat"
### Resizing image
Add HTTP parameters `width` and/or `height` to the link image to resize the image. Values are CSS values (default is `auto`).
```markdown
![Minion](http://octodex.github.com/images/minion.png?width=20pc)
```
![Minion](http://octodex.github.com/images/minion.png?width=20pc)
```markdown
![Minion](http://octodex.github.com/images/minion.png?height=50px)
```
![Minion](http://octodex.github.com/images/minion.png?height=50px)
```markdown
![Minion](http://octodex.github.com/images/minion.png?height=50px&width=300px)
```
![Minion](http://octodex.github.com/images/minion.png?height=50px&width=300px)
### Add CSS classes
Add a HTTP `classes` parameter to the link image to add CSS classes. `shadow`and `border` are available but you could define other ones.
```markdown
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?classes=shadow)
```
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?width=40pc&classes=shadow)
```markdown
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?classes=border)
```
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?width=40pc&classes=border)
```markdown
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?classes=border,shadow)
```
![stormtroopocat](http://octodex.github.com/images/stormtroopocat.jpg?width=40pc&classes=border,shadow)
Documentation/docs-site/themes/learn/exampleSite/content/cont/menushortcuts.en.md
-109
View File
@@ -1,109 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Menu extra shortcuts
weight: 25
---
You can define additional menu entries or shortcuts in the navigation menu without any link to content.
## Basic configuration
Edit the website configuration `config.toml` and add a `[[menu.shortcuts]]` entry for each link your want to add.
Example from the current website:
[[menu.shortcuts]]
name = "<i class='fa fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[menu.shortcuts]]
name = "<i class='fa fa-camera'></i> Showcases"
url = "/showcase"
weight = 11
[[menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[menu.shortcuts]]
name = "<i class='fa fa-bullhorn'></i> Credits"
url = "/credits"
weight = 30
By default, shortcuts are preceded by a title. This title can be disabled by setting `disableShortcutsTitle=true`.
However, if you want to keep the title but change its value, it can be overriden by changing your local i18n translation string configuration.
For example, in your local `i18n/en.toml` file, add the following content
[Shortcuts-Title]
other = "<Your value>"
Read more about [hugo menu](https://gohugo.io/extras/menus/) and [hugo i18n translation strings](https://gohugo.io/content-management/multilingual/#translation-of-strings)
## Configuration for Multilingual mode {#i18n}
When using a multilingual website, you can set different menus for each language. In the `config.toml` file, prefix your menu configuration by `Languages.<language-id>`.
Example from the current website:
[Languages]
[Languages.en]
title = "Documentation for Hugo Learn Theme"
weight = 1
languageName = "English"
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-camera'></i> Showcases"
url = "/showcase"
weight = 11
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-bullhorn'></i> Credits"
url = "/credits"
weight = 30
[Languages.fr]
title = "Documentation du thème Hugo Learn"
weight = 2
languageName = "Français"
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-github'></i> Repo Github"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-camera'></i> Vitrine"
url = "/showcase"
weight = 11
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Documentation Hugo"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-bullhorn'></i> Crédits"
url = "/credits"
weight = 30
Read more about [hugo menu](https://gohugo.io/extras/menus/) and [hugo multilingual menus](https://gohugo.io/content-management/multilingual/#menus)
Documentation/docs-site/themes/learn/exampleSite/content/cont/menushortcuts.fr.md
-109
View File
@@ -1,109 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Raccourcis du menu
weight: 25
---
Vous pouvez définir des entrées ou raccourcis supplémentaires dans le menu sans avoir besoin d'être lié à un contenu du site.
## Configuration simple
Editez le fichier de configuration `config.toml` et ajoutez une entrée `[[menu.shortcuts]]` pour chaque lien que vous voulez ajouter.
Exemple pour ce site:
[[menu.shortcuts]]
name = "<i class='fa fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[menu.shortcuts]]
name = "<i class='fa fa-camera'></i> Showcases"
url = "/showcase"
weight = 11
[[menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[menu.shortcuts]]
name = "<i class='fa fa-bullhorn'></i> Credits"
url = "/credits"
weight = 30
Par défaut, les raccourcis sont précédés par un titre. Ce titre peut être désactivé en ajouter le paramètre `disableShortcutsTitle=true` dans la section `params` de votre `config.toml`.
Cependant, si vous voulez garder le titre mais changer sa valeur, vous pouvez modifier votre configuration multilangue locale en changeant les *translation string*.
Par exemple, dans votre fichier local `i18n/en.toml`, ajouter le contenu
[Shortcuts-Title]
other = "<Votre valeur>"
Plus d'infos sur [les menus Hugo](https://gohugo.io/extras/menus/) et sur [les translations strings](https://gohugo.io/content-management/multilingual/#translation-of-strings)
## Configuration pour le mode multi-langue {#i18n}
Quand vous utilisez un site multi-langue, vous pouvez avoir des menus différents pour chaque langage. Dans le fichier de configuration `config.toml`, préfixez votre configuration par `Languages.<language-id>`.
Par exemple, avec ce site :
[Languages]
[Languages.en]
title = "Documentation for Hugo Learn Theme"
weight = 1
languageName = "English"
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-camera'></i> Showcases"
url = "/showcase"
weight = 11
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[Languages.en.menu.shortcuts]]
name = "<i class='fa fa-bullhorn'></i> Credits"
url = "/credits"
weight = 30
[Languages.fr]
title = "Documentation du thème Hugo Learn"
weight = 2
languageName = "Français"
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-github'></i> Repo Github"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-camera'></i> Vitrine"
url = "/showcase"
weight = 11
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Documentation Hugo"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20
[[Languages.fr.menu.shortcuts]]
name = "<i class='fa fa-bullhorn'></i> Crédits"
url = "/credits"
weight = 30
Plus d'infos sur [les menus Hugo](https://gohugo.io/extras/menus/) et les [menus multi-langue Hugo](https://gohugo.io/content-management/multilingual/#menus)
Documentation/docs-site/themes/learn/exampleSite/content/cont/pages/_index.en.md
-166
View File
@@ -1,166 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Pages organization
weight: 5
---
In **Hugo**, pages are the core of your site. Once it is configured, pages are definitely the added value to your documentation site.
## Folders
Organize your site like [any other Hugo project](https://gohugo.io/content/organization/). Typically, you will have a *content* folder with all your pages.
content
├── level-one
│ ├── level-two
│ │ ├── level-three
│ │ │ ├── level-four
│ │ │ │ ├── _index.md <-- /level-one/level-two/level-three/level-four
│ │ │ │ ├── page-4-a.md <-- /level-one/level-two/level-three/level-four/page-4-a
│ │ │ │ ├── page-4-b.md <-- /level-one/level-two/level-three/level-four/page-4-b
│ │ │ │ └── page-4-c.md <-- /level-one/level-two/level-three/level-four/page-4-c
│ │ │ ├── _index.md <-- /level-one/level-two/level-three
│ │ │ ├── page-3-a.md <-- /level-one/level-two/level-three/page-3-a
│ │ │ ├── page-3-b.md <-- /level-one/level-two/level-three/page-3-b
│ │ │ └── page-3-c.md <-- /level-one/level-two/level-three/page-3-c
│ │ ├── _index.md <-- /level-one/level-two
│ │ ├── page-2-a.md <-- /level-one/level-two/page-2-a
│ │ ├── page-2-b.md <-- /level-one/level-two/page-2-b
│ │ └── page-2-c.md <-- /level-one/level-two/page-2-c
│ ├── _index.md <-- /level-one
│ ├── page-1-a.md <-- /level-one/page-1-a
│ ├── page-1-b.md <-- /level-one/page-1-b
│ └── page-1-c.md <-- /level-one/page-1-c
├── _index.md <-- /
└── page-top.md <-- /page-top
{{% notice note %}}
`_index.md` is required in each folder, it’s your “folder home page”
{{% /notice %}}
## Types
**Hugo-theme-learn** defines two types of pages. *Default* and *Chapter*. Both can be used at any level of the documentation, the only difference being layout display.
A **Chapter** displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found under it.
You can define any HTML as prefix for the menu. In the example below, it's just a number but that could be an [icon](https://fortawesome.github.io/Font-Awesome/).
![Chapter page](/cont/pages/images/pages-chapter.png?width=50pc)
```markdown
+++
title = "Basics"
chapter = true
weight = 5
pre = "<b>1. </b>"
+++
### Chapter 1
# Basics
Discover what this Hugo theme is all about and the core-concepts behind it.
```
To tell **Hugo-theme-learn** to consider a page as a chapter, set `chapter=true` in the Front Matter of the page.
A **Default** page is any other content page.
![Default page](/cont/pages/images/pages-default.png?width=50pc)
```toml
+++
title = "Installation"
weight = 15
+++
```
The following steps are here to help you initialize your new website. If you don't know Hugo at all, we strongly suggest you to train by following this [great documentation for beginners](https://gohugo.io/overview/quickstart/).
## Create your project
Hugo provides a `new` command to create a new website.
```
hugo new site <new_project>
```
**Hugo-theme-learn** provides [archetypes]({{< relref "cont/archetypes.fr.md" >}}) to help you create this kind of pages.
## Front Matter configuration
Each Hugo page has to define a [Front Matter](https://gohugo.io/content/front-matter/) in *yaml*, *toml* or *json*.
**Hugo-theme-learn** uses the following parameters on top of Hugo ones :
```toml
+++
# Table of content (toc) is enabled by default. Set this parameter to true to disable it.
# Note: Toc is always disabled for chapter pages
disableToc = "false"
# If set, this will be used for the page's menu entry (instead of the `title` attribute)
menuTitle = ""
# The title of the page in menu will be prefixed by this HTML content
pre = ""
# The title of the page in menu will be postfixed by this HTML content
post = ""
# Set the page as a chapter, changing the way it's displayed
chapter = false
# Hide a menu entry by setting this to true
hidden = false
# Display name of this page modifier. If set, it will be displayed in the footer.
LastModifierDisplayName = ""
# Email of this page modifier. If set with LastModifierDisplayName, it will be displayed in the footer
LastModifierEmail = ""
+++
```
### Add icon to a menu entry
In the page frontmatter, add a `pre` param to insert any HTML code before the menu label. The example below uses the Github icon.
```toml
+++
title = "Github repo"
pre = "<i class='fa fa-github'></i> "
+++
```
![Title with icon](/cont/pages/images/frontmatter-icon.png)
### Ordering sibling menu/page entries
Hugo provides a [flexible way](https://gohugo.io/content/ordering/) to handle order for your pages.
The simplest way is to set `weight` parameter to a number.
```toml
+++
title = "My page"
weight = 5
+++
```
### Using a custom title for menu entries
By default, **Hugo-theme-learn** will use a page's `title` attribute for the menu item (or `linkTitle` if defined).
But a page's title has to be descriptive on its own while the menu is a hierarchy.
We've added the `menuTitle` parameter for that purpose:
For example (for a page named `content/install/linux.md`):
```toml
+++
title = "Install on Linux"
menuTitle = "Linux"
+++
```
## Homepage
To configure your home page, you basically have three choices:
1. Create an `_index.md` document in `content` folder and fill the file with *Markdown content*
2. Create an `index.html` file in the `static` folder and fill the file with *HTML content*
3. Configure your server to automatically redirect home page to one your documentation page
Documentation/docs-site/themes/learn/exampleSite/content/cont/pages/_index.fr.md
-146
View File
@@ -1,146 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Organisation des pages
weight: 5
---
Dans **Hugo**, les pages sont le coeur de votre site. Une fois configurées, les pages sont la valeur ajoutée de votre site de documentation.
## Dossiers
Organisez votre site comment n'importe quel autre [projet Hugo](https://gohugo.io/content/organization/). Typiquement, vous allez avoir un dossier *content* avec vos pages.
content
├── niveau-un
│ ├── niveau-deux
│ │ ├── niveau-trois
│ │ │ ├── niveau-quatre
│ │ │ │ ├── _index.md <-- /niveau-un/niveau-deux/niveau-trois/niveau-quatre
│ │ │ │ ├── page-4-a.md <-- /niveau-un/niveau-deux/niveau-trois/niveau-quatre/page-4-a
│ │ │ │ ├── page-4-b.md <-- /niveau-un/niveau-deux/niveau-trois/niveau-quatre/page-4-b
│ │ │ │ └── page-4-c.md <-- /niveau-un/niveau-deux/niveau-trois/niveau-quatre/page-4-c
│ │ │ ├── _index.md <-- /niveau-un/niveau-deux/niveau-trois
│ │ │ ├── page-3-a.md <-- /niveau-un/niveau-deux/niveau-trois/page-3-a
│ │ │ ├── page-3-b.md <-- /niveau-un/niveau-deux/niveau-trois/page-3-b
│ │ │ └── page-3-c.md <-- /niveau-un/niveau-deux/niveau-trois/page-3-c
│ │ ├── _index.md <-- /niveau-un/niveau-deux
│ │ ├── page-2-a.md <-- /niveau-un/niveau-deux/page-2-a
│ │ ├── page-2-b.md <-- /niveau-un/niveau-deux/page-2-b
│ │ └── page-2-c.md <-- /niveau-un/niveau-deux/page-2-c
│ ├── _index.md <-- /niveau-un
│ ├── page-1-a.md <-- /niveau-un/page-1-a
│ ├── page-1-b.md <-- /niveau-un/page-1-b
│ └── page-1-c.md <-- /niveau-un/page-1-c
├── _index.md <-- /
└── premiere-page.md <-- /premiere-page
{{% notice note %}}
Le fichier `_index.md` est obligatoire dans chaque dossier, c'est en quelques rotes votre page d'accueil pour le dossier.
{{% /notice %}}
## Types
**Hugo-theme-learn** définit deux types de pages. *Défaut* et *Chapitre*. Les deux sont utilisables à n'importe quel niveau du site, la seule différence est dans l'affichage.
Un **Chapitre** affiche une page vouée à être une introduction pour un ensemble de pages filles. Habituellement, il va seulement contenir un titre et un résumé de la section.
Vous pouvez définir n'importe quel contenu HTML comme préfixe de l'entrée du menu. Dans l'exemple ci-dessous, c'est juste un nombre mais vous pourriez utiliser une [icône](https://fortawesome.github.io/Font-Awesome/).
![Page Chapitre](/cont/pages/images/pages-chapter.png?width=50pc)
```markdown
+++
title = "Démarrage"
weight = 5
pre = "<b>1. </b>"
chapter = true
+++
### Chapitre 1
# Démarrage
Découvrez comment utiliser ce thème Hugo et apprenez en les concepts
```
Pour dire à **Hugo-theme-learn** de considérer la page comme un chapitre, configure `chapter=true` dans le Front Matter de la page.
Une page **Défaut** est n'importe quelle autre page.
![Page défaut](/cont/pages/images/pages-default.png?width=50pc)
+++
title = "Installation"
weight = 15
+++
The following steps are here to help you initialize your new website. If you don't know Hugo at all, we strongly suggest you to train by following this [great documentation for beginners](https://gohugo.io/overview/quickstart/).
## Create your project
Hugo provides a `new` command to create a new website.
```
hugo new site <new_project>
```
**Hugo-theme-learn** fournit des [archétypes]({{< relref "cont/archetypes.fr.md" >}}) pour vous aider à créer ce type de pages.
## Configuration des Front Matter
Chaque page Hugo doit définir un [Front Matter](https://gohugo.io/content/front-matter/) dans le format *yaml*, *toml* ou *json*.
**Hugo-theme-learn** utilise les paramètres suivant en plus de ceux définis par Hugo:
```toml
+++
# Le Sommaire (table of content = toc) est activé par défaut. Modifier ce paramètre à true pour le désactiver.
# Note: Le sommaire est toujours désactivé pour les chapitres
disableToc = "false"
# Le titre de la page dans le menu sera préfixé par ce contentu HTML
pre = ""
# Le titre de la page dans le menu sera suffixé par ce contentu HTML
post = ""
# Modifier le type de la page pour changer l'affichage
chapter = false
# Cache la page du menu
hidden = false
# Nom de la personne qui a modifié la page. Quand configuré, sera affiché dans le pied de page.
LastModifierDisplayName = ""
# Email de la personne qui a modifié la page. Quand configuré, sera affiché dans le pied de page.
LastModifierEmail = ""
+++
```
### Ajouter une icône à une entrée du menu
Dans le Front Matter, ajouter un paramètre `pre` pour insérer du code HTML qui s'affichera avant le label du menu. L'exemple ci-dessous utilise l'icône de Github.
```toml
+++
title = "Repo Github"
pre = "<i class='fa fa-github'></i> "
+++
```
![Titre avec icône](/cont/pages/images/frontmatter-icon.png)
### Ordonner les entrées dans le menu
Hugo permet de modifier facilement [l'ordre des menu](https://gohugo.io/content/ordering/).
La manière la plus simple est de configurer le paramètre `weight` avec un nombre.
```toml
+++
title = "Ma page"
weight = 5
+++
```
## Page d'accueil
Pour configurer votre page d'accueil, vous avez trois choix:
1. Créer une page `_index.md` dans le dossier `content` et remplissez le fichier avec du *contenu Markdown*
2. Créer une page `index.html` dans le dossier `static` et remplissez le fichier avec du *contenu HTML*
3. Configurez votre serveur pour automatiquement rediriger la page d'accueil vers l'une de vos pages.
Documentation/docs-site/themes/learn/exampleSite/content/cont/pages/images/frontmatter-icon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

Documentation/docs-site/themes/learn/exampleSite/content/cont/pages/images/pages-chapter.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 243 KiB

Documentation/docs-site/themes/learn/exampleSite/content/cont/pages/images/pages-default.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 311 KiB

Documentation/docs-site/themes/learn/exampleSite/content/credits.en.md
-28
View File
@@ -1,28 +0,0 @@
---
title: Credits
disableToc: true
---
## Contributors
Thanks to them <i class="fa fa-heart"></i> for making Open Source Software a better place !
{{% ghcontributors "https://api.github.com/repos/matcornic/hugo-theme-learn/contributors?per_page=100" %}}
And a special thanks to [@vjeantet](https://github.com/vjeantet) for his work on [docdock](https://github.com/vjeantet/hugo-theme-docdock), a fork of hugo-theme-learn. v2.0.0 of this theme is inspired by his work.
## Packages and libraries
* [mermaid](https://knsv.github.io/mermaid) - generation of diagram and flowchart from text in a similar manner as markdown
* [font awesome](http://fontawesome.io/) - the iconic font and CSS framework
* [jQuery](https://jquery.com) - The Write Less, Do More, JavaScript Library
* [lunr](https://lunrjs.com) - Lunr enables you to provide a great search experience without the need for external, server-side, search services...
* [horsey](https://bevacqua.github.io/horsey/) - Progressive and customizable autocomplete component
* [clipboard.js](https://zenorocha.github.io/clipboard.js) - copy text to clipboard
* [highlight.js](https://highlightjs.org) - Javascript syntax highlighter
* [modernizr](https://modernizr.com) - A JavaScript toolkit that allows web developers to use new CSS3 and HTML5 features while maintaining a fine level of control over browsers that don't support
## Tooling
* [Netlify](https://www.netlify.com) - Continuous deployement and hosting of this documentation
* [Hugo](https://gohugo.io/)
Documentation/docs-site/themes/learn/exampleSite/content/credits.fr.md
-28
View File
@@ -1,28 +0,0 @@
---
title: Crédits
disableToc: true
---
## Contributeurs
Merci à eux <i class="fa fa-heart"></i> de rendre le monde Open Source meilleur !
{{% ghcontributors "https://api.github.com/repos/matcornic/hugo-theme-learn/contributors?per_page=100" %}}
Et un grand merci à [@vjeantet](https://github.com/vjeantet) pour son travail sur [docdock](https://github.com/vjeantet/hugo-theme-docdock), un fork de _hugo-theme-learn_. La v2.0.0 du thème est en grande partie inspirée de son travail.
## Packages et librairies
* [mermaid](https://knsv.github.io/mermaid) - géneration de diagrames et graphiques à partir de texte similaire à Markdown
* [font awesome](http://fontawesome.io/) - Le framework de polices iconiques
* [jQuery](https://jquery.com) - La plus connue des librairies Javascript
* [lunr](https://lunrjs.com) - Lunr fournit des fonctions de recherche sans service externe
* [horsey](https://bevacqua.github.io/horsey/) - Autocomplétion de composants (utiliser pour les suggestions de recherche)
* [clipboard.js](https://zenorocha.github.io/clipboard.js) - Copier le texte dans le presse-papier
* [highlight.js](https://highlightjs.org) - Mise en valeur de syntaxes
* [modernizr](https://modernizr.com) - Une boite à outil Javascript qui permet aux développeurs d'utiliser les dernières fonctionnalités de CSS et HTML5, même sur de vieux navigateurs.
## Outils
* [Netlify](https://www.netlify.com) - Déploiement continue et hébergement de cette documentation
* [Hugo](https://gohugo.io/)
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/_index.en.md
-16
View File
@@ -1,16 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Shortcodes
pre: "<b>3. </b>"
weight: 15
---
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
But this happens to be a bad idea. Everyone uses Markdown because it's pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/). A shortcode is a simple snippet inside a page.
**Hugo-theme-learn** provides multiple shortcodes on top of existing ones.
{{%children style="h2" description="true" %}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/_index.fr.md
-16
View File
@@ -1,16 +0,0 @@
---
date: 2016-04-09T16:50:16+02:00
title: Shortcodes
pre: "<b>3. </b>"
weight: 15
---
Hugo utilise Markdown pour son format simple. Cependant, il y a beaucoup de chose que Markdown ne supporte pas bien. On pourrait utiliser du HTML pur pour améliorer les capacité du Markdown.
Mais c'est probablement une mauvaise idée. Tout le monde utilise le Markdown parce que c'est pur et simple à lire même lorsqu'il est affiché en texte brut. Vous devez éviter le HTML autant que possible pour garder le contenu simple.
Cependant, pour éviter les limitations, Hugo a créé les [shortcodes](https://gohugo.io/extras/shortcodes/). Un shortcode est un bout de code (*snippet*) dans une page.
**Hugo-theme-learn** fournit de multiple shortcodes en plus de ceux existant.
{{%children style="h2" description="true" %}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.en.files/BachGavotteShort.mp3
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.en.files/hugo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.en.md
-85
View File
@@ -1,85 +0,0 @@
---
title: Attachments
description : "The Attachments shortcode displays a list of files attached to a page."
---
The Attachments shortcode displays a list of files attached to a page.
{{% attachments /%}}
## Usage
The shortcurt lists files found in a **specific folder**.
Currently, it support two implementations for pages
1. If your page is a markdown file, attachements must be place in a **folder** named like your page and ending with **.files**.
> * content
> * _index.md
> * page.files
> * attachment.pdf
> * page.md
2. If your page is a **folder**, attachements must be place in a nested **'files'** folder.
> * content
> * _index.md
> * page
> * index.md
> * files
> * attachment.pdf
Be aware that if you use a multilingual website, you will need to have as many folders as languages.
That's all !
### Parameters
| Parameter | Default | Description |
|:--|:--|:--|
| title | "Attachments" | List's title |
| style | "" | Choose between "orange", "grey", "blue" and "green" for nice style |
| pattern | ".*" | A regular expressions, used to filter the attachments by file name. <br/><br/>The **pattern** parameter value must be [regular expressions](https://en.wikipedia.org/wiki/Regular_expression).
For example:
* To match a file suffix of 'jpg', use **.*jpg** (not *.jpg).
* To match file names ending in 'jpg' or 'png', use **.*(jpg|png)**
### Examples
#### List of attachments ending in pdf or mp4
{{%/*attachments title="Related files" pattern=".*(pdf|mp4)"/*/%}}
renders as
{{%attachments title="Related files" pattern=".*(pdf|mp4)"/%}}
#### Colored styled box
{{%/*attachments style="orange" /*/%}}
renders as
{{% attachments style="orange" /%}}
{{%/*attachments style="grey" /*/%}}
renders as
{{% attachments style="grey" /%}}
{{%/*attachments style="blue" /*/%}}
renders as
{{% attachments style="blue" /%}}
{{%/*attachments style="green" /*/%}}
renders as
{{% attachments style="green" /%}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.fr.files/BachGavotteShort.mp3
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.fr.files/Carroll_AliceAuPaysDesMerveilles.pdf
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.fr.files/adivorciarsetoca00cape.pdf
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.fr.files/hugo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.fr.files/movieselectricsheep-flock-244-32500-2.mp4
BIN
View File
Binary file not shown.
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/attachments.fr.md
-85
View File
@@ -1,85 +0,0 @@
---
title: Attachments (Pièces jointes)
description : "The Attachments shortcode displays a list of files attached to a page."
---
Le shortcode *Attachments* affiche une liste de pièces jointes d'une page.
{{% attachments /%}}
## Utilisation
Le shortcode affiche la liste de fichiers trouvés dans un **dossier spécifique**
A l'heure actuelle, il supporte deux implémentations
1. Si votre page est un fichier Markdown, les pièces jointes doivent être placée dans un **dossier** nommé comme le nom de la page et suffixé par **.files**.
> * content
> * _index.md
> * page.files
> * attachment.pdf
> * page.md
2. Si votre page est un **dossier**, les pièces jointes doivent être placées dans un dossier fils **'files'**.
> * content
> * _index.md
> * page
> * index.md
> * files
> * attachment.pdf
Attention, si votre site est multi-langue, vous devrez avec autant de dossier qu'il y a de langues.
C'est tout !
### Paramètres
| Paramètre | Défaut | Description |
|:--|:--|:--|
| title | "Pièces jointes" | Titre de la liste |
| style | "" | Choisir entre "orange", "grey", "blue" et "green" pour un style plus sympa |
| pattern | ".*" | Une expression régulière, utilisée pour filtrer les pièces jointes par leur nom de fichier. <br/><br/>Le paramètre **pattern** doit être une [expression régulière](https://en.wikipedia.org/wiki/Regular_expression).
Par exemple:
* Pour trouver les fichiers avec le suffixe 'jpg', utilisez **.*jpg** (pas *.jpg).
* Pour trouver les fichiers avec les suffixe 'jpg' ou 'png', utilisez **.*(jpg|png)**
### Exemples
#### Lister les pièces jointes de type pdf ou mp4
{{%/*attachments title="Fichiers associés" pattern=".*(pdf|mp4)"/*/%}}
s'affiche comme
{{%attachments title="Fichiers associés" pattern=".*(pdf|mp4)"/%}}
#### Modifier le style
{{%/*attachments style="orange" /*/%}}
s'affiche comme
{{% attachments style="orange" /%}}
{{%/*attachments style="grey" /*/%}}
s'affiche comme
{{% attachments style="grey" /%}}
{{%/*attachments style="blue" /*/%}}
s'affiche comme
{{% attachments style="blue" /%}}
{{%/*attachments style="green" /*/%}}
s'affiche comme
{{% attachments style="green" /%}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/button.en.md
-16
View File
@@ -1,16 +0,0 @@
---
title: Button
description : "Nice buttons on your page."
---
A button is a just a clickable button with optional icon.
```
{{%/* button href="https://getgrav.org/" */%}}Get Grav{{%/* /button */%}}
{{%/* button href="https://getgrav.org/" icon="fa fa-download" */%}}Get Grav with icon{{%/* /button */%}}
{{%/* button href="https://getgrav.org/" icon="fa fa-download" icon-position="right" */%}}Get Grav with icon right{{%/* /button */%}}
```
{{% button href="https://getgrav.org/" %}}Get Grav{{% /button %}}
{{% button href="https://getgrav.org/" icon="fa fa-download" %}}Get Grav with icon{{% /button %}}
{{% button href="https://getgrav.org/" icon="fa fa-download" icon-position="right" %}}Get Grav with icon right{{% /button %}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/button.fr.md
-16
View File
@@ -1,16 +0,0 @@
---
title: Button (Bouton)
description : "De beaux boutons sur votre page."
---
Le shortcode *button* est simplement un bouton cliquable avec une icône optionnelle.
```
{{%/* button href="https://getgrav.org/" */%}}Téléchargez Grav{{%/* /button */%}}
{{%/* button href="https://getgrav.org/" icon="fa fa-download" */%}}Téléchargez Grav avec icône{{%/* /button */%}}
{{%/* button href="https://getgrav.org/" icon="fa fa-download" icon-position="right" */%}}Téléchargez Grav avec icône à droite{{%/* /button */%}}
```
{{% button href="https://getgrav.org/" %}}Téléchargez Grav{{% /button %}}
{{% button href="https://getgrav.org/" icon="fa fa-download" %}}Téléchargez Grav avec icône{{% /button %}}
{{% button href="https://getgrav.org/" icon="fa fa-download" icon-position="right" %}}Téléchargez Grav avec icône à droite{{% /button %}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/_index.en.md
-45
View File
@@ -1,45 +0,0 @@
---
title : Children
description : List the child pages of a page
---
Use the children shortcode to list the child pages of a page and the further descendants (children's children). By default, the shortcode displays links to the child pages.
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| page | _current_ | Specify the page name (section name) to display children for |
| style | "li" | Choose the style used to display descendants. It could be any HTML tag name |
| showhidden | "false" | When true, child pages hidden from the menu will be displayed |
| description | "false" | Allows you to include a short text under each page in the list.<br/>when no description exists for the page, children shortcode takes the first 70 words of your content. [read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/) |
| depth | 1 | Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages. <br/> **Tips:** set 999 to get all descendants|
| sort | none | Sort Children By<br><li><strong>Weight</strong> - to sort on menu order</li><li><strong>Name</strong> - to sort alphabetically on menu label</li><li><strong>Identifier</strong> - to sort alphabetically on identifier set in frontmatter</li><li><strong>URL</strong> - URL</li> |
## Demo
{{%/* children */%}}
{{% children %}}
{{%/* children description="true" */%}}
{{%children description="true" %}}
{{%/* children depth="3" showhidden="true" */%}}
{{% children depth="3" showhidden="true" %}}
{{%/* children style="h2" depth="3" description="true" */%}}
{{% children style="h2" depth="3" description="true" %}}
{{%/* children style="div" depth="999" */%}}
{{% children style="div" depth="999" %}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/_index.fr.md
-45
View File
@@ -1,45 +0,0 @@
---
title : Children (Pages filles)
description : Liste les pages filles de la page
---
Utilisez le shortcode *children* pour lister les pages filles de la page et tous ses déscendants (pages filles de pages filles). Par défaut, le shortcode affiche des liens vers les pages filles.
## Utilisation
| Paramètre | Défaut | Description |
|:--|:--|:--|
| page | _current_ | Spécifie le nom de la page (nom de la section) à afficher |
| style | "li" | Choisi le style à utiliser pour afficher les descendants. Cela peut être n'importe quel balise HTML |
| showhidden | "false" | Quand *true*, pages filles cachées dans le menu seront affichées quand même |
| description | "false" | Permet d'inclure le texte de la description de la page sous chaque entré de la liste.<br/>quand aucune description existe pour la page, le shortcode prend les 70 premiers mots du contenu. [plus d'infos sur gohugo.io](https://gohugo.io/content/summaries/) |
| depth | 1 | Nombre de descendants à afficher. Par exemple, si la valeur est 2, le shortcode va afficher 2 niveaux de pages filels. <br/> **Astuce:** Utilisez 999 pour avoir tous les descendants|
| sort | <rien> | Tri les pages filles par<br><li><strong>Weight</strong> - Poids</li><li><strong>Name</strong> - Nom</li><li><strong>Identifier</strong> - Trier alphabétiquement par identifiant configuré dans le front matter</li><li><strong>URL</strong> - URL</li> |
## Démo
{{%/* children */%}}
{{% children %}}
{{%/* children description="true" */%}}
{{%children description="true" %}}
{{%/* children depth="3" showhidden="true" */%}}
{{% children depth="3" showhidden="true" %}}
{{%/* children style="h2" depth="3" description="true" */%}}
{{% children style="h2" depth="3" description="true" %}}
{{%/* children style="div" depth="999" */%}}
{{% children style="div" depth="999" %}}
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/_index.en.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1"
description = "This is a demo child page"
+++
This is a demo child page
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/_index.fr.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1"
description = "Ceci est une page test"
+++
Ceci est une page de demo
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.en.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1-1"
description = "This is a demo child page"
+++
This is a demo child page
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.fr.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1-1"
description = "Ceci est une page test"
+++
Ceci est une page de demo
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.en.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1-1-1"
description = "This is a demo child page"
+++
This is a demo child page
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.fr.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1-1-1"
description = "Ceci est une page test"
+++
Ceci est une page de demo
Documentation/docs-site/themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.en.md
-6
View File
@@ -1,6 +0,0 @@
+++
title = "page 1-1-1-1"
description = "This is a demo child page"
+++
This is a demo child page

Some files were not shown because too many files have changed in this diff Show More