2353 lines
214 KiB
HTML
2353 lines
214 KiB
HTML
|
<!DOCTYPE html><html lang="fr">
|
|||
|
|
<head><meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>Hugo(generateur-de-site-statique)-Installation-Utilisation-sur-Archlinux/Debian - YannStatic</title>
|
|||
|
|
|
|||
|
|
<meta name="description" content="Hugo archlinux">
|
|||
|
|
<link rel="canonical" href="https://static.rnmkcy.eu/2019/12/25/Hugo(generateur-de-site-statique)-Installation-Utilisation-sur-Debian.html"><link rel="alternate" type="application/rss+xml" title="YannStatic" href="/feed.xml">
|
|||
|
|
|
|||
|
|
<!-- - include head/favicon.html - -->
|
|||
|
|
<link rel="shortcut icon" type="image/png" href="/assets/favicon/favicon.png"><link rel="stylesheet" href="/assets/css/main.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" ><!-- start custom head snippets --><link rel="stylesheet" href="/assets/css/expand.css">
|
|||
|
|
<!-- end custom head snippets --><script>(function() {
|
|||
|
|
window.isArray = function(val) {
|
|||
|
|
return Object.prototype.toString.call(val) === '[object Array]';
|
|||
|
|
};
|
|||
|
|
window.isString = function(val) {
|
|||
|
|
return typeof val === 'string';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.hasEvent = function(event) {
|
|||
|
|
return 'on'.concat(event) in window.document;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.isOverallScroller = function(node) {
|
|||
|
|
return node === document.documentElement || node === document.body || node === window;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.isFormElement = function(node) {
|
|||
|
|
var tagName = node.tagName;
|
|||
|
|
return tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.pageLoad = (function () {
|
|||
|
|
var loaded = false, cbs = [];
|
|||
|
|
window.addEventListener('load', function () {
|
|||
|
|
var i;
|
|||
|
|
loaded = true;
|
|||
|
|
if (cbs.length > 0) {
|
|||
|
|
for (i = 0; i < cbs.length; i++) {
|
|||
|
|
cbs[i]();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return {
|
|||
|
|
then: function(cb) {
|
|||
|
|
cb && (loaded ? cb() : (cbs.push(cb)));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
})();
|
|||
|
|
})();
|
|||
|
|
(function() {
|
|||
|
|
window.throttle = function(func, wait) {
|
|||
|
|
var args, result, thisArg, timeoutId, lastCalled = 0;
|
|||
|
|
|
|||
|
|
function trailingCall() {
|
|||
|
|
lastCalled = new Date;
|
|||
|
|
timeoutId = null;
|
|||
|
|
result = func.apply(thisArg, args);
|
|||
|
|
}
|
|||
|
|
return function() {
|
|||
|
|
var now = new Date,
|
|||
|
|
remaining = wait - (now - lastCalled);
|
|||
|
|
|
|||
|
|
args = arguments;
|
|||
|
|
thisArg = this;
|
|||
|
|
|
|||
|
|
if (remaining <= 0) {
|
|||
|
|
clearTimeout(timeoutId);
|
|||
|
|
timeoutId = null;
|
|||
|
|
lastCalled = now;
|
|||
|
|
result = func.apply(thisArg, args);
|
|||
|
|
} else if (!timeoutId) {
|
|||
|
|
timeoutId = setTimeout(trailingCall, remaining);
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
})();
|
|||
|
|
(function() {
|
|||
|
|
var Set = (function() {
|
|||
|
|
var add = function(item) {
|
|||
|
|
var i, data = this._data;
|
|||
|
|
for (i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i] === item) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.size ++;
|
|||
|
|
data.push(item);
|
|||
|
|
return data;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var Set = function(data) {
|
|||
|
|
this.size = 0;
|
|||
|
|
this._data = [];
|
|||
|
|
var i;
|
|||
|
|
if (data.length > 0) {
|
|||
|
|
for (i = 0; i < data.length; i++) {
|
|||
|
|
add.call(this, data[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
Set.prototype.add = add;
|
|||
|
|
Set.prototype.get = function(index) { return this._data[index]; };
|
|||
|
|
Set.prototype.has = function(item) {
|
|||
|
|
var i, data = this._data;
|
|||
|
|
for (i = 0; i < data.length; i++) {
|
|||
|
|
if (this.get(i) === item) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
Set.prototype.is = function(map) {
|
|||
|
|
if (map._data.length !== this._data.length) { return false; }
|
|||
|
|
var i, j, flag, tData = this._data, mData = map._data;
|
|||
|
|
for (i = 0; i < tData.length; i++) {
|
|||
|
|
for (flag = false, j = 0; j < mData.length; j++) {
|
|||
|
|
if (tData[i] === mData[j]) {
|
|||
|
|
flag = true;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!flag) { return false; }
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
Set.prototype.values = function() {
|
|||
|
|
return this._data;
|
|||
|
|
};
|
|||
|
|
return Set;
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
window.Lazyload = (function(doc) {
|
|||
|
|
var queue = {js: [], css: []}, sources = {js: {}, css: {}}, context = this;
|
|||
|
|
var createNode = function(name, attrs) {
|
|||
|
|
var node = doc.createElement(name), attr;
|
|||
|
|
for (attr in attrs) {
|
|||
|
|
if (attrs.hasOwnProperty(attr)) {
|
|||
|
|
node.setAttribute(attr, attrs[attr]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return node;
|
|||
|
|
};
|
|||
|
|
var end = function(type, url) {
|
|||
|
|
var s, q, qi, cbs, i, j, cur, val, flag;
|
|||
|
|
if (type === 'js' || type ==='css') {
|
|||
|
|
s = sources[type], q = queue[type];
|
|||
|
|
s[url] = true;
|
|||
|
|
for (i = 0; i < q.length; i++) {
|
|||
|
|
cur = q[i];
|
|||
|
|
if (cur.urls.has(url)) {
|
|||
|
|
qi = cur, val = qi.urls.values();
|
|||
|
|
qi && (cbs = qi.callbacks);
|
|||
|
|
for (flag = true, j = 0; j < val.length; j++) {
|
|||
|
|
cur = val[j];
|
|||
|
|
if (!s[cur]) {
|
|||
|
|
flag = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (flag && cbs && cbs.length > 0) {
|
|||
|
|
for (j = 0; j < cbs.length; j++) {
|
|||
|
|
cbs[j].call(context);
|
|||
|
|
}
|
|||
|
|
qi.load = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var load = function(type, urls, callback) {
|
|||
|
|
var s, q, qi, node, i, cur,
|
|||
|
|
_urls = typeof urls === 'string' ? new Set([urls]) : new Set(urls), val, url;
|
|||
|
|
if (type === 'js' || type ==='css') {
|
|||
|
|
s = sources[type], q = queue[type];
|
|||
|
|
for (i = 0; i < q.length; i++) {
|
|||
|
|
cur = q[i];
|
|||
|
|
if (_urls.is(cur.urls)) {
|
|||
|
|
qi = cur;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
val = _urls.values();
|
|||
|
|
if (qi) {
|
|||
|
|
callback && (qi.load || qi.callbacks.push(callback));
|
|||
|
|
callback && (qi.load && callback());
|
|||
|
|
} else {
|
|||
|
|
q.push({
|
|||
|
|
urls: _urls,
|
|||
|
|
callbacks: callback ? [callback] : [],
|
|||
|
|
load: false
|
|||
|
|
});
|
|||
|
|
for (i = 0; i < val.length; i++) {
|
|||
|
|
node = null, url = val[i];
|
|||
|
|
if (s[url] === undefined) {
|
|||
|
|
(type === 'js' ) && (node = createNode('script', { src: url }));
|
|||
|
|
(type === 'css') && (node = createNode('link', { rel: 'stylesheet', href: url }));
|
|||
|
|
if (node) {
|
|||
|
|
node.onload = (function(type, url) {
|
|||
|
|
return function() {
|
|||
|
|
end(type, url);
|
|||
|
|
};
|
|||
|
|
})(type, url);
|
|||
|
|
(doc.head || doc.body).appendChild(node);
|
|||
|
|
s[url] = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return {
|
|||
|
|
js: function(url, callback) {
|
|||
|
|
load('js', url, callback);
|
|||
|
|
},
|
|||
|
|
css: function(url, callback) {
|
|||
|
|
load('css', url, callback);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
})(this.document);
|
|||
|
|
})();
|
|||
|
|
</script><script>
|
|||
|
|
(function() {
|
|||
|
|
var TEXT_VARIABLES = {
|
|||
|
|
version: '2.2.6',
|
|||
|
|
sources: {
|
|||
|
|
font_awesome: 'https://use.fontawesome.com/releases/v5.0.13/css/all.css',
|
|||
|
|
jquery: '/assets/js/jquery.min.js',
|
|||
|
|
leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js',
|
|||
|
|
chart: 'https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js',
|
|||
|
|
gitalk: {
|
|||
|
|
js: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.js',
|
|||
|
|
css: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.css'
|
|||
|
|
},
|
|||
|
|
valine: 'https://unpkg.com/valine/dist/Valine.min.js'
|
|||
|
|
},
|
|||
|
|
site: {
|
|||
|
|
toc: {
|
|||
|
|
selectors: 'h1,h2,h3'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
paths: {
|
|||
|
|
search_js: '/assets/search.js'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
window.TEXT_VARIABLES = TEXT_VARIABLES;
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="root" data-is-touch="false">
|
|||
|
|
<div class="layout--page js-page-root"><!----><div class="page__main js-page-main page__viewport hide-footer has-aside has-aside cell cell--auto">
|
|||
|
|
|
|||
|
|
<div class="page__main-inner"><div class="page__header d-print-none"><header class="header"><div class="main">
|
|||
|
|
<div class="header__title">
|
|||
|
|
<div class="header__brand"><svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="478.9473684210526" viewBox="0, 0, 400,478.9473684210526"><g id="svgg"><path id="path0" d="M308.400 56.805 C 306.970 56.966,303.280 57.385,300.200 57.738 C 290.906 58.803,278.299 59.676,269.200 59.887 L 260.600 60.085 259.400 61.171 C 258.010 62.428,256.198 63.600,255.645 63.600 C 255.070 63.600,252.887 65.897,252.598 66.806 C 252.460 67.243,252.206 67.600,252.034 67.600 C 251.397 67.600,247.206 71.509,247.202 72.107 C 247.201 72.275,246.390 73.190,245.400 74.138 C 243.961 75.517,243.598 76.137,243.592 77.231 C 243.579 79.293,241.785 83.966,240.470 85.364 C 239.176 86.740,238.522 88.365,237.991 91.521 C 237.631 93.665,236.114 97.200,235.554 97.200 C 234.938 97.200,232.737 102.354,232.450 104.472 C 232.158 106.625,230.879 109.226,229.535 110.400 C 228.933 110.926,228.171 113.162,226.434 119.500 C 226.178 120.435,225.795 121.200,225.584 121.200 C 225.373 121.200,225.200 121.476,225.200 121.813 C 225.200 122.149,224.885 122.541,224.500 122.683 C 223.606 123.013,223.214 123.593,223.204 124.600 C 223.183 126.555,220.763 132.911,219.410 134.562 C 218.443 135.742,217.876 136.956,217.599 138.440 C 217.041 141.424,215.177 146.434,214.532 146.681 C 214.240 146.794,214.000 147.055,214.000 147.261 C 214.000 147.467,213.550 148.086,213.000 148.636 C 212.450 149.186,212.000 149.893,212.000 150.208 C 212.000 151.386,208.441 154.450,207.597 153.998 C 206.319 153.315,204.913 150.379,204.633 147.811 C 204.365 145.357,202.848 142.147,201.759 141.729 C 200.967 141.425,199.200 137.451,199.200 135.974 C 199.200 134.629,198.435 133.224,196.660 131.311 C 195.363 129.913,194.572 128.123,193.870 125.000 C 193.623 123.900,193.236 122.793,193.010 122.540 C 190.863 120.133,190.147 118.880,188.978 115.481 C 188.100 112.928,187.151 111.003,186.254 109.955 C 185.358 108.908,184.518 107.204,183.847 105.073 C 183.280 103.273,182.497 101.329,182.108 100.753 C 181.719 100.177,180.904 98.997,180.298 98.131 C 179.693 97.265,178.939 95.576,178.624 94.378 C 178.041 92.159,177.125 90.326,175.023 87.168 C 174.375 86.196,173.619 84.539,173.342 83.486 C 172.800 81.429,171.529 79.567,170.131 78.785 C 169.654 78.517,168.697 77.511,168.006 76.549 C 167.316 75.587,166.594 74.800,166.402 74.800 C 166.210 74.800,164.869 73.633,163.421 72.206 C 160.103 68.936,161.107 69.109,146.550 69.301 C 133.437 69.474,128.581 70.162,126.618 72.124 C 126.248 72.495,125.462 72.904,124.872 73.033 C 124.282 73.163,123.088 73.536,122.219 73.863 C 121.349 74.191,119.028 74.638,117.061 74.858 C 113.514 75.254,109.970 76.350,108.782 77.419 C 107.652 78.436,100.146 80.400,97.388 80.400 C 95.775 80.400,93.167 81.360,91.200 82.679 C 90.430 83.195,89.113 83.804,88.274 84.031 C 85.875 84.681,78.799 90.910,74.400 96.243 L 73.400 97.456 73.455 106.028 C 73.526 117.055,74.527 121.238,77.820 124.263 C 78.919 125.273,80.400 127.902,80.400 128.842 C 80.400 129.202,81.075 130.256,81.900 131.186 C 83.563 133.059,85.497 136.346,86.039 138.216 C 86.233 138.886,87.203 140.207,88.196 141.153 C 89.188 142.098,90.000 143.104,90.000 143.388 C 90.000 144.337,92.129 148.594,92.869 149.123 C 93.271 149.410,93.600 149.831,93.600 150.059 C 93.600 150.286,93.932 150.771,94.337 151.136 C 94.743 151.501,95.598 153.004,96.237 154.475 C 96.877 155.947,97.760 157.351,98.200 157.596 C 98.640 157.841,99.900 159.943,101.000 162.267 C 102.207 164.817,103.327 166.644,103.825 166.876 C 104.278 167.087,105.065 168.101,105.573 169.130 C 107.658 173.348,108.097 174.093,110.006 176.647 C 111.103 178.114,112.000 179.725,112.000 180.227 C 112.000 181.048,113.425 183.163,114.678 184.200 C 115.295 184.711,117.396 188.733,117.720 190.022 C 117.855 190.562,118.603 191.633,119.381 192.402 C 120.160 193.171,121.496 195.258,122.351 197.039 C 123.206 198.820,124.167 200.378,124.487 200.501 C 124.807 200.624,125.953 202.496,127.034 204.662 C 128.114 206.828,129.676 209.299,130.505 210.153 C 131.333 211.007,132.124 212.177,132.262 212.753 C 132.618 214.239,134.291 217.048,136.288 219.5
|
|||
|
|
" href="/">YannStatic</a></div><!--<button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button>--><!-- <li><button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button></li> -->
|
|||
|
|
<!-- Champ de recherche -->
|
|||
|
|
<div id="searchbox" class="search search--dark" style="visibility: visible">
|
|||
|
|
<div class="main">
|
|||
|
|
<div class="search__header"></div>
|
|||
|
|
<div class="search-bar">
|
|||
|
|
<div class="search-box js-search-box">
|
|||
|
|
<div class="search-box__icon-search"><i class="fas fa-search"></i></div>
|
|||
|
|
<input id="search-input" type="text" />
|
|||
|
|
<!-- <div class="search-box__icon-clear js-icon-clear">
|
|||
|
|
<a><i class="fas fa-times"></i></a>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Script pointing to search-script.js -->
|
|||
|
|
<script>/*!
|
|||
|
|
* Simple-Jekyll-Search
|
|||
|
|
* Copyright 2015-2020, Christian Fei
|
|||
|
|
* Licensed under the MIT License.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
(function(){
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$Templater_7 = {
|
|||
|
|
compile: compile,
|
|||
|
|
setOptions: setOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const options = {}
|
|||
|
|
options.pattern = /\{(.*?)\}/g
|
|||
|
|
options.template = ''
|
|||
|
|
options.middleware = function () {}
|
|||
|
|
|
|||
|
|
function setOptions (_options) {
|
|||
|
|
options.pattern = _options.pattern || options.pattern
|
|||
|
|
options.template = _options.template || options.template
|
|||
|
|
if (typeof _options.middleware === 'function') {
|
|||
|
|
options.middleware = _options.middleware
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function compile (data) {
|
|||
|
|
return options.template.replace(options.pattern, function (match, prop) {
|
|||
|
|
const value = options.middleware(prop, data[prop], options.template)
|
|||
|
|
if (typeof value !== 'undefined') {
|
|||
|
|
return value
|
|||
|
|
}
|
|||
|
|
return data[prop] || match
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
function fuzzysearch (needle, haystack) {
|
|||
|
|
var tlen = haystack.length;
|
|||
|
|
var qlen = needle.length;
|
|||
|
|
if (qlen > tlen) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (qlen === tlen) {
|
|||
|
|
return needle === haystack;
|
|||
|
|
}
|
|||
|
|
outer: for (var i = 0, j = 0; i < qlen; i++) {
|
|||
|
|
var nch = needle.charCodeAt(i);
|
|||
|
|
while (j < tlen) {
|
|||
|
|
if (haystack.charCodeAt(j++) === nch) {
|
|||
|
|
continue outer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _$fuzzysearch_1 = fuzzysearch;
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
/* removed: const _$fuzzysearch_1 = require('fuzzysearch') */;
|
|||
|
|
|
|||
|
|
var _$FuzzySearchStrategy_5 = new FuzzySearchStrategy()
|
|||
|
|
|
|||
|
|
function FuzzySearchStrategy () {
|
|||
|
|
this.matches = function (string, crit) {
|
|||
|
|
return _$fuzzysearch_1(crit.toLowerCase(), string.toLowerCase())
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$LiteralSearchStrategy_6 = new LiteralSearchStrategy()
|
|||
|
|
|
|||
|
|
function LiteralSearchStrategy () {
|
|||
|
|
this.matches = function (str, crit) {
|
|||
|
|
if (!str) return false
|
|||
|
|
|
|||
|
|
str = str.trim().toLowerCase()
|
|||
|
|
crit = crit.trim().toLowerCase()
|
|||
|
|
|
|||
|
|
return crit.split(' ').filter(function (word) {
|
|||
|
|
return str.indexOf(word) >= 0
|
|||
|
|
}).length === crit.split(' ').length
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$Repository_4 = {
|
|||
|
|
put: put,
|
|||
|
|
clear: clear,
|
|||
|
|
search: search,
|
|||
|
|
setOptions: __setOptions_4
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* removed: const _$FuzzySearchStrategy_5 = require('./SearchStrategies/FuzzySearchStrategy') */;
|
|||
|
|
/* removed: const _$LiteralSearchStrategy_6 = require('./SearchStrategies/LiteralSearchStrategy') */;
|
|||
|
|
|
|||
|
|
function NoSort () {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = []
|
|||
|
|
let opt = {}
|
|||
|
|
|
|||
|
|
opt.fuzzy = false
|
|||
|
|
opt.limit = 10
|
|||
|
|
opt.searchStrategy = opt.fuzzy ? _$FuzzySearchStrategy_5 : _$LiteralSearchStrategy_6
|
|||
|
|
opt.sort = NoSort
|
|||
|
|
opt.exclude = []
|
|||
|
|
|
|||
|
|
function put (data) {
|
|||
|
|
if (isObject(data)) {
|
|||
|
|
return addObject(data)
|
|||
|
|
}
|
|||
|
|
if (isArray(data)) {
|
|||
|
|
return addArray(data)
|
|||
|
|
}
|
|||
|
|
return undefined
|
|||
|
|
}
|
|||
|
|
function clear () {
|
|||
|
|
data.length = 0
|
|||
|
|
return data
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isObject (obj) {
|
|||
|
|
return Boolean(obj) && Object.prototype.toString.call(obj) === '[object Object]'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isArray (obj) {
|
|||
|
|
return Boolean(obj) && Object.prototype.toString.call(obj) === '[object Array]'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addObject (_data) {
|
|||
|
|
data.push(_data)
|
|||
|
|
return data
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addArray (_data) {
|
|||
|
|
const added = []
|
|||
|
|
clear()
|
|||
|
|
for (let i = 0, len = _data.length; i < len; i++) {
|
|||
|
|
if (isObject(_data[i])) {
|
|||
|
|
added.push(addObject(_data[i]))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return added
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function search (crit) {
|
|||
|
|
if (!crit) {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
return findMatches(data, crit, opt.searchStrategy, opt).sort(opt.sort)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function __setOptions_4 (_opt) {
|
|||
|
|
opt = _opt || {}
|
|||
|
|
|
|||
|
|
opt.fuzzy = _opt.fuzzy || false
|
|||
|
|
opt.limit = _opt.limit || 10
|
|||
|
|
opt.searchStrategy = _opt.fuzzy ? _$FuzzySearchStrategy_5 : _$LiteralSearchStrategy_6
|
|||
|
|
opt.sort = _opt.sort || NoSort
|
|||
|
|
opt.exclude = _opt.exclude || []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function findMatches (data, crit, strategy, opt) {
|
|||
|
|
const matches = []
|
|||
|
|
for (let i = 0; i < data.length && matches.length < opt.limit; i++) {
|
|||
|
|
const match = findMatchesInObject(data[i], crit, strategy, opt)
|
|||
|
|
if (match) {
|
|||
|
|
matches.push(match)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return matches
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function findMatchesInObject (obj, crit, strategy, opt) {
|
|||
|
|
for (const key in obj) {
|
|||
|
|
if (!isExcluded(obj[key], opt.exclude) && strategy.matches(obj[key], crit)) {
|
|||
|
|
return obj
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isExcluded (term, excludedTerms) {
|
|||
|
|
for (let i = 0, len = excludedTerms.length; i < len; i++) {
|
|||
|
|
const excludedTerm = excludedTerms[i]
|
|||
|
|
if (new RegExp(excludedTerm).test(term)) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* globals ActiveXObject:false */
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$JSONLoader_2 = {
|
|||
|
|
load: load
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function load (location, callback) {
|
|||
|
|
const xhr = getXHR()
|
|||
|
|
xhr.open('GET', location, true)
|
|||
|
|
xhr.onreadystatechange = createStateChangeListener(xhr, callback)
|
|||
|
|
xhr.send()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createStateChangeListener (xhr, callback) {
|
|||
|
|
return function () {
|
|||
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|||
|
|
try {
|
|||
|
|
callback(null, JSON.parse(xhr.responseText))
|
|||
|
|
} catch (err) {
|
|||
|
|
callback(err, null)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getXHR () {
|
|||
|
|
return window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$OptionsValidator_3 = function OptionsValidator (params) {
|
|||
|
|
if (!validateParams(params)) {
|
|||
|
|
throw new Error('-- OptionsValidator: required options missing')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!(this instanceof OptionsValidator)) {
|
|||
|
|
return new OptionsValidator(params)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const requiredOptions = params.required
|
|||
|
|
|
|||
|
|
this.getRequiredOptions = function () {
|
|||
|
|
return requiredOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.validate = function (parameters) {
|
|||
|
|
const errors = []
|
|||
|
|
requiredOptions.forEach(function (requiredOptionName) {
|
|||
|
|
if (typeof parameters[requiredOptionName] === 'undefined') {
|
|||
|
|
errors.push(requiredOptionName)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return errors
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function validateParams (params) {
|
|||
|
|
if (!params) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
return typeof params.required !== 'undefined' && params.required instanceof Array
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$utils_9 = {
|
|||
|
|
merge: merge,
|
|||
|
|
isJSON: isJSON
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function merge (defaultParams, mergeParams) {
|
|||
|
|
const mergedOptions = {}
|
|||
|
|
for (const option in defaultParams) {
|
|||
|
|
mergedOptions[option] = defaultParams[option]
|
|||
|
|
if (typeof mergeParams[option] !== 'undefined') {
|
|||
|
|
mergedOptions[option] = mergeParams[option]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return mergedOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isJSON (json) {
|
|||
|
|
try {
|
|||
|
|
if (json instanceof Object && JSON.parse(JSON.stringify(json))) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
} catch (err) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _$src_8 = {};
|
|||
|
|
(function (window) {
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
let options = {
|
|||
|
|
searchInput: null,
|
|||
|
|
resultsContainer: null,
|
|||
|
|
json: [],
|
|||
|
|
success: Function.prototype,
|
|||
|
|
searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
|
|||
|
|
templateMiddleware: Function.prototype,
|
|||
|
|
sortMiddleware: function () {
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
noResultsText: 'No results found',
|
|||
|
|
limit: 10,
|
|||
|
|
fuzzy: false,
|
|||
|
|
debounceTime: null,
|
|||
|
|
exclude: []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let debounceTimerHandle
|
|||
|
|
const debounce = function (func, delayMillis) {
|
|||
|
|
if (delayMillis) {
|
|||
|
|
clearTimeout(debounceTimerHandle)
|
|||
|
|
debounceTimerHandle = setTimeout(func, delayMillis)
|
|||
|
|
} else {
|
|||
|
|
func.call()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const requiredOptions = ['searchInput', 'resultsContainer', 'json']
|
|||
|
|
|
|||
|
|
/* removed: const _$Templater_7 = require('./Templater') */;
|
|||
|
|
/* removed: const _$Repository_4 = require('./Repository') */;
|
|||
|
|
/* removed: const _$JSONLoader_2 = require('./JSONLoader') */;
|
|||
|
|
const optionsValidator = _$OptionsValidator_3({
|
|||
|
|
required: requiredOptions
|
|||
|
|
})
|
|||
|
|
/* removed: const _$utils_9 = require('./utils') */;
|
|||
|
|
|
|||
|
|
window.SimpleJekyllSearch = function (_options) {
|
|||
|
|
const errors = optionsValidator.validate(_options)
|
|||
|
|
if (errors.length > 0) {
|
|||
|
|
throwError('You must specify the following required options: ' + requiredOptions)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
options = _$utils_9.merge(options, _options)
|
|||
|
|
|
|||
|
|
_$Templater_7.setOptions({
|
|||
|
|
template: options.searchResultTemplate,
|
|||
|
|
middleware: options.templateMiddleware
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
_$Repository_4.setOptions({
|
|||
|
|
fuzzy: options.fuzzy,
|
|||
|
|
limit: options.limit,
|
|||
|
|
sort: options.sortMiddleware,
|
|||
|
|
exclude: options.exclude
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (_$utils_9.isJSON(options.json)) {
|
|||
|
|
initWithJSON(options.json)
|
|||
|
|
} else {
|
|||
|
|
initWithURL(options.json)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rv = {
|
|||
|
|
search: search
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
typeof options.success === 'function' && options.success.call(rv)
|
|||
|
|
return rv
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initWithJSON (json) {
|
|||
|
|
_$Repository_4.put(json)
|
|||
|
|
registerInput()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initWithURL (url) {
|
|||
|
|
_$JSONLoader_2.load(url, function (err, json) {
|
|||
|
|
if (err) {
|
|||
|
|
throwError('failed to get JSON (' + url + ')')
|
|||
|
|
}
|
|||
|
|
initWithJSON(json)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function emptyResultsContainer () {
|
|||
|
|
options.resultsContainer.innerHTML = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function appendToResultsContainer (text) {
|
|||
|
|
options.resultsContainer.innerHTML += text
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function registerInput () {
|
|||
|
|
options.searchInput.addEventListener('input', function (e) {
|
|||
|
|
if (isWhitelistedKey(e.which)) {
|
|||
|
|
emptyResultsContainer()
|
|||
|
|
debounce(function () { search(e.target.value) }, options.debounceTime)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function search (query) {
|
|||
|
|
if (isValidQuery(query)) {
|
|||
|
|
emptyResultsContainer()
|
|||
|
|
render(_$Repository_4.search(query), query)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function render (results, query) {
|
|||
|
|
const len = results.length
|
|||
|
|
if (len === 0) {
|
|||
|
|
return appendToResultsContainer(options.noResultsText)
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
results[i].query = query
|
|||
|
|
appendToResultsContainer(_$Templater_7.compile(results[i]))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isValidQuery (query) {
|
|||
|
|
return query && query.length > 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isWhitelistedKey (key) {
|
|||
|
|
return [13, 16, 20, 37, 38, 39, 40, 91].indexOf(key) === -1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function throwError (message) {
|
|||
|
|
throw new Error('SimpleJekyllSearch --- ' + message)
|
|||
|
|
}
|
|||
|
|
})(window)
|
|||
|
|
|
|||
|
|
}());
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- Configuration -->
|
|||
|
|
<script>
|
|||
|
|
SimpleJekyllSearch({
|
|||
|
|
searchInput: document.getElementById('search-input'),
|
|||
|
|
resultsContainer: document.getElementById('results-container'),
|
|||
|
|
json: '/search.json',
|
|||
|
|
//searchResultTemplate: '<li><a href="https://static.rnmkcy.eu{url}">{date} {title}</a></li>'
|
|||
|
|
searchResultTemplate: '<li><a href="{url}">{date} {title}</a></li>'
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<!-- Fin déclaration champ de recherche --></div><nav class="navigation">
|
|||
|
|
<ul><li class="navigation__item"><a href="/archive.html">Etiquettes</a></li><li class="navigation__item"><a href="/htmldoc.html">Documents</a></li><li class="navigation__item"><a href="/liens_ttrss.html">Liens</a></li><li class="navigation__item"><a href="/aide-jekyll-text-theme.html">Aide</a></li></ul>
|
|||
|
|
</nav></div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
</div><div class="page__content"><div class ="main"><div class="grid grid--reverse">
|
|||
|
|
<div class="col-main cell cell--auto"><!-- start custom main top snippet --><div id="results-container" class="search-result js-search-result"></div><!-- end custom main top snippet -->
|
|||
|
|
<article itemscope itemtype="http://schema.org/Article"><div class="article__header"><header><h1 style="color:Tomato;">Hugo(generateur-de-site-statique)-Installation-Utilisation-sur-Archlinux/Debian</h1></header></div><meta itemprop="headline" content="Hugo(generateur-de-site-statique)-Installation-Utilisation-sur-Archlinux/Debian"><div class="article__info clearfix"><ul class="right-col menu"><li>
|
|||
|
|
<i class="far fa-calendar-alt"></i> <span title="Création" style="color:#FF00FF">25 déc. 2019</span>
|
|||
|
|
|
|||
|
|
<span title="Modification" style="color:#00FF7F">27 mai 2020</span></li></ul></div><meta itemprop="datePublished" content="2020-05-27T00:00:00+02:00"><div class="js-article-content">
|
|||
|
|
<div class="layout--article"><!-- start custom article top snippet -->
|
|||
|
|
<style>
|
|||
|
|
#myBtn {
|
|||
|
|
display: none;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 10px;
|
|||
|
|
right: 10px;
|
|||
|
|
z-index: 99;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
background-color: white;
|
|||
|
|
color: black;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 5px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#myBtn:hover {
|
|||
|
|
background-color: #555;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<button onclick="topFunction()" id="myBtn" title="Haut de page">⇧</button>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
//Get the button
|
|||
|
|
var mybutton = document.getElementById("myBtn");
|
|||
|
|
|
|||
|
|
// When the user scrolls down 20px from the top of the document, show the button
|
|||
|
|
window.onscroll = function() {scrollFunction()};
|
|||
|
|
|
|||
|
|
function scrollFunction() {
|
|||
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|||
|
|
mybutton.style.display = "block";
|
|||
|
|
} else {
|
|||
|
|
mybutton.style.display = "none";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// When the user clicks on the button, scroll to the top of the document
|
|||
|
|
function topFunction() {
|
|||
|
|
document.body.scrollTop = 0;
|
|||
|
|
document.documentElement.scrollTop = 0;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- end custom article top snippet -->
|
|||
|
|
<div class="article__content" itemprop="articleBody"><details>
|
|||
|
|
<summary><b>Afficher/cacher Sommaire</b></summary>
|
|||
|
|
<!-- affichage sommaire -->
|
|||
|
|
<div class="toc-aside js-toc-root"></div>
|
|||
|
|
</details><h2 id="hugo-archlinux">Hugo archlinux</h2>
|
|||
|
|
|
|||
|
|
<p>Installation : <code class="language-plaintext highlighter-rouge">yay -S hugo</code></p>
|
|||
|
|
|
|||
|
|
<p>Créer un projet <strong>/home/yannick/media/devel/ouestline/go/hugo-m10c</strong></p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hugo new site hugo-m10c
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Congratulations! Your new Hugo site is created in /home/yannick/media/devel/ouestline/go/hugo-m10c
|
|||
|
|
|
|||
|
|
Just a few more steps and you're ready to go:
|
|||
|
|
|
|||
|
|
1. Download a theme into the same-named folder.
|
|||
|
|
Choose a theme from https://themes.gohugo.io/ or
|
|||
|
|
create your own with the "hugo new theme <THEMENAME>" command.
|
|||
|
|
2. Perhaps you want to add some content. You can add single files
|
|||
|
|
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
|
|||
|
|
3. Start the built-in live server via "hugo server".
|
|||
|
|
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Thème <a href="https://themes.gohugo.io/hugo-theme-m10c/">m10c</a></p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd hugo-m10c
|
|||
|
|
git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Ajouter la ligne suivante au fichier <strong>config.toml</strong></p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>theme = "m10c"
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Transformer les .md jekyll vers hugo (/home/yannick/media/devel/ouestline/go/hugo-posts/)</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd /home/yannick/media/devel/ouestline/go/hugo-posts/
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/layout\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/toc\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/ref\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/date\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/categories\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/lang\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/description\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/private\:/d' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i 's/last_modified_at\:/date\=/g' {} \;
|
|||
|
|
create: 2019-12-25
|
|||
|
|
modif:
|
|||
|
|
find . -name '*.md' -type f -exec sed -i 's/last_modified_at \:/date\=/g' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i 's/title\:/title\=/g' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i 's/tags\:/tags\=/g' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '1,5 s/---/+++/g' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '4 s/\[/\[\"/g' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '4 s/\]/\"\]/g' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '4 s/\,/\"\,\"/g' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '2,4 s/^[ \t]*//;s/[ \t]*$//' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '2,3 s/$/\"/' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '2,3 s/= / = \"/g' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '2 s/\" /\"/g' {} \;
|
|||
|
|
|
|||
|
|
# Adaptation nouveau format pur jekyll "minimal-mistakes"
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/layout\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/date\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/private\:/d' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/ref\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/description\:/d' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/lang\:/d' {} \;
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '1,7 s/\]//g' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '1,7 s/\[/\r\ \ \-\ /g' {} \;
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '4,10 s/\,/\r\ \ \-\ /g' {} \;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/^\ \ \-/s/\,/\r\ \ \-\ /' {} \;
|
|||
|
|
|
|||
|
|
|
|||
|
|
find . -name '*.md' -type f -exec sed '/^start_string/s/search_string/replace_string/'
|
|||
|
|
find . -name '*.md' -type f -exec sed -i '/^\ \ \-/s/\,/\r\ \ \-\ /' {} \;
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
title: OpenPGP card, une application cryptographique pour carte à puce
|
|||
|
|
toc: true
|
|||
|
|
ref:
|
|||
|
|
create: 2019-12-25
|
|||
|
|
modif: 2014-08-21
|
|||
|
|
tags: [chiffrement]
|
|||
|
|
lang: fr
|
|||
|
|
description: Chiffrement , gpg
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h2 id="comment-installer-et-utiliser-hugo-un-générateur-de-site-statique-sur-debian">Comment installer et utiliser Hugo, un générateur de site statique, sur Debian</h2>
|
|||
|
|
|
|||
|
|
<h3 id="introduction">Introduction</h3>
|
|||
|
|
|
|||
|
|
<p><em>Hugo est un générateur de site statique rapide et facile à utiliser écrit en Go et disponible sur plusieurs plates-formes. Les générateurs de sites statiques sont un excellent choix pour les blogs et autres contenus qui ne nécessitent pas de contenu dynamique extrait d’une base de données.</em></p>
|
|||
|
|
|
|||
|
|
<p>Dans ce guide, nous verrons comment installer et utiliser Hugo sur un serveur Debian. Cela nous permettra de configurer un site statique, de créer du contenu et de publier sur le même serveur ou de le déployer sur un site de production.</p>
|
|||
|
|
|
|||
|
|
<h3 id="conditions-préalables">Conditions préalables</h3>
|
|||
|
|
|
|||
|
|
<p>Pour suivre ce guide, vous aurez besoin d’accéder à un serveur Debian. Sur ce serveur, vous devrez avoir un <u>utilisateur non root</u> avec des privilèges <code class="language-plaintext highlighter-rouge">sudo</code> configuré afin d’effectuer des tâches administratives.</p>
|
|||
|
|
|
|||
|
|
<h3 id="installation-de-la-dernière-version-de-hugo">Installation de la dernière version de Hugo</h3>
|
|||
|
|
|
|||
|
|
<p>Hugo n’est pas disponible dans les référentiels par défaut de Debian. Cependant, des packages sont disponibles sur GitHub pour diverses architectures et distributions.<br />
|
|||
|
|
Serveur Debian stretch 64bits</p>
|
|||
|
|
|
|||
|
|
<p>Visitez la <a href="https://github.com/spf13/hugo/releases">page des versions de Hugo</a> pour trouver la dernière version stable de Hugo (celle la plus proche du sommet).<br />
|
|||
|
|
<strong>hugo_0.61.0_Linux-64bit.deb</strong> au 22/12/2019<br />
|
|||
|
|
Ensuite, nous devons copier l’emplacement du lien pour le package d’installation approprié.<br />
|
|||
|
|
<a href="https://github.com/gohugoio/hugo/releases/download/v0.61.0/hugo_0.61.0_Linux-64bit.deb">https://github.com/gohugoio/hugo/releases/download/v0.61.0/hugo_0.61.0_Linux-64bit.deb</a></p>
|
|||
|
|
|
|||
|
|
<p>Sur votre serveur, connecté en tant qu’utilisateur avec des privilèges sudo , accédez à un répertoire dans lequel vous disposez d’une autorisation d’écriture. <br />
|
|||
|
|
Utilisez la commande wget et collez l’emplacement du lien que vous avez copié pour télécharger Hugo:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd ~
|
|||
|
|
wget https://github.com/gohugoio/hugo/releases/download/v0.61.0/hugo_0.61.0_Linux-64bit.deb
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Maintenant, vous pouvez installer le package avec dpkg en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo dpkg -i hugo*.deb
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Testez que l’installation a réussi en demandant à Hugo d’imprimer sa version logicielle:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hugo version
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Hugo devrait imprimer sa version actuelle du logiciel:</p>
|
|||
|
|
|
|||
|
|
<p>Hugo Static Site Generator v0.14 BuildDate: 2015-05-25T21: 29: 16-04: 00</p>
|
|||
|
|
|
|||
|
|
<h3 id="installation-du-logiciel-de-prise-en-charge-de-hugo">Installation du logiciel de prise en charge de Hugo</h3>
|
|||
|
|
|
|||
|
|
<p>L’application Hugo principale devrait maintenant être installée. Cependant, il existe quelques logiciels supplémentaires que nous devons installer pour nous aider à être opérationnel.</p>
|
|||
|
|
|
|||
|
|
<h4 id="installer-les-thèmes-hugo">Installer les thèmes Hugo</h4>
|
|||
|
|
|
|||
|
|
<p>Le package Hugo principal ne comprend aucun thème. Les thèmes Hugo définissent la façon dont le contenu du site est rendu aux utilisateurs. Le moyen le plus simple d’obtenir des thèmes Hugo est de cloner le référentiel git thèmes Hugo, qui fournit de nombreux thèmes préconfigurés. Nous devrons installer git pour ce processus.</p>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons trouver git dans les référentiels par défaut de Debian. Mettez à jour l’index du package local, puis installez git en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo apt-get update
|
|||
|
|
sudo apt-get install git
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Ensuite, nous pouvons cloner le référentiel de thèmes Hugo. Le référentiel sur GitHub est organisé avec chaque thème individuel inclus en tant que sous-module.</p>
|
|||
|
|
|
|||
|
|
<p>Étant donné que les sous-modules compliqueraient considérablement le contrôle de version du contenu réel de notre site, nous allons en fait simplement cloner les thèmes dans notre répertoire personnel. Nous pouvons ensuite créer un lien symbolique vers les thèmes de notre annuaire de sites. Cela nous permettra également de partager facilement le répertoire des thèmes si nous avons plusieurs sites.</p>
|
|||
|
|
|
|||
|
|
<p>Clonez le référentiel de thèmes dans votre répertoire personnel en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone --recursive https://github.com/spf13/hugoThemes ~/themes
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h4 id="installer-pygments-syntax-highlighter">Installer Pygments Syntax Highlighter</h4>
|
|||
|
|
|
|||
|
|
<p>Nous installerons également un logiciel Python appelé Pygments. Cela fournit une logique de mise en évidence de la syntaxe côté serveur pour tous les blocs de code qui seraient inclus dans nos pages rendues. Nous pouvons installer Pygments facilement avec pip , le gestionnaire de paquets de Python.</p>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons obtenir pip partir des référentiels par défaut en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo apt-get install python-pip
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Une fois apt terminé, nous pouvons utiliser pip pour installer les Pygments en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo pip install Pygments
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Cela nous permettra d’inclure la syntaxe mise en évidence des blocs de code prenant en charge plus de 300 langues dans notre contenu de publication si nous choisissons. Vous pouvez en savoir plus sur la <a href="http://pygments.org/">page du projet</a></p>
|
|||
|
|
|
|||
|
|
<h4 id="activer-la-saisie-semi-automatique-de-hugo-bash">Activer la saisie semi-automatique de Hugo Bash</h4>
|
|||
|
|
|
|||
|
|
<p>Une dernière chose que nous ferons avant de commencer à travailler sur notre premier site est de générer les fonctions de saisie semi-automatique de Hugo. Nous pouvons le faire en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo hugo gen autocomplete
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Ensuite, nous pouvons trouver la configuration d’achèvement à l’échelle du système afin que notre shell actuel puisse utiliser les fonctions d’auto-complétion sans vous déconnecter ni vous reconnecter:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>. /etc/bash_completion
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Maintenant, si vous tapez hugo suivi de quelques pressions sur la touche TAB, vous verrez les commandes que Hugo connaît:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> hugo [TAB][TAB][TAB]
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Output
|
|||
|
|
benchmark config gen help new undraft
|
|||
|
|
check convert gendoc list server version
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h3 id="création-de-votre-premier-site">Création de votre premier site</h3>
|
|||
|
|
|
|||
|
|
<p>Maintenant que tout est installé, nous pouvons aller de l’avant et créer notre premier site Hugo. Hugo a un générateur qui peut créer un squelette des fichiers et répertoires dont il a besoin pour fonctionner.</p>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons créer un nouveau site dans votre répertoire personnel en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hugo new site ~/my-website
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Accédez à votre nouveau site Hugo et jetez un œil:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd ~/my-website
|
|||
|
|
ls -F
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Vous verrez la structure du répertoire et le fichier de configuration principal utilisé pour construire le site Hugo:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>archetypes/ config.toml content/ data/ layouts/ public/ static/
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Allons de l’avant et lions le répertoire <strong>~/themes</strong> que nous avons cloné dans notre nouveau site. Afin de rendre ce lien plus flexible pour un éventuel déploiement, nous allons créer un lien symbolique relatif. Si vous déployez votre référentiel Hugo sur un serveur distant, vous devrez simplement vous assurer de cloner à nouveau le répertoire des thèmes dans le répertoire parent de Hugo:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ln -s ../themes .
|
|||
|
|
ls -l
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>total 28
|
|||
|
|
drwxrwxr-x 2 demouser demouser 4096 Nov 5 11:25 archetypes
|
|||
|
|
-rw-rw-r-- 1 demouser demouser 210 Nov 5 11:55 config.toml
|
|||
|
|
drwxrwxr-x 3 demouser demouser 4096 Nov 5 11:38 content
|
|||
|
|
drwxrwxr-x 2 demouser demouser 4096 Nov 5 11:25 data
|
|||
|
|
drwxrwxr-x 2 demouser demouser 4096 Nov 5 11:25 layouts
|
|||
|
|
drwxrwxr-x 13 demouser demouser 4096 Nov 5 11:25 public
|
|||
|
|
drwxrwxr-x 2 demouser demouser 4096 Nov 5 11:25 static
|
|||
|
|
lrwxrwxrwx 1 demouser demouser 9 Nov 5 14:21 themes -> ../themes
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Comme vous pouvez le voir ci-dessus, le répertoire des thèmes de notre répertoire actuel n’est en fait qu’un lien vers le référentiel de thèmes que nous avons cloné dans notre répertoire personnel.</p>
|
|||
|
|
|
|||
|
|
<h3 id="engager-votre-site-dans-le-contrôle-des-sources">Engager votre site dans le contrôle des sources</h3>
|
|||
|
|
|
|||
|
|
<p>Avant de configurer nos paramètres et de créer du contenu, nous devons transformer notre nouveau site en un référentiel Git.</p>
|
|||
|
|
|
|||
|
|
<p>Assurez-vous que vous êtes dans le répertoire de votre site et initialisez un nouveau référentiel get en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd ~/my-website
|
|||
|
|
git init
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Initialized empty Git repository in /home/demouser/my-website/.git/</p>
|
|||
|
|
|
|||
|
|
<p>Ensuite, définissez les éléments de configuration de base de git nécessaires pour valider le code dans un référentiel. La façon la plus simple de le faire est <code class="language-plaintext highlighter-rouge">git config --global</code> . Nous devons définir notre nom et notre adresse e-mail afin que git puisse enregistrer correctement nos informations en tant que committer:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global user.name "Your Name"
|
|||
|
|
git config --global user.email "user@email.com"
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Par défaut, git ne valide aucun répertoire vide dans le référentiel. Hugo, parfois, exige que ces répertoires soient présents même s’ils ne contiennent aucun contenu. Pour contourner ce .gitkeep , nous pouvons inclure un fichier <strong>.gitkeep</strong> caché dans chacun de ces répertoires vides. Cela suffit à <strong>git</strong> pour valider le répertoire sans affecter les fonctionnalités réelles d’Hugo.</p>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons ajouter un fichier <strong>.gitkeep</strong> caché à chacun de nos répertoires de niveau supérieur (autre que le <strong>.git</strong> caché .git réel) en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>for DIR in `ls -p | grep /`; do touch ${DIR}.gitkeep; done
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons voir qu’un fichier <strong>.gitkeep</strong> caché a été ajouté à tous nos répertoires de niveau supérieur en tapant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>find . -name .gitkeep
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>./data/.gitkeep
|
|||
|
|
./layouts/.gitkeep
|
|||
|
|
./archetypes/.gitkeep
|
|||
|
|
./static/.gitkeep
|
|||
|
|
./content/.gitkeep
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Nous voulons également nous assurer que le contenu de notre site rendu n’est pas ajouté au contrôle de code source. Les actifs HTML, JavaScript et CSS réels doivent être générés à chaque déploiement, et non conservés dans le contrôle de code lui-même. Nous pouvons dire à git d’ignorer le répertoire public où le contenu généré serait stocké en ajoutant cet emplacement à un fichier <strong>.gitignore</strong> :</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>echo "public" >> .gitignore
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Maintenant, nous pouvons valider notre squelette de site propre dans le référentiel en ajoutant tout le contenu dans le répertoire en cours, puis en validant:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add .
|
|||
|
|
git commit -m 'Initial commit, pre-configuration.'
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h3 id="ajuster-la-configuration-initiale-de-votre-site">Ajuster la configuration initiale de votre site</h3>
|
|||
|
|
|
|||
|
|
<p>Modifions le fichier de configuration principal de Hugo pour définir la façon dont Hugo va construire notre site.</p>
|
|||
|
|
|
|||
|
|
<p>Ouvrez le fichier <strong>config.toml</strong> dans votre éditeur:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano config.toml
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>À l’intérieur, vous trouverez quelques éléments que nous devons ajuster:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/config.toml
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>baseurl = "http://replace-this-with-your-hugo-site.com/"
|
|||
|
|
languageCode = "en-us"
|
|||
|
|
title = "My New Hugo Site"
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Comme l’indique le suffixe du fichier, ce fichier est écrit en utilisant le <a href="https://github.com/toml-lang/toml">langage TOML</a>. Il s’agit d’un langage de configuration simple qui utilise principalement des clés, des valeurs et des sections.</p>
|
|||
|
|
|
|||
|
|
<p>Le premier élément que nous devons modifier est l’élément <strong>baseurl</strong> . Ceci est utilisé pour construire des URL lors de la construction du site. Modifiez-le pour référencer le nom de domaine ou l’adresse IP publique de votre serveur. Vous devez également modifier la valeur attribuée au <strong>title</strong>. Ceci est utilisé pour définir le titre de l’onglet ou de la fenêtre de votre site et est utilisé sur la page pour certains thèmes:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/config.toml
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>baseurl = "http://your_domain_or_IP/"
|
|||
|
|
languageCode = "en-us"
|
|||
|
|
title = "Your Site Name"
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Il y a quelques paramètres supplémentaires que nous devons ajouter à ce fichier. Tout d’abord, nous pouvons définir notre éditeur de texte préféré. De cette façon, lorsque nous générons de nouvelles pages, le modèle de page sera ouvert dans notre éditeur, prêt à fonctionner.</p>
|
|||
|
|
|
|||
|
|
<p>Nous devons également définir un thème par défaut. Nous utiliserons un thème appelé «nofancy» pour commencer. Vous pouvez remplacer cela plus tard sur la ligne de commande pour tester des alternatives, puis modifier le fichier de configuration lorsque vous en trouvez un qui vous convient. Nous définirons également notre style de bloc de code préféré:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/config.toml
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>baseurl = "http://your_domain_or_IP/"
|
|||
|
|
languageCode = "en-us"
|
|||
|
|
title = "Your Site Name"
|
|||
|
|
newContentEditor = "nano"
|
|||
|
|
theme = "nofancy"
|
|||
|
|
pygmentsStyle = "native"
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Vous pouvez trouver plus d’informations sur les paramètres disponibles sur <a href="https://gohugo.io/overview/configuration/">cette page</a>. Pour l’instant, enregistrez et fermez le fichier.</p>
|
|||
|
|
|
|||
|
|
<p>Commettons nos modifications de configuration avant de continuer:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add .
|
|||
|
|
git commit -m 'Initial configuration complete'
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h3 id="création-de-nouvelles-pages-pour-votre-site">Création de nouvelles pages pour votre site</h3>
|
|||
|
|
|
|||
|
|
<p>Nous sommes maintenant prêts à commencer à créer du contenu de site. Le contenu dans Hugo est écrit à l’aide de langages de balisage faciles à utiliser. Les métadonnées de page sont fournies dans une section spéciale sur chaque page appelée «sujet principal» (“front matter”) en utilisant les mêmes syntaxes de configuration disponibles pour le fichier de configuration principal.</p>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons générer du nouveau contenu avec Hugo en utilisant la commande <code class="language-plaintext highlighter-rouge">hugo new</code> suivie du chemin vers le contenu que nous voulons produire. Par défaut, le contenu Hugo est écrit dans Markdown. Pour que Hugo puisse générer correctement du HTML à partir de nos pages Markdown, nous devons créer des fichiers qui se terminent par l’extension <strong>.md</strong></p>
|
|||
|
|
|
|||
|
|
<h4 id="créer-une-page-à-propos">Créer une page À propos</h4>
|
|||
|
|
|
|||
|
|
<p>Les pages qui seront liées à partir de la page d’accueil et les chemins relatifs dont vos pages auront besoin sont largement dictées par votre thème. Consultez la page du thème sur GitHub pour en savoir plus sur ce qu’il attend. Notre thème «nofancy» a un lien pour une page «à propos». Commençons par créer cette page:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hugo new about.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Une nouvelle page sera créée dans le répertoire de content appelé about.md . Puisque nous avons défini l’option newContentEditor dans notre fichier de configuration, le fichier doit être ouvert automatiquement avec votre éditeur préféré. Cela devrait ressembler à ceci pour commencer:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/content/about.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+++
|
|||
|
|
categories = ["misc"]
|
|||
|
|
date = "2015-11-05T16:58:58-05:00"
|
|||
|
|
title = "about"
|
|||
|
|
|
|||
|
|
+++
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Les paramètres et les métadonnées de la page sont configurés dans la «première page» de la page, la section marquée de chaque côté par des lignes de «+++». La matière initiale incluse par défaut est souvent définie par le thème que vous utilisez.</p>
|
|||
|
|
|
|||
|
|
<p>Notre thème actuel comprend trois éléments en première page des pages générées. Vous pouvez les ajuster ou ajouter des éléments supplémentaires à votre guise. Les variables générales dont dispose Hugo sont disponibles <a href="https://gohugo.io/content/front-matter/">ici</a>. Le thème que vous avez choisi peut également utiliser ses propres variables de sujet. Consultez le fichier README de votre thème dans le <a href="https://github.com/spf13/hugoThemes/">référentiel de thèmes Hugo</a> pour obtenir des détails sur votre thème.</p>
|
|||
|
|
|
|||
|
|
<p>Certains éléments importants de la matière générale sont:</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>date</strong> : date à utiliser pour trier votre contenu</li>
|
|||
|
|
<li><strong>description</strong> : description du contenu de la page</li>
|
|||
|
|
<li><strong>draft</strong> (brouillon) : marquera la page comme non prête pour la publication si elle est définie sur true</li>
|
|||
|
|
<li><strong>slug</strong> : définissez ce paramètre si vous souhaitez spécifier un autre nom d’URL pour le contenu</li>
|
|||
|
|
<li><strong>publishdate</strong> : vous pouvez définir une date dans le futur si vous souhaitez uniquement créer la page après une certaine date</li>
|
|||
|
|
<li><strong>title</strong> : le titre de votre page</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<p>Pour l’instant, modifions simplement le titre de notre page «À propos»:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/content/about.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+++
|
|||
|
|
categories = ["misc"]
|
|||
|
|
date = "2015-11-05T16:58:58-05:00"
|
|||
|
|
title = "About Me"
|
|||
|
|
|
|||
|
|
+++
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Maintenant, nous pouvons ajouter du texte Markdown sous le “+++” en bas. Cela sera traduit dans le corps du texte HTML. Nous allons ajouter quelques paragraphes, un titre et une image sous licence <a href="http://creativecommons.org/licenses/by-sa/2.0/de/deed.en">Creative Commons</a> mise à disposition par <a href="http://fotos.naturspot.de/">Eva Hejda</a> que nous avons aimé:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/content/about.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+++
|
|||
|
|
categories = ["misc"]
|
|||
|
|
date = "2015-11-05T16:58:58-05:00"
|
|||
|
|
title = "About Me"
|
|||
|
|
|
|||
|
|
+++
|
|||
|
|
|
|||
|
|
Hello and welcome to my site!
|
|||
|
|
|
|||
|
|
## A Bit About Me
|
|||
|
|
|
|||
|
|
I like alpacas and I'm a fan of static sites.
|
|||
|
|
|
|||
|
|
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Lorsque vous avez terminé, enregistrez et fermez le fichier.</p>
|
|||
|
|
|
|||
|
|
<h4 id="créez-votre-premier-message-post">Créez votre premier message (post)</h4>
|
|||
|
|
|
|||
|
|
<p>Nous avons créé la page about.md à la racine de notre répertoire de contenu car c’est là que notre thème s’attend à ce qu’elle soit. Cependant, la plupart de nos publications seront mieux conservées dans un sous-répertoire de post (certains thèmes recherchent plutôt des publications dans un sous-répertoire de posts ).</p>
|
|||
|
|
|
|||
|
|
<p>Créons un premier article dans le répertoire «articles». Hugo créera automatiquement tous les principaux répertoires dont il a besoin lors de la génération des pages:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hugo new post/My-First-Post.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Si nous utilisons des tirets dans le nom de fichier Markdown, ils seront convertis en espaces pour le titre rempli automatiquement:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/content/post/My-First-Post.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+++
|
|||
|
|
categories = ["misc"]
|
|||
|
|
date = "2015-11-05T17:52:41-05:00"
|
|||
|
|
title = "My First Post"
|
|||
|
|
+++
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Remplissez toutes les métadonnées manquantes et ajoutez du démarque (markdown) à la page. Nous allons ajouter un exemple de code ici afin que vous puissiez voir le code en surbrillance fourni par l’outil Pygments. Pour ce faire, au lieu d’utiliser des triplets Markdown réguliers pour entourer un bloc de code, nous plaçons le code entre deux balises de surbrillance qui ressemblent à ceci:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{{< highlight language >}}
|
|||
|
|
|
|||
|
|
code_goes_here
|
|||
|
|
|
|||
|
|
{{< /highlight >}}
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Cela appliquera le style Pygment au code qu’il contient. Gardez à l’esprit que certains thèmes incluent des fichiers CSS qui remplaceront les choix de style de segment. La <code class="language-plaintext highlighter-rouge"><pre></code> a souvent un style supplémentaire appliqué qui peut remplacer la couleur d’arrière-plan du thème Pygment. Notre thème particulier ne souffre cependant pas de ce problème.</p>
|
|||
|
|
|
|||
|
|
<p>À l’intérieur de notre page, le contenu terminé ressemblera à ceci:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano ~/my-website/content/post/My-First-Post.md
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+++
|
|||
|
|
categories = ["misc"]
|
|||
|
|
date = "2015-11-05T17:52:41-05:00"
|
|||
|
|
title = "My First Post"
|
|||
|
|
|
|||
|
|
+++
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>This is my first post on the site. I hope that you like it!</p>
|
|||
|
|
|
|||
|
|
<h2 id="welcome-function">Welcome Function</h2>
|
|||
|
|
|
|||
|
|
<p>Here is a little Python function to welcome you:</p>
|
|||
|
|
|
|||
|
|
<p>{{< highlight python >}}
|
|||
|
|
def hello_world():
|
|||
|
|
print “Hello there!”
|
|||
|
|
{{< /highlight >}}</p>
|
|||
|
|
|
|||
|
|
<p>Enregistrez et fermez le fichier lorsque vous avez terminé. Si vous devez modifier ces pages ultérieurement, vous pouvez les trouver dans le répertoire de <strong>content</strong> de votre site Hugo.</p>
|
|||
|
|
|
|||
|
|
<p>Commettons nos nouvelles pages dans notre dépôt git :</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add .
|
|||
|
|
git commit -m 'First pages of our site'
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h3 id="construction-et-service-du-site">Construction et service du site</h3>
|
|||
|
|
|
|||
|
|
<p>Hugo peut prendre vos fichiers Markdown, appliquer les paramètres définis dans votre configuration et votre thème et rendre les pages HTML réelles qui seront affichées aux visiteurs.</p>
|
|||
|
|
|
|||
|
|
<p>Pour construire votre site, vous pouvez simplement taper:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hugo
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Cela va générer vos pages et mettre tout le contenu rendu dans le répertoire public de votre serveur. Si vous le souhaitez, vous pouvez transférer le contenu de ce répertoire sur votre serveur Web pour déployer et diffuser votre contenu.</p>
|
|||
|
|
|
|||
|
|
<blockquote>
|
|||
|
|
<p>Remarque<br />
|
|||
|
|
Hugo ne nettoie pas le répertoire de sortie après chaque build. Cela signifie qu’il est possible que le contenu périmé soit laissé dans le répertoire <strong>public</strong> d’une version précédente. Les développeurs Hugo recommandent de supprimer le répertoire <strong>public</strong> après chaque build (en particulier avant de passer en production) afin que le contenu puisse être recréé à nouveau.</p>
|
|||
|
|
</blockquote>
|
|||
|
|
|
|||
|
|
<p>Hugo comprend également son propre serveur Web. Bien que vous ne souhaitiez pas l’utiliser pour servir votre trafic de production, c’est un excellent moyen de visualiser vos copies de travail et de tester le rendu avant de déployer vos pages.</p>
|
|||
|
|
|
|||
|
|
<p>Pour rendre vos pages disponibles sur votre serveur Hugo, utilisez la commande <code class="language-plaintext highlighter-rouge">hugo server</code>. Cela rendra vos pages (il n’est pas nécessaire d’exécuter la commande hugo au préalable), puis démarrera le serveur Web.</p>
|
|||
|
|
|
|||
|
|
<p>Nous utiliserons l’option <code class="language-plaintext highlighter-rouge">--bind</code> pour spécifier que nous souhaitons rendre le site disponible sur toutes les interfaces (si vous avez installé Hugo localement, vous pouvez le supprimer). Nous devons également inclure l’option <code class="language-plaintext highlighter-rouge">--bindUrl</code><br />
|
|||
|
|
Nous l’avons défini dans notre fichier de configuration, mais il n’est pas récupéré par le serveur dans la version actuelle de Hugo. Définissez ceci sur le nom de domaine ou l’adresse IP de votre site Web:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rm -r public
|
|||
|
|
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Si vous définissez <code class="language-plaintext highlighter-rouge">draft = true</code> dans l’une de vos pages ou définissez la date à une heure future dans certains de vos contenus, vous pouvez créer et prévisualiser ces pages en incluant respectivement les indicateurs <code class="language-plaintext highlighter-rouge">-D</code> et <code class="language-plaintext highlighter-rouge">-F</code> :</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rm -r public
|
|||
|
|
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ -D -F
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Maintenant, si vous visitez le nom de domaine ou l’adresse IP de votre serveur dans votre navigateur Web et ajoutez la spécification de port :1313 à la fin, vous verrez votre site rendu:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://your_domain_or_IP:1313
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p><img src="/images/hugo-main_page.png" alt="Site de test Hugo" width="400" /></p>
|
|||
|
|
|
|||
|
|
<p>Nous pouvons cliquer sur notre premier post pour consulter notre Markdown rendu. Notre style Pygments a été appliqué au bloc de code:</p>
|
|||
|
|
|
|||
|
|
<p><img src="/images/hugo-first_page.png" alt="Hugo première page" width="400" /></p>
|
|||
|
|
|
|||
|
|
<p>Si nous cliquons sur le lien «À propos» (about), nous serons redirigés vers notre page «À propos de moi” (About Me page):</p>
|
|||
|
|
|
|||
|
|
<p><img src="/images/hugo-about_page.png" alt="Hugo à propos de la page" width="400" /></p>
|
|||
|
|
|
|||
|
|
<p>Comme vous pouvez le voir, notre thème est assez basique mais il fonctionne exactement comme prévu.</p>
|
|||
|
|
|
|||
|
|
<p>Si vous souhaitez essayer d’autres thèmes, vous pouvez ajouter l’option <code class="language-plaintext highlighter-rouge">--theme=</code> à la fin de votre ligne de serveur:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rm -r public
|
|||
|
|
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Gardez à l’esprit que chaque thème a ses propres attentes concernant la structure de votre répertoire et les paramètres de configuration. Vous devrez peut-être ajuster certaines choses pour que chaque nouveau thème fonctionne correctement.</p>
|
|||
|
|
|
|||
|
|
<p>Si vous souhaitez utiliser Hugo pour diffuser du contenu sur le port 80 comme un serveur Web classique, vous devrez ajouter l’option <code class="language-plaintext highlighter-rouge">--port</code> à votre ligne de commande. Vous devrez également ajouter <code class="language-plaintext highlighter-rouge">sudo</code> à la commande car les ports inférieurs à 1024 sont restreints pour les utilisateurs normaux:</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rm -r public
|
|||
|
|
sudo hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge --port=80
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Vous devriez maintenant pouvoir visiter votre site dans une fenêtre de navigateur sans le numéro de port ajouté.</p>
|
|||
|
|
|
|||
|
|
<p>Après avoir exécuté le serveur Hugo avec sudo , vous devrez également faire précéder la commande rm avec sudo :</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo rm -r public
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<h3 id="conclusion">Conclusion</h3>
|
|||
|
|
|
|||
|
|
<p>Hugo est un excellent moyen de faire décoller un site rapidement et facilement. Les sites statiques offrent une alternative moins gourmande en ressources que les sites CMS traditionnels. La majorité des utilisateurs n’ont pas besoin de contenu basé sur une base de données et n’utilisent pas les fonctionnalités supplémentaires fournies par les systèmes de gestion de contenu. Avec Hugo, vous pouvez concentrer votre énergie sur la création de contenu au lieu d’administrer un système complexe.</p>
|
|||
|
|
|
|||
|
|
<p>Notre <a href="https://www.digitalocean.com/community/tutorials/how-to-deploy-a-hugo-site-to-production-with-git-hooks-on-ubuntu-14-04">prochain guide</a> approfondira cette configuration en expliquant comment déployer un site Hugo à l’aide de Git Hooks.</p>
|
|||
|
|
|
|||
|
|
<h3 id="convertir-les-posts-jekyll-vers-hugo">Convertir les posts Jekyll vers Hugo</h3>
|
|||
|
|
|
|||
|
|
<p>Ceci est un petit script pour convertir les messages jekyll en hugo</p>
|
|||
|
|
|
|||
|
|
<p>Il nécessite python et devrait fonctionner sur tous les systèmes de type unix, éventuellement aussi sur les machines Windows ; cependant, il n’a été testé que sur debian en utilisant python 2.7
|
|||
|
|
Limitations</p>
|
|||
|
|
|
|||
|
|
<p>Il ne gère pas actuellement les ressources statiques telles que les images et les scripts, ceux-ci devront être déplacés manuellement vers leurs emplacements corrects. Quant aux codes spécifiques à jekyll, il ne gère que le {% de mise en évidence %} en le convertissant au format hugo</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone https://github.com/fredrikloch/JekyllToHugo.git
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Utilisation</p>
|
|||
|
|
|
|||
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyllToHugo.py [-h] [-o OUTPUT] [-v] source
|
|||
|
|
</code></pre></div></div>
|
|||
|
|
|
|||
|
|
<p>Options</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>arguments de position : source Chemin d’accès au dossier contenant les messages jekyll</li>
|
|||
|
|
<li>arguments facultatifs :
|
|||
|
|
<ul>
|
|||
|
|
<li>-h, –help affiche ce message d’aide et quitte</li>
|
|||
|
|
<li>-o SORTIE, –sortie SORTIE Chemin du dossier de sortie, sera créé s’il n’existe pas.</li>
|
|||
|
|
<li>-v, –verbose Imprimer la sortie de journalisation supplémentaire</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="d-print-none"><footer class="article__footer"><meta itemprop="dateModified" content="2019-12-25T00:00:00+01:00"><!-- start custom article footer snippet -->
|
|||
|
|
|
|||
|
|
<!-- end custom article footer snippet -->
|
|||
|
|
<!--
|
|||
|
|
<div align="right"><a type="application/rss+xml" href="/feed.xml" title="S'abonner"><i class="fa fa-rss fa-2x"></i></a>
|
|||
|
|
|
|||
|
|
 </div>
|
|||
|
|
-->
|
|||
|
|
</footer>
|
|||
|
|
<div class="article__section-navigator clearfix"><div class="previous"><span>PRÉCÉDENT</span><a href="/2019/12/25/How_To_Install_Ruby_on_Debian_using_RVM.html">How To Install Ruby on Debian using RVM</a></div><div class="next"><span>SUIVANT</span><a href="/2019/12/25/Identification-HTTP-avec-PHP-et-lua-ssowat.html">Identification-HTTP-avec-PHP-et-lua-ssowat</a></div></div></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
$(function() {
|
|||
|
|
var $this ,$scroll;
|
|||
|
|
var $articleContent = $('.js-article-content');
|
|||
|
|
var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
|
|||
|
|
var scroll = hasSidebar ? '.js-page-main' : 'html, body';
|
|||
|
|
$scroll = $(scroll);
|
|||
|
|
|
|||
|
|
$articleContent.find('.highlight').each(function() {
|
|||
|
|
$this = $(this);
|
|||
|
|
$this.attr('data-lang', $this.find('code').attr('data-lang'));
|
|||
|
|
});
|
|||
|
|
$articleContent.find('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]').each(function() {
|
|||
|
|
$this = $(this);
|
|||
|
|
$this.append($('<a class="anchor d-print-none" aria-hidden="true"></a>').html('<i class="fas fa-anchor"></i>'));
|
|||
|
|
});
|
|||
|
|
$articleContent.on('click', '.anchor', function() {
|
|||
|
|
$scroll.scrollToAnchor('#' + $(this).parent().attr('id'), 400);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</div><section class="page__comments d-print-none"></section></article><!-- start custom main bottom snippet -->
|
|||
|
|
<!-- end custom main bottom snippet -->
|
|||
|
|
</div>
|
|||
|
|
</div></div></div></div>
|
|||
|
|
</div><script>(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
var $body = $('body'), $window = $(window);
|
|||
|
|
var $pageRoot = $('.js-page-root'), $pageMain = $('.js-page-main');
|
|||
|
|
var activeCount = 0;
|
|||
|
|
function modal(options) {
|
|||
|
|
var $root = this, visible, onChange, hideWhenWindowScroll = false;
|
|||
|
|
var scrollTop;
|
|||
|
|
function setOptions(options) {
|
|||
|
|
var _options = options || {};
|
|||
|
|
visible = _options.initialVisible === undefined ? false : show;
|
|||
|
|
onChange = _options.onChange;
|
|||
|
|
hideWhenWindowScroll = _options.hideWhenWindowScroll;
|
|||
|
|
}
|
|||
|
|
function init() {
|
|||
|
|
setState(visible);
|
|||
|
|
}
|
|||
|
|
function setState(isShow) {
|
|||
|
|
if (isShow === visible) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
visible = isShow;
|
|||
|
|
if (visible) {
|
|||
|
|
activeCount++;
|
|||
|
|
scrollTop = $(window).scrollTop() || $pageMain.scrollTop();
|
|||
|
|
$root.addClass('modal--show');
|
|||
|
|
$pageMain.scrollTop(scrollTop);
|
|||
|
|
activeCount === 1 && ($pageRoot.addClass('show-modal'), $body.addClass('of-hidden'));
|
|||
|
|
hideWhenWindowScroll && window.hasEvent('touchstart') && $window.on('scroll', hide);
|
|||
|
|
$window.on('keyup', handleKeyup);
|
|||
|
|
} else {
|
|||
|
|
activeCount > 0 && activeCount--;
|
|||
|
|
$root.removeClass('modal--show');
|
|||
|
|
$window.scrollTop(scrollTop);
|
|||
|
|
activeCount === 0 && ($pageRoot.removeClass('show-modal'), $body.removeClass('of-hidden'));
|
|||
|
|
hideWhenWindowScroll && window.hasEvent('touchstart') && $window.off('scroll', hide);
|
|||
|
|
$window.off('keyup', handleKeyup);
|
|||
|
|
}
|
|||
|
|
onChange && onChange(visible);
|
|||
|
|
}
|
|||
|
|
function show() {
|
|||
|
|
setState(true);
|
|||
|
|
}
|
|||
|
|
function hide() {
|
|||
|
|
setState(false);
|
|||
|
|
}
|
|||
|
|
function handleKeyup(e) {
|
|||
|
|
// Char Code: 27 ESC
|
|||
|
|
if (e.which === 27) {
|
|||
|
|
hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setOptions(options);
|
|||
|
|
init();
|
|||
|
|
return {
|
|||
|
|
show: show,
|
|||
|
|
hide: hide,
|
|||
|
|
$el: $root
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
$.fn.modal = modal;
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script><div class="modal modal--overflow page__search-modal d-print-none js-page-search-modal"><script>
|
|||
|
|
(function () {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
// search panel
|
|||
|
|
var search = (window.search || (window.search = {}));
|
|||
|
|
var useDefaultSearchBox = window.useDefaultSearchBox === undefined ?
|
|||
|
|
true : window.useDefaultSearchBox ;
|
|||
|
|
|
|||
|
|
var $searchModal = $('.js-page-search-modal');
|
|||
|
|
var $searchToggle = $('.js-search-toggle');
|
|||
|
|
var searchModal = $searchModal.modal({ onChange: handleModalChange, hideWhenWindowScroll: true });
|
|||
|
|
var modalVisible = false;
|
|||
|
|
search.searchModal = searchModal;
|
|||
|
|
|
|||
|
|
var $searchBox = null;
|
|||
|
|
var $searchInput = null;
|
|||
|
|
var $searchClear = null;
|
|||
|
|
|
|||
|
|
function getModalVisible() {
|
|||
|
|
return modalVisible;
|
|||
|
|
}
|
|||
|
|
search.getModalVisible = getModalVisible;
|
|||
|
|
|
|||
|
|
function handleModalChange(visible) {
|
|||
|
|
modalVisible = visible;
|
|||
|
|
if (visible) {
|
|||
|
|
search.onShow && search.onShow();
|
|||
|
|
useDefaultSearchBox && $searchInput[0] && $searchInput[0].focus();
|
|||
|
|
} else {
|
|||
|
|
search.onShow && search.onHide();
|
|||
|
|
useDefaultSearchBox && $searchInput[0] && $searchInput[0].blur();
|
|||
|
|
setTimeout(function() {
|
|||
|
|
useDefaultSearchBox && ($searchInput.val(''), $searchBox.removeClass('not-empty'));
|
|||
|
|
search.clear && search.clear();
|
|||
|
|
window.pageAsideAffix && window.pageAsideAffix.refresh();
|
|||
|
|
}, 400);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$searchToggle.on('click', function() {
|
|||
|
|
modalVisible ? searchModal.hide() : searchModal.show();
|
|||
|
|
});
|
|||
|
|
// Char Code: 83 S, 191 /
|
|||
|
|
$(window).on('keyup', function(e) {
|
|||
|
|
if (!modalVisible && !window.isFormElement(e.target || e.srcElement) && (e.which === 83 || e.which === 191)) {
|
|||
|
|
modalVisible || searchModal.show();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (useDefaultSearchBox) {
|
|||
|
|
$searchBox = $('.js-search-box');
|
|||
|
|
$searchInput = $searchBox.children('input');
|
|||
|
|
$searchClear = $searchBox.children('.js-icon-clear');
|
|||
|
|
search.getSearchInput = function() {
|
|||
|
|
return $searchInput.get(0);
|
|||
|
|
};
|
|||
|
|
search.getVal = function() {
|
|||
|
|
return $searchInput.val();
|
|||
|
|
};
|
|||
|
|
search.setVal = function(val) {
|
|||
|
|
$searchInput.val(val);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$searchInput.on('focus', function() {
|
|||
|
|
$(this).addClass('focus');
|
|||
|
|
});
|
|||
|
|
$searchInput.on('blur', function() {
|
|||
|
|
$(this).removeClass('focus');
|
|||
|
|
});
|
|||
|
|
$searchInput.on('input', window.throttle(function() {
|
|||
|
|
var val = $(this).val();
|
|||
|
|
if (val === '' || typeof val !== 'string') {
|
|||
|
|
search.clear && search.clear();
|
|||
|
|
} else {
|
|||
|
|
$searchBox.addClass('not-empty');
|
|||
|
|
search.onInputNotEmpty && search.onInputNotEmpty(val);
|
|||
|
|
}
|
|||
|
|
}, 400));
|
|||
|
|
$searchClear.on('click', function() {
|
|||
|
|
$searchInput.val(''); $searchBox.removeClass('not-empty');
|
|||
|
|
search.clear && search.clear();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script><div class="search search--dark">
|
|||
|
|
<div class="main">
|
|||
|
|
<div class="search__header">Recherche</div>
|
|||
|
|
<div class="search-bar">
|
|||
|
|
<div class="search-box js-search-box">
|
|||
|
|
<div class="search-box__icon-search"><i class="fas fa-search"></i></div>
|
|||
|
|
<input id="search-input" type="text" />
|
|||
|
|
<div class="search-box__icon-clear js-icon-clear">
|
|||
|
|
<a><i class="fas fa-times"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="button button--theme-dark button--pill search__cancel js-search-toggle">
|
|||
|
|
Annuler</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="results-container" class="search-result js-search-result"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Script pointing to search-script.js -->
|
|||
|
|
<script>/*!
|
|||
|
|
* Simple-Jekyll-Search
|
|||
|
|
* Copyright 2015-2020, Christian Fei
|
|||
|
|
* Licensed under the MIT License.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
(function(){
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$Templater_7 = {
|
|||
|
|
compile: compile,
|
|||
|
|
setOptions: setOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const options = {}
|
|||
|
|
options.pattern = /\{(.*?)\}/g
|
|||
|
|
options.template = ''
|
|||
|
|
options.middleware = function () {}
|
|||
|
|
|
|||
|
|
function setOptions (_options) {
|
|||
|
|
options.pattern = _options.pattern || options.pattern
|
|||
|
|
options.template = _options.template || options.template
|
|||
|
|
if (typeof _options.middleware === 'function') {
|
|||
|
|
options.middleware = _options.middleware
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function compile (data) {
|
|||
|
|
return options.template.replace(options.pattern, function (match, prop) {
|
|||
|
|
const value = options.middleware(prop, data[prop], options.template)
|
|||
|
|
if (typeof value !== 'undefined') {
|
|||
|
|
return value
|
|||
|
|
}
|
|||
|
|
return data[prop] || match
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
function fuzzysearch (needle, haystack) {
|
|||
|
|
var tlen = haystack.length;
|
|||
|
|
var qlen = needle.length;
|
|||
|
|
if (qlen > tlen) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (qlen === tlen) {
|
|||
|
|
return needle === haystack;
|
|||
|
|
}
|
|||
|
|
outer: for (var i = 0, j = 0; i < qlen; i++) {
|
|||
|
|
var nch = needle.charCodeAt(i);
|
|||
|
|
while (j < tlen) {
|
|||
|
|
if (haystack.charCodeAt(j++) === nch) {
|
|||
|
|
continue outer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _$fuzzysearch_1 = fuzzysearch;
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
/* removed: const _$fuzzysearch_1 = require('fuzzysearch') */;
|
|||
|
|
|
|||
|
|
var _$FuzzySearchStrategy_5 = new FuzzySearchStrategy()
|
|||
|
|
|
|||
|
|
function FuzzySearchStrategy () {
|
|||
|
|
this.matches = function (string, crit) {
|
|||
|
|
return _$fuzzysearch_1(crit.toLowerCase(), string.toLowerCase())
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$LiteralSearchStrategy_6 = new LiteralSearchStrategy()
|
|||
|
|
|
|||
|
|
function LiteralSearchStrategy () {
|
|||
|
|
this.matches = function (str, crit) {
|
|||
|
|
if (!str) return false
|
|||
|
|
|
|||
|
|
str = str.trim().toLowerCase()
|
|||
|
|
crit = crit.trim().toLowerCase()
|
|||
|
|
|
|||
|
|
return crit.split(' ').filter(function (word) {
|
|||
|
|
return str.indexOf(word) >= 0
|
|||
|
|
}).length === crit.split(' ').length
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$Repository_4 = {
|
|||
|
|
put: put,
|
|||
|
|
clear: clear,
|
|||
|
|
search: search,
|
|||
|
|
setOptions: __setOptions_4
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* removed: const _$FuzzySearchStrategy_5 = require('./SearchStrategies/FuzzySearchStrategy') */;
|
|||
|
|
/* removed: const _$LiteralSearchStrategy_6 = require('./SearchStrategies/LiteralSearchStrategy') */;
|
|||
|
|
|
|||
|
|
function NoSort () {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = []
|
|||
|
|
let opt = {}
|
|||
|
|
|
|||
|
|
opt.fuzzy = false
|
|||
|
|
opt.limit = 10
|
|||
|
|
opt.searchStrategy = opt.fuzzy ? _$FuzzySearchStrategy_5 : _$LiteralSearchStrategy_6
|
|||
|
|
opt.sort = NoSort
|
|||
|
|
opt.exclude = []
|
|||
|
|
|
|||
|
|
function put (data) {
|
|||
|
|
if (isObject(data)) {
|
|||
|
|
return addObject(data)
|
|||
|
|
}
|
|||
|
|
if (isArray(data)) {
|
|||
|
|
return addArray(data)
|
|||
|
|
}
|
|||
|
|
return undefined
|
|||
|
|
}
|
|||
|
|
function clear () {
|
|||
|
|
data.length = 0
|
|||
|
|
return data
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isObject (obj) {
|
|||
|
|
return Boolean(obj) && Object.prototype.toString.call(obj) === '[object Object]'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isArray (obj) {
|
|||
|
|
return Boolean(obj) && Object.prototype.toString.call(obj) === '[object Array]'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addObject (_data) {
|
|||
|
|
data.push(_data)
|
|||
|
|
return data
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addArray (_data) {
|
|||
|
|
const added = []
|
|||
|
|
clear()
|
|||
|
|
for (let i = 0, len = _data.length; i < len; i++) {
|
|||
|
|
if (isObject(_data[i])) {
|
|||
|
|
added.push(addObject(_data[i]))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return added
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function search (crit) {
|
|||
|
|
if (!crit) {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
return findMatches(data, crit, opt.searchStrategy, opt).sort(opt.sort)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function __setOptions_4 (_opt) {
|
|||
|
|
opt = _opt || {}
|
|||
|
|
|
|||
|
|
opt.fuzzy = _opt.fuzzy || false
|
|||
|
|
opt.limit = _opt.limit || 10
|
|||
|
|
opt.searchStrategy = _opt.fuzzy ? _$FuzzySearchStrategy_5 : _$LiteralSearchStrategy_6
|
|||
|
|
opt.sort = _opt.sort || NoSort
|
|||
|
|
opt.exclude = _opt.exclude || []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function findMatches (data, crit, strategy, opt) {
|
|||
|
|
const matches = []
|
|||
|
|
for (let i = 0; i < data.length && matches.length < opt.limit; i++) {
|
|||
|
|
const match = findMatchesInObject(data[i], crit, strategy, opt)
|
|||
|
|
if (match) {
|
|||
|
|
matches.push(match)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return matches
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function findMatchesInObject (obj, crit, strategy, opt) {
|
|||
|
|
for (const key in obj) {
|
|||
|
|
if (!isExcluded(obj[key], opt.exclude) && strategy.matches(obj[key], crit)) {
|
|||
|
|
return obj
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isExcluded (term, excludedTerms) {
|
|||
|
|
for (let i = 0, len = excludedTerms.length; i < len; i++) {
|
|||
|
|
const excludedTerm = excludedTerms[i]
|
|||
|
|
if (new RegExp(excludedTerm).test(term)) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* globals ActiveXObject:false */
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$JSONLoader_2 = {
|
|||
|
|
load: load
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function load (location, callback) {
|
|||
|
|
const xhr = getXHR()
|
|||
|
|
xhr.open('GET', location, true)
|
|||
|
|
xhr.onreadystatechange = createStateChangeListener(xhr, callback)
|
|||
|
|
xhr.send()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createStateChangeListener (xhr, callback) {
|
|||
|
|
return function () {
|
|||
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|||
|
|
try {
|
|||
|
|
callback(null, JSON.parse(xhr.responseText))
|
|||
|
|
} catch (err) {
|
|||
|
|
callback(err, null)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getXHR () {
|
|||
|
|
return window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$OptionsValidator_3 = function OptionsValidator (params) {
|
|||
|
|
if (!validateParams(params)) {
|
|||
|
|
throw new Error('-- OptionsValidator: required options missing')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!(this instanceof OptionsValidator)) {
|
|||
|
|
return new OptionsValidator(params)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const requiredOptions = params.required
|
|||
|
|
|
|||
|
|
this.getRequiredOptions = function () {
|
|||
|
|
return requiredOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.validate = function (parameters) {
|
|||
|
|
const errors = []
|
|||
|
|
requiredOptions.forEach(function (requiredOptionName) {
|
|||
|
|
if (typeof parameters[requiredOptionName] === 'undefined') {
|
|||
|
|
errors.push(requiredOptionName)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return errors
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function validateParams (params) {
|
|||
|
|
if (!params) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
return typeof params.required !== 'undefined' && params.required instanceof Array
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var _$utils_9 = {
|
|||
|
|
merge: merge,
|
|||
|
|
isJSON: isJSON
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function merge (defaultParams, mergeParams) {
|
|||
|
|
const mergedOptions = {}
|
|||
|
|
for (const option in defaultParams) {
|
|||
|
|
mergedOptions[option] = defaultParams[option]
|
|||
|
|
if (typeof mergeParams[option] !== 'undefined') {
|
|||
|
|
mergedOptions[option] = mergeParams[option]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return mergedOptions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isJSON (json) {
|
|||
|
|
try {
|
|||
|
|
if (json instanceof Object && JSON.parse(JSON.stringify(json))) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
} catch (err) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _$src_8 = {};
|
|||
|
|
(function (window) {
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
let options = {
|
|||
|
|
searchInput: null,
|
|||
|
|
resultsContainer: null,
|
|||
|
|
json: [],
|
|||
|
|
success: Function.prototype,
|
|||
|
|
searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
|
|||
|
|
templateMiddleware: Function.prototype,
|
|||
|
|
sortMiddleware: function () {
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
noResultsText: 'No results found',
|
|||
|
|
limit: 10,
|
|||
|
|
fuzzy: false,
|
|||
|
|
debounceTime: null,
|
|||
|
|
exclude: []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let debounceTimerHandle
|
|||
|
|
const debounce = function (func, delayMillis) {
|
|||
|
|
if (delayMillis) {
|
|||
|
|
clearTimeout(debounceTimerHandle)
|
|||
|
|
debounceTimerHandle = setTimeout(func, delayMillis)
|
|||
|
|
} else {
|
|||
|
|
func.call()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const requiredOptions = ['searchInput', 'resultsContainer', 'json']
|
|||
|
|
|
|||
|
|
/* removed: const _$Templater_7 = require('./Templater') */;
|
|||
|
|
/* removed: const _$Repository_4 = require('./Repository') */;
|
|||
|
|
/* removed: const _$JSONLoader_2 = require('./JSONLoader') */;
|
|||
|
|
const optionsValidator = _$OptionsValidator_3({
|
|||
|
|
required: requiredOptions
|
|||
|
|
})
|
|||
|
|
/* removed: const _$utils_9 = require('./utils') */;
|
|||
|
|
|
|||
|
|
window.SimpleJekyllSearch = function (_options) {
|
|||
|
|
const errors = optionsValidator.validate(_options)
|
|||
|
|
if (errors.length > 0) {
|
|||
|
|
throwError('You must specify the following required options: ' + requiredOptions)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
options = _$utils_9.merge(options, _options)
|
|||
|
|
|
|||
|
|
_$Templater_7.setOptions({
|
|||
|
|
template: options.searchResultTemplate,
|
|||
|
|
middleware: options.templateMiddleware
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
_$Repository_4.setOptions({
|
|||
|
|
fuzzy: options.fuzzy,
|
|||
|
|
limit: options.limit,
|
|||
|
|
sort: options.sortMiddleware,
|
|||
|
|
exclude: options.exclude
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (_$utils_9.isJSON(options.json)) {
|
|||
|
|
initWithJSON(options.json)
|
|||
|
|
} else {
|
|||
|
|
initWithURL(options.json)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rv = {
|
|||
|
|
search: search
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
typeof options.success === 'function' && options.success.call(rv)
|
|||
|
|
return rv
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initWithJSON (json) {
|
|||
|
|
_$Repository_4.put(json)
|
|||
|
|
registerInput()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initWithURL (url) {
|
|||
|
|
_$JSONLoader_2.load(url, function (err, json) {
|
|||
|
|
if (err) {
|
|||
|
|
throwError('failed to get JSON (' + url + ')')
|
|||
|
|
}
|
|||
|
|
initWithJSON(json)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function emptyResultsContainer () {
|
|||
|
|
options.resultsContainer.innerHTML = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function appendToResultsContainer (text) {
|
|||
|
|
options.resultsContainer.innerHTML += text
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function registerInput () {
|
|||
|
|
options.searchInput.addEventListener('input', function (e) {
|
|||
|
|
if (isWhitelistedKey(e.which)) {
|
|||
|
|
emptyResultsContainer()
|
|||
|
|
debounce(function () { search(e.target.value) }, options.debounceTime)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function search (query) {
|
|||
|
|
if (isValidQuery(query)) {
|
|||
|
|
emptyResultsContainer()
|
|||
|
|
render(_$Repository_4.search(query), query)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function render (results, query) {
|
|||
|
|
const len = results.length
|
|||
|
|
if (len === 0) {
|
|||
|
|
return appendToResultsContainer(options.noResultsText)
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
results[i].query = query
|
|||
|
|
appendToResultsContainer(_$Templater_7.compile(results[i]))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isValidQuery (query) {
|
|||
|
|
return query && query.length > 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isWhitelistedKey (key) {
|
|||
|
|
return [13, 16, 20, 37, 38, 39, 40, 91].indexOf(key) === -1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function throwError (message) {
|
|||
|
|
throw new Error('SimpleJekyllSearch --- ' + message)
|
|||
|
|
}
|
|||
|
|
})(window)
|
|||
|
|
|
|||
|
|
}());
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- Configuration -->
|
|||
|
|
<script>
|
|||
|
|
SimpleJekyllSearch({
|
|||
|
|
searchInput: document.getElementById('search-input'),
|
|||
|
|
resultsContainer: document.getElementById('results-container'),
|
|||
|
|
noResultsText: '<p>Aucun résultat!</p>',
|
|||
|
|
json: '/search.json',
|
|||
|
|
searchResultTemplate: '<li><a href="{url}">{date} {title}</a> (Création {create})</li>'
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</div></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
function scrollToAnchor(anchor, duration, callback) {
|
|||
|
|
var $root = this;
|
|||
|
|
$root.animate({ scrollTop: $(anchor).position().top }, duration, function() {
|
|||
|
|
window.history.replaceState(null, '', window.location.href.split('#')[0] + anchor);
|
|||
|
|
callback && callback();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
$.fn.scrollToAnchor = scrollToAnchor;
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
function affix(options) {
|
|||
|
|
var $root = this, $window = $(window), $scrollTarget, $scroll,
|
|||
|
|
offsetBottom = 0, scrollTarget = window, scroll = window.document, disabled = false, isOverallScroller = true,
|
|||
|
|
rootTop, rootLeft, rootHeight, scrollBottom, rootBottomTop,
|
|||
|
|
hasInit = false, curState;
|
|||
|
|
|
|||
|
|
function setOptions(options) {
|
|||
|
|
var _options = options || {};
|
|||
|
|
_options.offsetBottom && (offsetBottom = _options.offsetBottom);
|
|||
|
|
_options.scrollTarget && (scrollTarget = _options.scrollTarget);
|
|||
|
|
_options.scroll && (scroll = _options.scroll);
|
|||
|
|
_options.disabled !== undefined && (disabled = _options.disabled);
|
|||
|
|
$scrollTarget = $(scrollTarget);
|
|||
|
|
isOverallScroller = window.isOverallScroller($scrollTarget[0]);
|
|||
|
|
$scroll = $(scroll);
|
|||
|
|
}
|
|||
|
|
function preCalc() {
|
|||
|
|
top();
|
|||
|
|
rootHeight = $root.outerHeight();
|
|||
|
|
rootTop = $root.offset().top + (isOverallScroller ? 0 : $scrollTarget.scrollTop());
|
|||
|
|
rootLeft = $root.offset().left;
|
|||
|
|
}
|
|||
|
|
function calc(needPreCalc) {
|
|||
|
|
needPreCalc && preCalc();
|
|||
|
|
scrollBottom = $scroll.outerHeight() - offsetBottom - rootHeight;
|
|||
|
|
rootBottomTop = scrollBottom - rootTop;
|
|||
|
|
}
|
|||
|
|
function top() {
|
|||
|
|
if (curState !== 'top') {
|
|||
|
|
$root.removeClass('fixed').css({
|
|||
|
|
left: 0,
|
|||
|
|
top: 0
|
|||
|
|
});
|
|||
|
|
curState = 'top';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function fixed() {
|
|||
|
|
if (curState !== 'fixed') {
|
|||
|
|
$root.addClass('fixed').css({
|
|||
|
|
left: rootLeft + 'px',
|
|||
|
|
top: 0
|
|||
|
|
});
|
|||
|
|
curState = 'fixed';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function bottom() {
|
|||
|
|
if (curState !== 'bottom') {
|
|||
|
|
$root.removeClass('fixed').css({
|
|||
|
|
left: 0,
|
|||
|
|
top: rootBottomTop + 'px'
|
|||
|
|
});
|
|||
|
|
curState = 'bottom';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function setState() {
|
|||
|
|
var scrollTop = $scrollTarget.scrollTop();
|
|||
|
|
if (scrollTop >= rootTop && scrollTop <= scrollBottom) {
|
|||
|
|
fixed();
|
|||
|
|
} else if (scrollTop < rootTop) {
|
|||
|
|
top();
|
|||
|
|
} else {
|
|||
|
|
bottom();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function init() {
|
|||
|
|
if(!hasInit) {
|
|||
|
|
var interval, timeout;
|
|||
|
|
calc(true); setState();
|
|||
|
|
// run calc every 100 millisecond
|
|||
|
|
interval = setInterval(function() {
|
|||
|
|
calc();
|
|||
|
|
}, 100);
|
|||
|
|
timeout = setTimeout(function() {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
}, 45000);
|
|||
|
|
window.pageLoad.then(function() {
|
|||
|
|
setTimeout(function() {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
}, 3000);
|
|||
|
|
});
|
|||
|
|
$scrollTarget.on('scroll', function() {
|
|||
|
|
disabled || setState();
|
|||
|
|
});
|
|||
|
|
$window.on('resize', function() {
|
|||
|
|
disabled || (calc(true), setState());
|
|||
|
|
});
|
|||
|
|
hasInit = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOptions(options);
|
|||
|
|
if (!disabled) {
|
|||
|
|
init();
|
|||
|
|
}
|
|||
|
|
$window.on('resize', window.throttle(function() {
|
|||
|
|
init();
|
|||
|
|
}, 200));
|
|||
|
|
return {
|
|||
|
|
setOptions: setOptions,
|
|||
|
|
refresh: function() {
|
|||
|
|
calc(true, { animation: false }); setState();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
$.fn.affix = affix;
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
function toc(options) {
|
|||
|
|
var $root = this, $window = $(window), $scrollTarget, $scroller, $tocUl = $('<ul class="toc toc--ellipsis"></ul>'), $tocLi, $headings, $activeLast, $activeCur,
|
|||
|
|
selectors = 'h1,h2,h3', container = 'body', scrollTarget = window, scroller = 'html, body', disabled = false,
|
|||
|
|
headingsPos, scrolling = false, hasRendered = false, hasInit = false;
|
|||
|
|
|
|||
|
|
function setOptions(options) {
|
|||
|
|
var _options = options || {};
|
|||
|
|
_options.selectors && (selectors = _options.selectors);
|
|||
|
|
_options.container && (container = _options.container);
|
|||
|
|
_options.scrollTarget && (scrollTarget = _options.scrollTarget);
|
|||
|
|
_options.scroller && (scroller = _options.scroller);
|
|||
|
|
_options.disabled !== undefined && (disabled = _options.disabled);
|
|||
|
|
$headings = $(container).find(selectors).filter('[id]');
|
|||
|
|
$scrollTarget = $(scrollTarget);
|
|||
|
|
$scroller = $(scroller);
|
|||
|
|
}
|
|||
|
|
function calc() {
|
|||
|
|
headingsPos = [];
|
|||
|
|
$headings.each(function() {
|
|||
|
|
headingsPos.push(Math.floor($(this).position().top));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function setState(element, disabled) {
|
|||
|
|
var scrollTop = $scrollTarget.scrollTop(), i;
|
|||
|
|
if (disabled || !headingsPos || headingsPos.length < 1) { return; }
|
|||
|
|
if (element) {
|
|||
|
|
$activeCur = element;
|
|||
|
|
} else {
|
|||
|
|
for (i = 0; i < headingsPos.length; i++) {
|
|||
|
|
if (scrollTop >= headingsPos[i]) {
|
|||
|
|
$activeCur = $tocLi.eq(i);
|
|||
|
|
} else {
|
|||
|
|
$activeCur || ($activeCur = $tocLi.eq(i));
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$activeLast && $activeLast.removeClass('active');
|
|||
|
|
($activeLast = $activeCur).addClass('active');
|
|||
|
|
}
|
|||
|
|
function render() {
|
|||
|
|
if(!hasRendered) {
|
|||
|
|
$root.append($tocUl);
|
|||
|
|
$headings.each(function() {
|
|||
|
|
var $this = $(this);
|
|||
|
|
$tocUl.append($('<li></li>').addClass('toc-' + $this.prop('tagName').toLowerCase())
|
|||
|
|
.append($('<a></a>').text($this.text()).attr('href', '#' + $this.prop('id'))));
|
|||
|
|
});
|
|||
|
|
$tocLi = $tocUl.children('li');
|
|||
|
|
$tocUl.on('click', 'a', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
var $this = $(this);
|
|||
|
|
scrolling = true;
|
|||
|
|
setState($this.parent());
|
|||
|
|
$scroller.scrollToAnchor($this.attr('href'), 400, function() {
|
|||
|
|
scrolling = false;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
hasRendered = true;
|
|||
|
|
}
|
|||
|
|
function init() {
|
|||
|
|
var interval, timeout;
|
|||
|
|
if(!hasInit) {
|
|||
|
|
render(); calc(); setState(null, scrolling);
|
|||
|
|
// run calc every 100 millisecond
|
|||
|
|
interval = setInterval(function() {
|
|||
|
|
calc();
|
|||
|
|
}, 100);
|
|||
|
|
timeout = setTimeout(function() {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
}, 45000);
|
|||
|
|
window.pageLoad.then(function() {
|
|||
|
|
setTimeout(function() {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
}, 3000);
|
|||
|
|
});
|
|||
|
|
$scrollTarget.on('scroll', function() {
|
|||
|
|
disabled || setState(null, scrolling);
|
|||
|
|
});
|
|||
|
|
$window.on('resize', window.throttle(function() {
|
|||
|
|
if (!disabled) {
|
|||
|
|
render(); calc(); setState(null, scrolling);
|
|||
|
|
}
|
|||
|
|
}, 100));
|
|||
|
|
}
|
|||
|
|
hasInit = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOptions(options);
|
|||
|
|
if (!disabled) {
|
|||
|
|
init();
|
|||
|
|
}
|
|||
|
|
$window.on('resize', window.throttle(function() {
|
|||
|
|
init();
|
|||
|
|
}, 200));
|
|||
|
|
return {
|
|||
|
|
setOptions: setOptions
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
$.fn.toc = toc;
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
/*(function () {
|
|||
|
|
|
|||
|
|
})();*/
|
|||
|
|
</script><script>
|
|||
|
|
/* toc must before affix, since affix need to konw toc' height. */(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
var TOC_SELECTOR = window.TEXT_VARIABLES.site.toc.selectors;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
var $window = $(window);
|
|||
|
|
var $articleContent = $('.js-article-content');
|
|||
|
|
var $tocRoot = $('.js-toc-root'), $col2 = $('.js-col-aside');
|
|||
|
|
var toc;
|
|||
|
|
var tocDisabled = false;
|
|||
|
|
var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
|
|||
|
|
var hasToc = $articleContent.find(TOC_SELECTOR).length > 0;
|
|||
|
|
|
|||
|
|
function disabled() {
|
|||
|
|
return $col2.css('display') === 'none' || !hasToc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tocDisabled = disabled();
|
|||
|
|
|
|||
|
|
toc = $tocRoot.toc({
|
|||
|
|
selectors: TOC_SELECTOR,
|
|||
|
|
container: $articleContent,
|
|||
|
|
scrollTarget: hasSidebar ? '.js-page-main' : null,
|
|||
|
|
scroller: hasSidebar ? '.js-page-main' : null,
|
|||
|
|
disabled: tocDisabled
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$window.on('resize', window.throttle(function() {
|
|||
|
|
tocDisabled = disabled();
|
|||
|
|
toc && toc.setOptions({
|
|||
|
|
disabled: tocDisabled
|
|||
|
|
});
|
|||
|
|
}, 100));
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
(function() {
|
|||
|
|
var SOURCES = window.TEXT_VARIABLES.sources;
|
|||
|
|
window.Lazyload.js(SOURCES.jquery, function() {
|
|||
|
|
var $window = $(window), $pageFooter = $('.js-page-footer');
|
|||
|
|
var $pageAside = $('.js-page-aside');
|
|||
|
|
var affix;
|
|||
|
|
var tocDisabled = false;
|
|||
|
|
var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
|
|||
|
|
|
|||
|
|
affix = $pageAside.affix({
|
|||
|
|
offsetBottom: $pageFooter.outerHeight(),
|
|||
|
|
scrollTarget: hasSidebar ? '.js-page-main' : null,
|
|||
|
|
scroller: hasSidebar ? '.js-page-main' : null,
|
|||
|
|
scroll: hasSidebar ? $('.js-page-main').children() : null,
|
|||
|
|
disabled: tocDisabled
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$window.on('resize', window.throttle(function() {
|
|||
|
|
affix && affix.setOptions({
|
|||
|
|
disabled: tocDisabled
|
|||
|
|
});
|
|||
|
|
}, 100));
|
|||
|
|
|
|||
|
|
window.pageAsideAffix = affix;
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script><!---->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<script>(function () {
|
|||
|
|
var $root = document.getElementsByClassName('root')[0];
|
|||
|
|
if (window.hasEvent('touchstart')) {
|
|||
|
|
$root.dataset.isTouch = true;
|
|||
|
|
document.addEventListener('touchstart', function(){}, false);
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|