yann/yannstatic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
yannstatic/static/2018/09/22/Ruby-Jekyll-serveur-statique.html

2923 lines
275 KiB
HTML
Raw Permalink Normal View History

first commit
2024-10-31 20:18:37 +01:00
<!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>Debian Ruby via les dépôts ou Rbenv + Jekyll (serveur statique) - YannStatic</title>
<meta name="description" content="Ruby + jekyll">
<link rel="canonical" href="https://static.rnmkcy.eu/2018/09/22/Ruby-Jekyll-serveur-statique.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}&nbsp;{title}</a></li>'
searchResultTemplate: '<li><a href="{url}">{date}&nbsp;{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;">Debian Ruby via les dépôts ou Rbenv + Jekyll (serveur statique)</h1></header></div><meta itemprop="headline" content="Debian Ruby via les dépôts ou Rbenv + Jekyll (serveur statique)"><div class="article__info clearfix"><ul class="left-col menu"><li>
_includes/article-list.html
2024-11-08 14:10:33 +01:00
<a class="button button--secondary button--pill button--sm" style="color:#00FFFF" href="/archive.html?tag=serveur">serveur</a>
first commit
2024-10-31 20:18:37 +01:00
</li><li>
_includes/article-list.html
2024-11-08 14:10:33 +01:00
<a class="button button--secondary button--pill button--sm" style="color:#00FFFF" href="/archive.html?tag=markdown">markdown</a>
first commit
2024-10-31 20:18:37 +01:00
</li></ul><ul class="right-col menu"><li>
<i class="far fa-calendar-alt"></i>&nbsp;<span title="Création" style="color:#FF00FF">22&nbsp;sept.&nbsp;2018</span>
<span title="Modification" style="color:#00FF7F">28&nbsp;avr.&nbsp;&nbsp;2020</span></li></ul></div><meta itemprop="datePublished" content="2020-04-28T00:00:00+02:00">
<meta itemprop="keywords" content="serveur,markdown"><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">&#8679;</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><h1 id="ruby--jekyll">Ruby + jekyll</h1>
<p><a href="https://jekyllrb.com/"><img src="/images/jekyll-300x133.png" alt="image" width="100px" /></a> <strong>Serveur statique Jekyll sur debian</strong></p>
<h2 id="how-to-install-jekyll-on-ubuntu-1804--debian-10-linux"><a href="https://computingforgeeks.com/how-to-install-jekyll-on-ubuntu-18-04/">How To Install Jekyll on Ubuntu 18.04 / Debian 10 Linux</a></h2>
<h2 id="alternative-a--installer-ruby-via-les-dépôts">Alternative A : Installer Ruby (via les dépôts)</h2>
<p><a href="https://linuxconfig.org/getting-started-with-jekyll-on-debian-9-stretch-linux">Getting started with Jekyll on Debian 9 Stretch Linux </a><br />
<em>Bundler fournit un environnement cohérent pour les projets Ruby par le suivi et l’installation des “gems” exactes et les versions qui sont nécessaires.Bundler est une sortie de l’enfer de la dépendance, et s’assure que les “gems” dont vous avez besoin sont présents dans le développement, la mise en scène et la production.</em></p>
<p>En mode su (root), installation Jekyll avec gems (source):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo apt install build-essential ruby-full
</code></pre></div></div>
<h2 id="alternative-b--installer-ruby-en-utilisant-rbenv-meilleur-choix">Alternative B : Installer Ruby en utilisant Rbenv (MEILLEUR CHOIX)</h2>
<p>Si nécessaire désinstaller le ruby installé via les dépôts apt debian : <code class="language-plaintext highlighter-rouge">sudo apt remove ruby-full</code></p>
<p>Rbenv est un outil léger de gestion des versions de Ruby qui vous permet de changer facilement de version de Ruby.</p>
<p>Par défaut, Rbenv ne gère pas l’installation des versions de Ruby. ruby-build est un outil qui vous aide à installer n’importe quelle version de Ruby dont vous pourriez avoir besoin. Il est disponible en tant que programme autonome et en tant que plugin pour rbenv.</p>
<p>Installez les dépendances nécessaires à l’outil ruby-build pour construire Ruby à partir des sources :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo apt update
sudo apt install git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev
</code></pre></div></div>
<p>Ensuite, lancez la commande curl suivante pour installer les scripts rbenv et ruby-build :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>curl -sL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer | bash -
</code></pre></div></div>
<p>Si l’installation est réussie, le script imprimera quelque chose comme ceci :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Running doctor script to verify installation...
Checking for `rbenv' in PATH: not found
You seem to have rbenv installed in `/home/dbsuser/.rbenv/bin', but that
directory is not present in PATH. Please add it to PATH by configuring
your `~/.bashrc', `~/.zshrc', or `~/.config/fish/config.fish'.
</code></pre></div></div>
<p>Avant de commencer à utiliser rbenv, nous devons ajouter $HOME/.rbenv/bin à notre PATH.</p>
<p>Si vous utilisez Bash, tapez :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>echo 'export PATH="$HOME/.rbenv/bin:$PATH"' &gt;&gt; ~/.bashrc
echo 'eval "$(rbenv init -)"' &gt;&gt; ~/.bashrc
source ~/.bashrc
</code></pre></div></div>
<p>Si vous utilisez le type Zsh :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>echo 'export PATH="$HOME/.rbenv/bin:$PATH"' &gt;&gt; ~/.zshrc
echo 'eval "$(rbenv init -)"' &gt;&gt; ~/.zshrc
source ~/.zshrc
</code></pre></div></div>
<p>Maintenant que rbenv est installé sur notre système, nous pouvons facilement installer la dernière version stable de Ruby et la définir comme version par défaut avec :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rbenv install 2.6.5
rbenv global 2.6.5
</code></pre></div></div>
<p>Vérifiez que Ruby a été correctement installé en imprimant le numéro de version :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby -v
</code></pre></div></div>
<p>ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux]</p>
<h3 id="managing-versions">Managing versions</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rbenv install -l # List all available versions
rbenv install 2.2.1 # Install Ruby 2.2.1
rbenv uninstall 2.2.1 # Uninstall Ruby 2.2.1
rbenv versions # See installed versions
rbenv version # See current version
rbenv which &lt;NAME&gt; # Display path to executable
rbenv rehash # Re-write binstubs
</code></pre></div></div>
<h1 id="site-statique-wikistatic-avec-jekyll">Site statique “wikistatic” avec Jekyll</h1>
<h2 id="installation-dépendances--wikistatic">Installation dépendances + wikistatic</h2>
<h3 id="installer-dépendances-rmagick-sur-debian">Installer dépendances Rmagick sur Debian</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo apt install imagemagick libmagick++-dev ruby-rmagick # imagemagick-doc
</code></pre></div></div>
<h3 id="installation-wikistatic">Installation wikistatic</h3>
<p>Ce <strong>wikistatic</strong> basé sur <strong>Jekyll</strong> utilise le thème libre <a href="https://github.com/dbtek/dbyll">dbyll</a></p>
<p>Création dossier</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo mkdir -p /srv # création dossier
</code></pre></div></div>
<p>Les droits sur le dossier</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo chown $USER. -R /srv/
</code></pre></div></div>
<p>Clonage wikistatic par git</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt <span class="nb">install </span>git
<span class="nb">cd</span> /srv
git clone https://gitea.cinay.eu/yann/wikistatic
<span class="nb">cd </span>wikistatic
</code></pre></div></div>
<p>Lancement “bundle” dans le dossier <strong>/srv/wikistatic</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd /srv/wikistatic
bundle
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>...
Bundle complete! 5 Gemfile dependencies, 34 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
</code></pre></div></div>
<h2 id="lancer-manuellement-le-serveur-pour-des-tests">Lancer manuellement le serveur pour des tests</h2>
<p>On lance manuellement le serveur pour un test</p>
<h3 id="méthode-a">méthode A</h3>
<p>Exécution , <strong>lancement serveur pour test</strong></p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code> bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[...]
Auto-regeneration: enabled for '/srv/wikistatic'
Configuration file: /srv/wikistatic/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
</code></pre></div></div>
<h3 id="méthode-b">méthode B</h3>
<p>Construction</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll build --source "/srv/wikistatic"
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Configuration file: /srv/wikistatic/_config.yml
Source: /srv/wikistatic
Destination: /srv/wikistatic/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 47.834 seconds.
Auto-regeneration: disabled. Use --watch to enable.
</code></pre></div></div>
<h3 id="méthode-c">méthode C</h3>
<p>Auto génération activée (–watch) + serveur</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll serve --watch
</code></pre></div></div>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Configuration file: /srv/wikistatic/_config.yml
Source: /srv/wikistatic
Destination: /srv/wikistatic/_site
Incremental build: disabled. Enable with <span class="nt">--incremental</span>
Generating...
<span class="k">done in </span>39.011 seconds.
Auto-regeneration: enabled <span class="k">for</span> <span class="s1">'/srv/wikistatic'</span>
</code></pre></div></div>
<blockquote>
<p>Le serveur est en local sur le port 4000 (<a href="http://localhost:4000">http://localhost:4000</a>) , on l’arrête par <em>Ctrl c</em></p>
</blockquote>
<h3 id="méthode-d">méthode D</h3>
<p>Auto génération activée (–watch) SANS serveur</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll build --watch --source "/srv/wikistatic"
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Configuration file: /srv/wikistatic/_config.yml
Source: /srv/wikistatic
Destination: /srv/wikistatic/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 18.916 seconds.
Auto-regeneration: enabled for '/srv/wikistatic'
</code></pre></div></div>
<h2 id="serveur-de-production-wikistatic">Serveur de production “wikistatic”</h2>
<p>Le dossier <em>_site</em> est regénéré à chaque création, modification ou suppression d’un fichier de type <em>markdown</em> dans le dossier <em>_posts</em><br />
Cette opération doit être lancée et en attente.</p>
<blockquote>
<p>ATTENTION : Suivant le mode d’installation de ruby (compilation ou rvm), les méthodes sont différentes.</p>
</blockquote>
<h3 id="ruby-via-compilation--service-jekyll">Ruby via compilation → Service jekyll</h3>
<p>On localise la version jekyll</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>which jekyll
/usr/local/bin/jekyll
</code></pre></div></div>
<p>Pour lancer le serveur Jekyll au démarrage , créer un bash sous <strong>/srv/wikistatic</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nano /srv/wikistatic/start_jekyll.sh
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#!/bin/sh
# Accès dossier
cd /srv/wikistatic/
# lancement jekyll en mode auto génération sans serveur
/usr/local/bin/bundle exec jekyll build --watch --source "/srv/wikistatic"
</code></pre></div></div>
<p>Droits sur le bash</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo chown $USER. /srv/wikistatic/start_jekyll.sh
chmod +x /srv/wikistatic/start_jekyll.sh
</code></pre></div></div>
<blockquote>
<p>Pour lancer le serveur <strong>Jekyll</strong> au démarrage, utilisation d’un <u>service systemd</u><br />
<strong>ATTENTION!</strong> , remplacer <em>utilisateur</em> par votre nom d’utilisateur (<strong>echo $USER</strong>)</p>
</blockquote>
<p>Création d’un service jekyll sous systemd</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo nano /etc/systemd/system/jekyll.service
</code></pre></div></div>
<p>Contenu du fichier</p>
<div class="language-ini highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">[Unit]</span>
<span class="py">Description</span><span class="p">=</span><span class="s">jekyll Service</span>
<span class="py">After</span><span class="p">=</span><span class="s">network.target</span>
<span class="nn">[Service]</span>
<span class="py">Type</span><span class="p">=</span><span class="s">simple</span>
<span class="py">User</span><span class="p">=</span><span class="s">utilisateur</span>
<span class="py">ExecStart</span><span class="p">=</span><span class="s">/bin/sh /srv/wikistatic/start_jekyll.sh</span>
<span class="py">Restart</span><span class="p">=</span><span class="s">on-abort</span>
<span class="nn">[Install]</span>
<span class="py">WantedBy</span><span class="p">=</span><span class="s">multi-user.target</span>
</code></pre></div></div>
<p>Lancer le service <strong>jekyll</strong> :</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>systemctl daemon-reload
<span class="nb">sudo </span>systemctl start jekyll
<span class="c">#Vérifier:</span>
<span class="nb">sudo </span>systemctl status jekyll
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>● jekyll.service - jekyll Service
Loaded: loaded (/etc/systemd/system/jekyll.service; enabled; vendor preset: enabled)
Active: active (running) since Wed 2018-08-29 18:47:45 CEST; 1 day 13h ago
Main PID: 29680 (sh)
Tasks: 5 (limit: 4915)
CGroup: /system.slice/jekyll.service
├─29680 /bin/sh /srv/wikistatic/start_jekyll.sh
└─29681 /usr/local/bin/jekyll build --watch
</code></pre></div></div>
<p>Valider le lancement du <strong>service jekyll au démarrage</strong></p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>systemctl <span class="nb">enable </span>jekyll
</code></pre></div></div>
<h3 id="ruby-via-rvm--manuelle">Ruby via rvm → Manuelle</h3>
<p>En cas d’ajout ou de modification d’un “post” ,il faut mettre à jour le site “statique” en le regénérant<br />
Il faut se connecter avec l’utilisateur qui est dans le groupe “rvm”<br />
Puis lancer la commande</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll build --source "/srv/wikistatic"
</code></pre></div></div>
<p>Si on souhaite l’avoir en tâche de fond et en attente des modifications, on ouvre use session “tmux”</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>tmux
</code></pre></div></div>
<p>Puis on lance la commande de regénération avec attente</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll build --watch --source "/srv/wikistatic"
</code></pre></div></div>
<p>On quitte la session tmux sans la détruire</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Ctrl b + d
</code></pre></div></div>
<blockquote>
<p>En cas de redémarrage du serveur , il faudra recréer une session tmux</p>
</blockquote>
<h2 id="serveur-nginx-avec-ou-sans-proxy">Serveur nginx avec ou sans proxy</h2>
<p>La génération du site statique se fait avec ou sans serveur<br />
Dans le cas d’une génération avec serveur ,il faut utiliser un proxy<br />
Dans le cas contraire, le serveur pointe directement sur le dossier <strong>_site</strong></p>
<h3 id="jekyllnginx-avec-proxy">Jekyll/Nginx AVEC Proxy</h3>
<p>Sur un serveur Debian avec <strong>nginx</strong> installé, accès par proxy au serveur <strong>jekyll</strong></p>
<p><u>Exemple avec un site</u> <a href="http://static.domaine.tld">http://static.domaine.tld</a><br />
Utilisation <strong>proxy</strong> sur nginx pour accèder au serveur local <strong>Jekyll</strong></p>
<p>Créer une configuration nginx <strong>jekyll.conf</strong> sous <strong>/etc/nginx/conf.d</strong></p>
<div class="language-nginx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">server</span> <span class="p">{</span>
<span class="kn">listen</span> <span class="mi">80</span><span class="p">;</span>
<span class="kn">server_name</span> <span class="s">static.domaine.tld</span><span class="p">;</span>
<span class="kn">location</span> <span class="n">/</span> <span class="p">{</span>
<span class="kn">proxy_pass</span> <span class="s">http://127.0.0.1:4000</span><span class="p">;</span>
<span class="p">}</span>
<span class="kn">access_log</span> <span class="n">/var/log/nginx/static-access.log</span><span class="p">;</span>
<span class="kn">error_log</span> <span class="n">/var/log/nginx/static-error.log</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Relancer le service nginx</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo systemctl restart nginx
</code></pre></div></div>
<h3 id="jekyllnginx-sans-proxy">Jekyll/Nginx SANS Proxy</h3>
<p><u>Exemple avec un site</u> <a href="http://static.domaine.tld">http://static.domaine.tld</a></p>
<div class="language-nginx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">server</span> <span class="p">{</span>
<span class="kn">listen</span> <span class="mi">80</span><span class="p">;</span>
<span class="kn">server_name</span> <span class="s">static.domaine.tld</span><span class="p">;</span>
<span class="kn">root</span> <span class="n">/srv/wikistatic/_site/</span> <span class="p">;</span>
<span class="kn">access_log</span> <span class="n">/var/log/nginx/static-access.log</span><span class="p">;</span>
<span class="kn">error_log</span> <span class="n">/var/log/nginx/static-error.log</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Relancer le service nginx</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo systemctl restart nginx
</code></pre></div></div>
<p><u>Exemple sur un serveur web **yunohost** fonctionnel</u><br />
Installer une application personnalisée <strong>Multi custom webapp</strong> <a href="https://github.com/YunoHost-Apps/multi_webapp_ynh">https://github.com/YunoHost-Apps/multi_webapp_ynh</a> domaine <strong>static.domaine.tld</strong> <br />
Redéfinir le “root” sur <strong>/srv/wikistatic/_site/</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo rm -r /var/www/webapp_cinay/static.domaine.tld
# Création lien avec le dossier **_site** généré par "jekyll"
sudo ln -s /srv/wikistatic/_site /var/www/webapp_cinay/static.domaine.tld
</code></pre></div></div>
<p>Le fichier de configuration nginx sous <strong>/etc/nginx/conf.d/static.domaine.tld.d/webapp_static.domaine.tld_.conf</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>location / {
alias /var/www/webapp_cinay/static.domaine.tld/ ;
if ($scheme = http) {
rewrite ^ https://$server_name$request_uri? permanent;
}
index index.html index.php ;
try_files $uri $uri/ index.php;
location ~ [^/]\.php(/|$) {
fastcgi_split_path_info ^(.+?\.php)(/.*)$;
fastcgi_pass unix:/var/run/php5-fpm-webapp_static.domaine.tld.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param REMOTE_USER $remote_user;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param SCRIPT_FILENAME $request_filename;
}
# Include SSOWAT user panel.
include conf.d/yunohost_panel.conf.inc;
}
</code></pre></div></div>
<p>Relancer le service nginx</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sudo systemctl restart nginx
</code></pre></div></div>
<h2 id="rédaction-des-billets">Rédaction des billets</h2>
<ul>
<li>syntaxe markdown</li>
<li>le nom du fichier débute obligatoirement par la date au format *aaaa-mm-jj** , suffixe <strong>.md</strong></li>
<li>Ni espace , ni accents et ni caractères spéciaux dans le nom (exemple : 2106-04-21-synyaxe-ecriture-fichier.md)</li>
<li>Entête du fichier (description):</li>
</ul>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: article
title: "Titre du billet qui s'affichera dans la liste"
ref: (falcutatif)
tags: [rubrique_mots_clés]
lang: fr
description: Brève description
---
</code></pre></div></div>
<p><strong>ATTENTION !</strong> , respecter le format de la date <strong>aaaa-mm-jj</strong> , si plusieurs catégories et tags , ils sont séparés par une ‘virgule’ <br />
le code qui contient des doubles accolades {{ }} doit être précédé de <strong>raw</strong> et se terminer par <strong>endraw</strong> <img src="https://static.rnmkcy.eu/images/raw-endraw.png" alt="raw endraw" /></p>
<p>Lorsque le fichier <strong>.md</strong> est déposé dans le dossier <strong>_posts</strong> , il est validé automatiquement par jekyll</p>
<h1 id="personalisation-thème-style-et-plugins">Personalisation thème, style et plugins</h1>
<h2 id="favicon">favicon</h2>
<p>Image dans le répertoire “images”<br />
Modifier le fichier <strong>_includes/default.html</strong></p>
<p>[MIME TYPE]</p>
<ul>
<li>GIF: image/gif</li>
<li>JPEG: image/jpeg</li>
<li>PNG: image/png</li>
<li>ICO: image/x-icon</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"[MIME TYPE]"</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/images/{{ site.favicon_ico }}"</span><span class="nt">&gt;</span>
</code></pre></div></div>
<p>exemple fichier .png<br />
Définir une constante pour le fichier image <code class="language-plaintext highlighter-rouge">favicon_ico: yak-happy-32x32.png</code> dans le fichier <strong>_config.yml</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/images/{{ site.favicon_ico }}"</span><span class="nt">&gt;</span>
</code></pre></div></div>
<h2 id="jekyll-toc">jekyll-toc</h2>
<p><a href="https://github.com/toshimaru/jekyll-toc">jekyll-toc</a> : Un plugin de filtrage pour <strong>Jekyll</strong> qui génère une table des matières.</p>
<p><strong>Installation</strong></p>
<p>Ajouter le plugin jekyll-toc dans le <strong>Gemfile</strong> de votre site.</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">sudo</span> <span class="n">gem</span> <span class="n">install</span> <span class="n">jekyll</span><span class="o">-</span><span class="n">toc</span>
</code></pre></div></div>
<p>Ajouter la ligne suivante au fichier Gemfile <strong>dbyll/Gemfile</strong> :<br />
<code class="language-plaintext highlighter-rouge">gem 'jekyll-toc'</code></p>
<p>Et ajouter le jekyll-toc au fichier <strong>_config.yml</strong> de votre site.</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">gems</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll-toc</span>
</code></pre></div></div>
<p>toc: true` dans vos publications (posts).</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">article</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Welcome</span><span class="nv"> </span><span class="s">to</span><span class="nv"> </span><span class="s">Jekyll!"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="kc">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<p>Ajouter au fichier <strong>assets/css/style.css</strong></p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.section-nav</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#FFF</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5px</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">30px</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">3px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.toc-entry.toc-h1</span> <span class="p">{</span> <span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">none</span><span class="p">;}</span>
<span class="nc">.toc-entry.toc-h2</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span> <span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">none</span><span class="p">;}</span>
<span class="nc">.toc-entry.toc-h3</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">none</span><span class="p">;}</span>
<span class="nc">.toc-entry.toc-h4</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">45px</span><span class="p">;</span> <span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">none</span><span class="p">;}</span>
<span class="nc">.toc-entry.toc-h5</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">60px</span><span class="p">;</span> <span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">none</span><span class="p">;}</span>
<span class="nc">.toc-entry.toc-h6</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">75px</span><span class="p">;</span> <span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">none</span><span class="p">;}</span>
</code></pre></div></div>
<p><strong>Usage</strong></p>
<p>Il y a trois filtres <strong>liquid</strong> disponibles aujourd’hui, qui devraient tous être appliqué à un contenu HTML, par exemple le contenu de la variable <strong>liquid</strong> disponible dans les modèles de Jekyll.</p>
<h3 id="utilisation-de-base-a-privilegier">Utilisation de base (A PRIVILEGIER)</h3>
<p><strong>filtre toc</strong></p>
<p>Remplacer {{ content }} par {{ content | toc }} dans le fichier <strong>_includes/post.html</strong></p>
<p>Ce filtre met la table des matières directement au-dessus du contenu.</p>
<p>Modifier la ligne 42 dans le fichier <strong>_includes/post.html</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article_body"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- {{ content | toc }} --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
...
</code></pre></div></div>
<h3 id="utilisation-avancée">Utilisation avancée</h3>
<p>Si vous souhaitez séparer le TOC et son contenu, vous pouvez utiliser les filtres <code class="language-plaintext highlighter-rouge">toc_only</code> et <code class="language-plaintext highlighter-rouge">inject_anchors</code> .</p>
<p>**filtre **<code class="language-plaintext highlighter-rouge">toc_only</code></p>
<p>Génère le TOC lui-même comme décrit ci-dessous. Surtout utile dans les cas où la table des matières ne doit pas être placée immédiatement au-dessus du contenu, mais à un autre endroit de la page, à savoir un côté.</p>
<p><strong>filtre</strong> <code class="language-plaintext highlighter-rouge">inject_anchors</code></p>
<p>Injecte les “ancres” HTML dans le contenu sans réellement créer la table des matières elle-même. Ils sont de la forme:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;a</span> <span class="na">id=</span><span class="s">"heading11"</span> <span class="na">class=</span><span class="s">"anchor"</span> <span class="na">href=</span><span class="s">"#heading1-1"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"octicon octicon-link"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</code></pre></div></div>
<p>Ceci est seulement utile lorsque le TOC lui-même doit être placé à un autre endroit avec le filtre <code class="language-plaintext highlighter-rouge">toc_only</code>.</p>
<h2 id="css-highlight">CSS highlight</h2>
<p>Fichier <strong>zenburn.css</strong> extrait du ZIP ,voir <a href="http://richleland.github.io/pygments-css/">pygments-css ,css files created from pygment’s built-in styles</a><br />
On renomme le fichier dans le dossier <strong>assets/resources/syntax/zenburn-jekyll.css</strong> puis on le modifie</p>
<ol>
<li>Remplacer la classe <br />
<code class="language-plaintext highlighter-rouge">sudo sed -i 's/.codehilite/.highlight/g' zenburn-jekyll.css</code></li>
<li>Ajouter en première ligne du fichier <strong>zenburn-jekyll.css</strong>:</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
.highlight { background-color: #3f3f3f }
</code></pre></div></div>
<p>Modifier la ligne contenant <strong>style.css</strong> (à remplacer par <strong>zenburn-jekyll.css</strong>) dans le fichier <strong>_includes/default.html</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/assets/resources/syntax/zenburn-jekyll.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>`
</code></pre></div></div>
<p>Le contenu du fichier <strong>zenburn-jekyll.css</strong> après les modifications</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.highlight</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#3f3f3f</span> <span class="p">}</span>
<span class="nc">.highlight</span> <span class="nt">code</span><span class="o">,</span> <span class="nc">.highlight</span> <span class="nt">pre</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#fdce93</span><span class="p">;</span><span class="nl">background-color</span><span class="p">:</span><span class="m">#3f3f3f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.hll</span><span class="p">{</span><span class="nl">background-color</span><span class="p">:</span><span class="m">#222</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.c</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#7f9f7f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.err</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#e37170</span><span class="p">;</span><span class="nl">background-color</span><span class="p">:</span><span class="m">#3d3535</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.g</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#7f9f7f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.k</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#f0dfaf</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.l</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.n</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dcdccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.o</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#f0efd0</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.x</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.p</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#41706f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.cm</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#7f9f7f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.cp</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#7f9f7f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.c1</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#7f9f7f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.cs</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cd0000</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gd</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cd0000</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.ge</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">;</span><span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gr</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gh</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dcdccc</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gi</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#00cd00</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.go</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">gray</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gp</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dcdccc</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gs</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gu</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">purple</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.gt</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#0040D0</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.kc</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dca3a3</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.kd</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ffff86</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.kn</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dfaf8f</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.kp</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cdcf99</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.kr</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cdcd00</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.kt</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#00cd00</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.ld</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.m</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8cd0d3</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.s</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.na</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#9ac39f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nb</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#efef8f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nc</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#efef8f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.no</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nd</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.ni</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#c28182</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.ne</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#c3bf9f</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nf</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#efef8f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nl</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nn</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8fbede</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nx</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.py</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nt</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#9ac39f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.nv</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dcdccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.ow</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#f0efd0</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.w</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.mf</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8cd0d3</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.mh</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8cd0d3</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.mi</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8cd0d3</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.mo</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8cd0d3</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.sb</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.sc</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.sd</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.s2</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.se</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.sh</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.si</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.sx</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.sr</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.s1</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.ss</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#cc9393</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.bp</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#efef8f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.vc</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#efef8f</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.vg</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#dcdccc</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.vi</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#ffffc7</span><span class="p">}</span>
<span class="nc">.highlight</span> <span class="nc">.il</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="m">#8cd0d3</span><span class="p">}</span>
</code></pre></div></div>
<h2 id="position-des-éléments-barre-latéral-gauche">Position des éléments “barre latéral gauche”</h2>
<p>Contenu de la barre latérale alligné vers le haut (1% au lieu de 10%)<br />
Directive <code class="language-plaintext highlighter-rouge">.sidebar</code> , l’attribut <code class="language-plaintext highlighter-rouge">padding-top: 10%;</code> passe à <code class="language-plaintext highlighter-rouge">padding-top: 1%;</code> dans le fichier <strong>assets/css/style.css</strong></p>
<h2 id="largeur-des-colonnes">Largeur des colonnes</h2>
<p>Modifier la largeur en respectant la proportionnalité , fichier <strong>_includes/default.html</strong> dans les lignes suivantes</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2 sidebar hidden-xs"</span> <span class="na">style=</span><span class="s">"{% if site.sidebar_background_image %}background: url({{site.sidebar_background_image}}) no-repeat center center !important;{% endif %}"</span><span class="nt">&gt;</span>
{% include sidebar.html %}
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-10 col-sm-offset-2"</span><span class="nt">&gt;</span>
...
</code></pre></div></div>
<h2 id="haut-de-page-sur-écran-en-bas-à-droite">Haut de page (sur écran en bas à droite)</h2>
<p>Dans le fichier <strong>_includes/default.html</strong> insérer les lignes suivantes avant <code class="language-plaintext highlighter-rouge">&lt;div class="col-sm-2 sidebar hidden-xs" </code> de la modification précédente</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
<span class="c">&lt;!-- nav-menu-haut --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"nav-haut-page"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">title=</span><span class="s">"Haut de Page"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-arrow-circle-up fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
...
</code></pre></div></div>
<h2 id="modifications-autres">Modifications autres</h2>
<p>Fichier <strong>tags.html</strong><br />
Ligne 4 -&gt; <strong>title: Etiquettes</strong><br />
Ligne 29 -&gt; <strong>Billets étiquettés</strong></p>
<p>Fichier <strong>_includes/default.html</strong><br />
Ligne 73 et 87 -&gt; <strong>Etiquettes</strong> remplace Mots clés</p>
<p>Fichier <strong>categories.html</strong><br />
Ligne 3 -&gt; <strong>Catégories</strong></p>
<h1 id="champ-de-recherche">Champ de recherche</h1>
<h2 id="recherche-sur-le-site-statique-jekyll-lunrjs">Recherche sur le site statique jekyll (lunr.js)</h2>
<p><a href="http://jekyll.tips/jekyll-casts/jekyll-search-using-lunr-js/">Jekyll search using lunr.js</a></p>
<p>Pour construire la recherche, nous allons utiliser <strong>lunr.js</strong>, un moteur de recherche en texte intégral côté client.<br />
La recherche fonctionnera de la façon suivante:</p>
<ol>
<li>Envoyer le terme de recherche en tant que paramètre GET à <strong>search.html</strong>.</li>
<li><strong>search.html</strong> lit le paramètre GET et effectue la recherches via JSON qui contient les éléments concernés.</li>
<li><strong>search.html</strong> affiche une liste de résultats de recherche.</li>
</ol>
<p>Nous allons d’abord créer le fichier de recherche JavaScript <strong>/js/search.js</strong> et télécharger <strong>/js/lunr.min.js</strong> <a href="http://lunrjs.com/">lunr.js</a> .</p>
<h3 id="searchhtml">search.html</h3>
<p>Maintenant, nous devons créer <strong>/search.html</strong> avec saisie des léléments de recherche, un espace réservé pour l’affichage des résultats, une sortie JSON de tout le contenu que nous voulons rechercher</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
---
layout: search
---
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>{{ page.title }} {% if page.tagline %} <span class="nt">&lt;small&gt;</span>{{ page.tagline }}<span class="nt">&lt;/small&gt;</span>{% endif %}<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"/search.html"</span> <span class="na">method=</span><span class="s">"get"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"search-box"</span> <span class="na">name=</span><span class="s">"query"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Chercher"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"search-results"</span><span class="nt">&gt;&lt;/ul&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">store</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">{</span><span class="o">%</span> <span class="k">for</span> <span class="nx">post</span> <span class="k">in</span> <span class="nx">site</span><span class="p">.</span><span class="nx">posts</span> <span class="o">%</span><span class="p">}</span>
<span class="dl">"</span><span class="s2">{{ post.url | slugify }}</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">title</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.title | xml_escape }}</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">tag</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.tag | xml_escape }}</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">category</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.category | xml_escape }}</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">content</span><span class="dl">"</span><span class="p">:</span> <span class="p">{{</span> <span class="nx">post</span><span class="p">.</span><span class="nx">content</span> <span class="o">|</span> <span class="nx">strip_html</span> <span class="o">|</span> <span class="nx">strip_newlines</span> <span class="o">|</span> <span class="nx">jsonify</span> <span class="p">}},</span>
<span class="dl">"</span><span class="s2">url</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.url | xml_escape }}</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">{</span><span class="o">%</span> <span class="nx">unless</span> <span class="nx">forloop</span><span class="p">.</span><span class="nx">last</span> <span class="o">%</span><span class="p">},{</span><span class="o">%</span> <span class="nx">endunless</span> <span class="o">%</span><span class="p">}</span>
<span class="p">{</span><span class="o">%</span> <span class="nx">endfor</span> <span class="o">%</span><span class="p">}</span>
<span class="p">};</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/lunr.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/search.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></div>
<h3 id="searchjs">search.js</h3>
<p>Ensuite, nous devons écrire le JavaScript <strong>/js/search.js</strong> pour effectuer trois tâches:</p>
<ol>
<li>Obtenir le critère de recherche</li>
<li>Effectuer la recherche</li>
<li>Afficher les résultats</li>
</ol>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nf">displaySearchResults</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">store</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">searchResults</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">search-results</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if </span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Are there any results?</span>
<span class="kd">var</span> <span class="nx">appendString</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="k">for </span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Iterate over the results</span>
<span class="kd">var</span> <span class="nx">item</span> <span class="o">=</span> <span class="nx">store</span><span class="p">[</span><span class="nx">results</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">ref</span><span class="p">];</span>
<span class="nx">appendString</span> <span class="o">+=</span> <span class="dl">'</span><span class="s1">&lt;li&gt;&lt;a href="</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">url</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">"&gt;&lt;h3&gt;</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">title</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">&lt;/h3&gt;&lt;/a&gt;</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">appendString</span> <span class="o">+=</span> <span class="dl">'</span><span class="s1">&lt;p&gt;</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nf">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">...&lt;/p&gt;&lt;/li&gt;</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">searchResults</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">appendString</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">searchResults</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">&lt;li&gt;No results found&lt;/li&gt;</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nf">getQueryVariable</span><span class="p">(</span><span class="nx">variable</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">.</span><span class="nf">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">vars</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nf">split</span><span class="p">(</span><span class="dl">'</span><span class="s1">&amp;</span><span class="dl">'</span><span class="p">);</span>
<span class="k">for </span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">vars</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">pair</span> <span class="o">=</span> <span class="nx">vars</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nf">split</span><span class="p">(</span><span class="dl">'</span><span class="s1">=</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if </span><span class="p">(</span><span class="nx">pair</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="nx">variable</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nf">decodeURIComponent</span><span class="p">(</span><span class="nx">pair</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nf">replace</span><span class="p">(</span><span class="sr">/</span><span class="se">\+</span><span class="sr">/g</span><span class="p">,</span> <span class="dl">'</span><span class="s1">%20</span><span class="dl">'</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">searchTerm</span> <span class="o">=</span> <span class="nf">getQueryVariable</span><span class="p">(</span><span class="dl">'</span><span class="s1">query</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if </span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">search-box</span><span class="dl">'</span><span class="p">).</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">value</span><span class="dl">"</span><span class="p">,</span> <span class="nx">searchTerm</span><span class="p">);</span>
<span class="c1">// Initalize lunr with the fields it will be searching on. I've given title</span>
<span class="c1">// a boost of 10 to indicate matches on this field are more important.</span>
<span class="kd">var</span> <span class="nx">idx</span> <span class="o">=</span> <span class="nf">lunr</span><span class="p">(</span><span class="nf">function </span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">id</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">boost</span><span class="p">:</span> <span class="mi">10</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">tag</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">category</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">content</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">for </span><span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="nb">window</span><span class="p">.</span><span class="nx">store</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Add the data to lunr</span>
<span class="nx">idx</span><span class="p">.</span><span class="nf">add</span><span class="p">({</span>
<span class="dl">'</span><span class="s1">id</span><span class="dl">'</span><span class="p">:</span> <span class="nx">key</span><span class="p">,</span>
<span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">store</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">title</span><span class="p">,</span>
<span class="dl">'</span><span class="s1">tag</span><span class="dl">'</span><span class="p">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">store</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">tag</span><span class="p">,</span>
<span class="dl">'</span><span class="s1">category</span><span class="dl">'</span><span class="p">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">store</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">category</span><span class="p">,</span>
<span class="dl">'</span><span class="s1">content</span><span class="dl">'</span><span class="p">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">store</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">content</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">idx</span><span class="p">.</span><span class="nf">search</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">);</span> <span class="c1">// Get lunr to perform a search</span>
<span class="nf">displaySearchResults</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">store</span><span class="p">);</span> <span class="c1">// We'll write this in the next section</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">})();</span>
</code></pre></div></div>
<h3 id="ajouter-une-zone-de-recherche">ajouter une zone de recherche</h3>
<p>Maintenant, nous pouvons ajouter une zone de recherche partout sur notre site en ajoutant un formulaire en lien avec <strong>/search.html</strong>.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>...
<span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"/search.html"</span> <span class="na">method=</span><span class="s">"get"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"search-box"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"search-box"</span> <span class="na">name=</span><span class="s">"query"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span>
...
</code></pre></div></div>
<p>Ajouter le chemin du fichier de recherche <strong>search.html</strong> dans <strong>_config.yml</strong><br />
<code class="language-plaintext highlighter-rouge">cherche_path : search.html</code><br />
Sur <strong>Jekyll/Dbyll</strong> l’appel au formulaire de recherche se fait dans un menu déroulant (drop/down), fichier <strong>_includes/default.html</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
<span class="c">&lt;!-- Collect the nav links, forms, and other content for toggling --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"bs-example-navbar-collapse-1"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/"</span><span class="nt">&gt;</span>Accueil<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.categories_path }}"</span><span class="nt">&gt;</span>Catégories<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.tags_path }}"</span><span class="nt">&gt;</span>Mots clés<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.cherche_path }}"</span><span class="nt">&gt;</span>Rechercher<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.navbar-collapse --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="c">&lt;!-- nav-menu-dropdown --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group hidden-xs"</span> <span class="na">id=</span><span class="s">"nav-menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bars"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-home"</span><span class="nt">&gt;&lt;/i&gt;</span>Accueil<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.categories_path }}"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-folder"</span><span class="nt">&gt;&lt;/i&gt;</span>Catégories<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.tags_path }}"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-tags"</span><span class="nt">&gt;&lt;/i&gt;</span>Mots clés<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.cherche_path }}"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-search"</span><span class="nt">&gt;&lt;/i&gt;</span>Rechercher<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-arrow-up"</span><span class="nt">&gt;&lt;/i&gt;</span>Haut de Page<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
...
</code></pre></div></div>
<p>Cette technique ne se limite pas aux messages de blog, nous pourrions faire la même chose pour les collections, les fichiers de données ou même des fichiers statiques.</p>
<h3 id="option-sur-lemplacement-de-la-fonction-recherche">Option sur l’emplacement de la fonction recherche</h3>
<p>La zone de saisie est déplacée sur la bande latérale gauche qui est toujours visible</p>
<p><strong>search.html</strong> ,suppression du formulaire de recherche</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
---
layout: search
---
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>{{ page.title }} {% if page.tagline %} <span class="nt">&lt;small&gt;</span>{{ page.tagline }}<span class="nt">&lt;/small&gt;</span>{% endif %}<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"search-results"</span><span class="nt">&gt;&lt;/ul&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">store</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">{</span><span class="o">%</span> <span class="k">for</span> <span class="nx">post</span> <span class="k">in</span> <span class="nx">site</span><span class="p">.</span><span class="nx">posts</span> <span class="o">%</span><span class="p">}</span>
<span class="dl">"</span><span class="s2">{{ post.url | slugify }}</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">title</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.title | xml_escape }}</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">tag</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.tag | xml_escape }}</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">category</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.category | xml_escape }}</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">content</span><span class="dl">"</span><span class="p">:</span> <span class="p">{{</span> <span class="nx">post</span><span class="p">.</span><span class="nx">content</span> <span class="o">|</span> <span class="nx">strip_html</span> <span class="o">|</span> <span class="nx">strip_newlines</span> <span class="o">|</span> <span class="nx">jsonify</span> <span class="p">}},</span>
<span class="dl">"</span><span class="s2">url</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">{{ post.url | xml_escape }}</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">{</span><span class="o">%</span> <span class="nx">unless</span> <span class="nx">forloop</span><span class="p">.</span><span class="nx">last</span> <span class="o">%</span><span class="p">},{</span><span class="o">%</span> <span class="nx">endunless</span> <span class="o">%</span><span class="p">}</span>
<span class="p">{</span><span class="o">%</span> <span class="nx">endfor</span> <span class="o">%</span><span class="p">}</span>
<span class="p">};</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/lunr.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/search.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></div>
<p><strong>_includes/sidebar.html</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="c">&lt;!-- sidebar.html --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">"sidebar-header"</span> <span class="na">role=</span><span class="s">"banner"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"{{ site.BASE_PATH }}/images/{{ site.sidebar_logo }}"</span> <span class="na">class=</span><span class="s">"img-circle"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/"</span><span class="nt">&gt;</span>{{ site.title }}<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;/header&gt;</span>
{% if site.author.bio %}
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"bio"</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>
{{ site.author.bio }}
<span class="nt">&lt;/div&gt;</span>
{% endif %}
<span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"/search.html"</span> <span class="na">method=</span><span class="s">"get"</span> <span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Rechercher"</span> <span class="na">id=</span><span class="s">"search-box"</span> <span class="na">name=</span><span class="s">"query"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- &lt;span class="help-block"&gt;Zone de saisie pour la recherche&lt;/span&gt; --&gt;</span>
<span class="c">&lt;!-- &lt;button type="submit" class="btn btn-default"&gt;Chercher&lt;/button&gt; --&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="c">&lt;!-- sidebar.html end --&gt;</span>
</code></pre></div></div>
<p>Traduction FR dans <strong>js/search.js</strong></p>
<p>Ligne 16 : <code class="language-plaintext highlighter-rouge">searchResults.innerHTML = '&lt;li&gt;Aucun résultat trouvé&lt;/li&gt;';</code></p>
<p>On supprime <strong>Rechercher</strong> des listes déroulantes<br />
Lignes à supprimer dans le fichier <strong>_includes/default.html</strong> :</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="c">&lt;!-- nav-menu-dropdown --&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.cherche_path }}"</span><span class="nt">&gt;</span>Rechercher<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH}}/{{ site.cherche_path }}"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-search"</span><span class="nt">&gt;&lt;/i&gt;</span>Rechercher<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
</code></pre></div></div>
<p>On ajoute le formulaire de recherche pour les applications mobiles dans le fichier <strong>_includes/default.html</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default visible-xs"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Brand and toggle get grouped for better mobile display --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#bs-example-navbar-collapse-1"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle navigation<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
{% if site.author.github %}
<span class="nt">&lt;a</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle nav-link"</span> <span class="na">href=</span><span class="s">"http://github.com/{{ site.author.github }}"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-github"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
{% endif %}
{% if site.author.twitter %}
<span class="nt">&lt;a</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle nav-link"</span> <span class="na">href=</span><span class="s">"http://twitter.com/{{ site.author.twitter }}"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
{% endif %}
{% if site.author.email %}
<span class="nt">&lt;a</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle nav-link"</span> <span class="na">href=</span><span class="s">"mailto:{{ site.author.email }}"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-envelope"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
{% endif %}
<span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"/search.html"</span> <span class="na">method=</span><span class="s">"get"</span> <span class="na">class=</span><span class="s">"navbar-toggle nav-link"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Rechercher"</span> <span class="na">id=</span><span class="s">"search-box"</span> <span class="na">name=</span><span class="s">"query"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"{{ site.BASE_PATH }}/"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"{{ site.BASE_PATH }}/images/{{ site.sidebar_avatar }}"</span> <span class="na">class=</span><span class="s">"img-circle"</span> <span class="nt">/&gt;</span>
{{ site.title }}
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
[...]
</code></pre></div></div>
<h2 id="recherche-rapide-avec-fichier-json--et-lunrjs">Recherche rapide avec fichier json et lunr.js</h2>
<p><u>Actuellement</u> , à chaque recherche, il est généré des données indexées au format json qui représentent le contenu du site.Suivant le volume des données ,la durée de la génération peut être assez longue…</p>
<h3 id="fichier-wikistaticjson">Fichier wikistatic.json</h3>
<p>Pour rendre la recherche plus rapide , il faut utiliser un fichier json qui sera construit à chaque compilation.<br />
Créez un fichier <strong>/wikistatic.json</strong> à la racine de votre site Jekyll <strong>/srv/wikistatic/</strong>, et remplissez-le avec ce qui suit:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: null
---
[
{% assign count = 0 %}
{% for post in site.posts %}
{
"id": {{count}},
"title": {{ post.title | jsonify }},
"url": {{ post.url | jsonify }},
"tags": "{% for tag in post.tags %}{{ tag }}{% unless forloop.last %}, {% endunless %}{% endfor %}",
"categories": "{% for category in post.categories %}{{ category }}{% unless forloop.last %}, {% endunless %}{% endfor %}",
"content" : {{post.content | strip_html | truncatewords: 100 | jsonify }}
}
{% unless forloop.last %},{% endunless %}
{% assign count = count | plus: 1 %}
{% endfor %}
]
</code></pre></div></div>
<p>Chaque fois que vous exécutez le processus de compilation de Jekyll, Jekyll utilisera <strong>/wikistatic.json</strong> pour déterminer où chercher et ce qu’il faut saisir et il génèrera un fichier <strong>_site/wikistatic.json</strong>.</p>
<h3 id="page-html-de-recherche">Page html de recherche</h3>
<p><strong>search.html</strong> situé sous la racine <strong>/srv/wikistatic/</strong> du site statique</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: search
---
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Debian Ruby via les dépôts ou Rbenv + Jekyll (serveur statique) <span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">placeholder=</span><span class="s">"Rechercher"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">id=</span><span class="s">"search"</span> <span class="na">class=</span><span class="s">"form-control input-lg"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"results"</span> <span class="na">class=</span><span class="s">"all-posts results"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"/assets/resources/jquery/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="c">&lt;!--
&lt;script src="/js/lunr.min.js"&gt;&lt;/script&gt;
&lt;script src="/js/search.js"&gt;&lt;/script&gt;
--&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/lunr.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/searchplus.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></div>
<h3 id="analyse-json-via-lunr">Analyse json via lunr</h3>
<p>Chargement et indexation du fichier pour la recherche , fichier javascript <strong>searchplus.js</strong> dans le dossier <strong>js/</strong></p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nf">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nf">ready</span><span class="p">(</span><span class="nf">function </span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">idx</span> <span class="p">;</span>
<span class="kd">var</span> <span class="nx">nbart</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">fichier_json</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">wikistatic.json</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">//http://www.pureexample.com/jquery/get-json.html</span>
<span class="kd">function</span> <span class="nf">executerRequete</span><span class="p">(</span><span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if </span><span class="p">(</span><span class="nx">nbart</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="cm">/* set no cache */</span>
<span class="nx">$</span><span class="p">.</span><span class="nf">ajaxSetup</span><span class="p">({</span> <span class="na">cache</span><span class="p">:</span> <span class="kc">false</span> <span class="p">});</span>
<span class="nx">idx</span> <span class="o">=</span> <span class="nf">lunr</span><span class="p">(</span><span class="nf">function </span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">id</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">content</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">boost</span><span class="p">:</span> <span class="mi">10</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nf">field</span><span class="p">(</span><span class="dl">'</span><span class="s1">url</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="p">[];</span>
<span class="c1">// Get the generated search_data.json file so lunr.js can search it locally.</span>
<span class="nx">datas</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nf">getJSON</span><span class="p">(</span><span class="nx">fichier_json</span><span class="p">);</span>
<span class="c1">// Wait for the data to load and add it to lunr</span>
<span class="nx">datas</span><span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">loaded_data</span><span class="p">){</span>
<span class="nx">$</span><span class="p">.</span><span class="nf">each</span><span class="p">(</span><span class="nx">loaded_data</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">d</span><span class="p">){</span>
<span class="nx">idx</span><span class="p">.</span><span class="nf">add</span><span class="p">({</span>
<span class="na">id</span><span class="p">:</span> <span class="nx">index</span><span class="p">,</span>
<span class="na">title</span><span class="p">:</span> <span class="nx">d</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span>
<span class="na">content</span><span class="p">:</span> <span class="nx">d</span><span class="p">.</span><span class="nx">content</span><span class="p">,</span>
<span class="na">url</span><span class="p">:</span> <span class="nx">d</span><span class="p">.</span><span class="nx">url</span>
<span class="p">});</span>
<span class="nx">nbart</span><span class="o">=</span><span class="nx">nbart</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
<span class="cm">/* //stockage item du fichier
html.push("Titre : ", d.title, ", ",
"URL : ", d.url, ", ",
"Catégorie : ", d.categories, "&lt;br&gt;");
// fin */</span>
<span class="p">});</span>
<span class="cm">/* // affichage des items
$("#div381").html(html.join('')).css("background-color", "orange");
*/</span>
<span class="c1">// on lance la fonction de callback, le json est chargé et indexé pour la recherche</span>
<span class="nf">callback</span><span class="p">();</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">jqXHR</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">errorThrown</span><span class="p">){</span> <span class="cm">/* assign handler */</span>
<span class="cm">/* alert(jqXHR.responseText) */</span>
<span class="nf">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">error occurred!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">// on lance la fonction de callback avec le json déjà récupéré précédemment</span>
<span class="nf">callback</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">input#search</span><span class="dl">'</span><span class="p">).</span><span class="nf">focus</span><span class="p">();</span>
<span class="c1">// Event when the key</span>
<span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">input#search</span><span class="dl">'</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">keyup</span><span class="dl">'</span><span class="p">,</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span>
<span class="c1">//event.preventDefault();</span>
<span class="c1">//var query = $("input#search").val(); // Get the value for the text field</span>
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="nf">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nf">val</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">idx</span><span class="p">.</span><span class="nf">search</span><span class="p">(</span><span class="nx">query</span><span class="p">);</span> <span class="c1">// Get lunr to perform a search</span>
<span class="nf">display_search_results</span><span class="p">(</span><span class="nx">results</span><span class="p">);</span> <span class="c1">// Hand the results off to be displayed</span>
<span class="p">});</span>
<span class="cm">/* fonction affichage des résultats */</span>
<span class="kd">function</span> <span class="nf">display_search_results</span><span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$search_results</span> <span class="o">=</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#results</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// Wait for data to load</span>
<span class="nx">datas</span><span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">loaded_data</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Are there any results?</span>
<span class="k">if </span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$search_results</span><span class="p">.</span><span class="nf">empty</span><span class="p">();</span> <span class="c1">// Clear any old results</span>
<span class="c1">// Iterate over the results</span>
<span class="nx">results</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">item</span> <span class="o">=</span> <span class="nx">loaded_data</span><span class="p">[</span><span class="nx">result</span><span class="p">.</span><span class="nx">ref</span><span class="p">];</span>
<span class="cm">/*
var appendString = ';
*/</span>
<span class="c1">// Build a snippet of HTML for this result</span>
<span class="c1">//var appendString = '&lt;li&gt;&lt;a href="' + item.url + '"&gt;' + item.title + '&lt;/a&gt; ' + item.content + '&lt;/li&gt;';</span>
<span class="kd">var</span> <span class="nx">appendString</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">&lt;div class="result"&gt;&lt;div class="result-body"&gt;&lt;a href="</span><span class="dl">'</span><span class="o">+</span><span class="nx">item</span><span class="p">.</span><span class="nx">url</span><span class="o">+</span><span class="dl">'</span><span class="s1">" class="post-title"&gt;</span><span class="dl">'</span><span class="o">+</span><span class="nx">item</span><span class="p">.</span><span class="nx">title</span><span class="o">+</span><span class="dl">'</span><span class="s1">&lt;/a&gt;&lt;div class="post-date small"&gt;</span><span class="dl">'</span><span class="o">+</span><span class="dl">'</span><span class="s1">&lt;/div&gt;&lt;p&gt;</span><span class="dl">'</span><span class="o">+</span><span class="nx">item</span><span class="p">.</span><span class="nx">content</span><span class="o">+</span><span class="dl">'</span><span class="s1">&lt;/p&gt;&lt;/div&gt;</span><span class="dl">'</span>
<span class="c1">// Add the snippet to the collection of results.</span>
<span class="nx">$search_results</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="nx">appendString</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">// If there are no results, let the user know.</span>
<span class="nx">$search_results</span><span class="p">.</span><span class="nf">html</span><span class="p">(</span><span class="dl">'</span><span class="s1">&lt;li&gt;Aucun élément trouvé...&lt;/li&gt;</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nf">lecture</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">//$("#nombre").html(nbart);</span>
<span class="p">}</span>
<span class="c1">// on initialise la lecture au premier élément</span>
<span class="nf">executerRequete</span><span class="p">(</span><span class="nx">lecture</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="autre-solution-de-recherche">Autre solution de recherche</h3>
<p>Recherche avec “Simple-Jekyll-Search”</p>
<ul>
<li><a href="https://christianfei.com/posts/Use-Simple-Jekyll-Search-on-your-blog-in-these-easy-steps/">https://christianfei.com/posts/Use-Simple-Jekyll-Search-on-your-blog-in-these-easy-steps/</a></li>
<li><a href="https://github.com/christian-fei/Simple-Jekyll-Search">https://github.com/christian-fei/Simple-Jekyll-Search</a></li>
</ul>
</div>
<div class="d-print-none"><footer class="article__footer"><meta itemprop="dateModified" content="2018-09-22T00:00:00+02: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>
&emsp;</div>
-->
</footer>
<div class="article__section-navigator clearfix"><div class="previous"><span>PRÉCÉDENT</span><a href="/2018/09/19/HebergerMarquesPagesFirefox-SyncServer.html">Héberger les marques pages Firefox sur serveur Debian Stretch</a></div><div class="next"><span>SUIVANT</span><a href="/2018/09/27/Complements-Firefox-Thunderbird.html">Compléments Firefox et Thunderbird</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}&nbsp;{title}</a>&nbsp;(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>
Reference in New Issue Copy Permalink