Split default.html into several templates:
default.html now consists of `navbar.html` `head.html` and `default.html`
This commit is contained in:
parent
dcdf36f4dd
commit
44697feb49
GPG Key ID:
9F2F7D8250F35146
@ -26,7 +26,7 @@
|
||||
] ./.;
|
||||
|
||||
buildPhase = ''
|
||||
hakyll-site build --verbose
|
||||
static-site-generator build --verbose
|
||||
'';
|
||||
|
||||
installPhase = ''
|
||||
|
||||
@ -55,6 +55,17 @@ config =
|
||||
--------------------------------------------------------------------------------
|
||||
-- BUILD
|
||||
|
||||
applyDefaultTemplate :: Context String -> Item String -> Compiler (Item String)
|
||||
applyDefaultTemplate ctx item = do
|
||||
head <- itemBody <$> loadAndApplyTemplate "templates/head.html" ctx item
|
||||
navbar <- itemBody <$> loadAndApplyTemplate "templates/navbar.html" ctx item
|
||||
|
||||
let ctx' = constField "head" head
|
||||
<> constField "navbar" navbar
|
||||
<> ctx
|
||||
|
||||
loadAndApplyTemplate "templates/default.html" ctx' item
|
||||
|
||||
main :: IO ()
|
||||
main = hakyllWith config $ do
|
||||
fileHashes <- preprocess (mapKeys (fromFilePath . drop 4 . toFilePath) <$> mkFileHashes "www/posts")
|
||||
@ -64,7 +75,6 @@ main = hakyllWith config $ do
|
||||
, "favicon.ico"
|
||||
, "_config.yml"
|
||||
, "images/**"
|
||||
, "js/*"
|
||||
, "fonts/*"
|
||||
]
|
||||
$ \f -> match f $ do
|
||||
@ -88,9 +98,8 @@ main = hakyllWith config $ do
|
||||
getResourceBody
|
||||
>>= replaceLogoLinks
|
||||
>>= pandocRendererCustom
|
||||
>>= loadAndApplyTemplate "templates/post.html" ctx
|
||||
>>= saveSnapshot "content"
|
||||
>>= loadAndApplyTemplate "templates/default.html" ctx
|
||||
>>= loadAndApplyTemplate "templates/blogpost.html" ctx
|
||||
>>= applyDefaultTemplate ctx
|
||||
|
||||
match "gogen/**" $ do
|
||||
let ctx =
|
||||
@ -103,8 +112,7 @@ main = hakyllWith config $ do
|
||||
compile $ do
|
||||
pandocCompilerCustom
|
||||
>>= loadAndApplyTemplate "templates/gogen.html" ctx
|
||||
>>= saveSnapshot "content"
|
||||
>>= loadAndApplyTemplate "templates/default.html" ctx
|
||||
>>= applyDefaultTemplate ctx
|
||||
|
||||
match "*debug.md" $ do
|
||||
let ctx = constField "type" "article" <> postCtx
|
||||
@ -115,14 +123,12 @@ main = hakyllWith config $ do
|
||||
getResourceBody
|
||||
>>= replaceLogoLinks
|
||||
>>= pandocRendererCustom
|
||||
>>= loadAndApplyTemplate "templates/post.html" ctx
|
||||
>>= saveSnapshot "content"
|
||||
>>= loadAndApplyTemplate "templates/default.html" ctx
|
||||
>>= loadAndApplyTemplate "templates/blogpost.html" ctx
|
||||
>>= applyDefaultTemplate ctx
|
||||
|
||||
match "index.html" $ do
|
||||
route idRoute
|
||||
compile $ do
|
||||
-- posts :: Compiler
|
||||
posts <- recentFirst =<< loadAll "posts/*"
|
||||
gogen <- loadAll "gogen/**"
|
||||
|
||||
@ -135,7 +141,7 @@ main = hakyllWith config $ do
|
||||
|
||||
getResourceBody
|
||||
>>= applyAsTemplate indexCtx
|
||||
>>= loadAndApplyTemplate "templates/default.html" indexCtx
|
||||
>>= applyDefaultTemplate indexCtx
|
||||
|
||||
match "templates/*" $
|
||||
compile templateBodyCompiler
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
;(function(w, d) {
|
||||
console.log('Hello, world!', w, d)
|
||||
})(window, document);
|
||||
56
www/js/ui.js
56
www/js/ui.js
@ -1,56 +0,0 @@
|
||||
// https://github.com/pure-css/pure/blob/master/site/static/js/ui.js
|
||||
|
||||
(function (window, document) {
|
||||
|
||||
// we fetch the elements each time because docusaurus removes the previous
|
||||
// element references on page navigation
|
||||
function getElements() {
|
||||
return {
|
||||
layout: document.getElementById('layout'),
|
||||
menu: document.getElementById('menu'),
|
||||
menuLink: document.getElementById('menuLink')
|
||||
};
|
||||
}
|
||||
|
||||
function toggleClass(element, className) {
|
||||
var classes = element.className.split(/\s+/);
|
||||
var length = classes.length;
|
||||
var i = 0;
|
||||
|
||||
for (; i < length; i++) {
|
||||
if (classes[i] === className) {
|
||||
classes.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// The className is not found
|
||||
if (length === classes.length) {
|
||||
classes.push(className);
|
||||
}
|
||||
|
||||
element.className = classes.join(' ');
|
||||
}
|
||||
|
||||
function toggleAll() {
|
||||
var active = 'active';
|
||||
var elements = getElements();
|
||||
|
||||
toggleClass(elements.layout, active);
|
||||
toggleClass(elements.menu, active);
|
||||
toggleClass(elements.menuLink, active);
|
||||
}
|
||||
|
||||
function handleEvent(e) {
|
||||
var elements = getElements();
|
||||
|
||||
if (e.target.id === elements.menuLink.id) {
|
||||
toggleAll();
|
||||
e.preventDefault();
|
||||
} else if (elements.menu.className.indexOf('active') !== -1) {
|
||||
toggleAll();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', handleEvent);
|
||||
|
||||
}(this, this.document));
|
||||
@ -1,102 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="$lang$">
|
||||
<head>
|
||||
<title>$title$</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
$if(desc)$
|
||||
<meta name="description" content="$desc$">
|
||||
$endif$
|
||||
|
||||
$if(author)$
|
||||
<meta name="author" content="$author$">
|
||||
$endif$
|
||||
|
||||
$if(keywords)$
|
||||
<meta name="keywords" content="$keywords$">
|
||||
$endif$
|
||||
|
||||
<meta property="og:site_name" content="$siteName$">
|
||||
<meta property="og:title" content="$title$">
|
||||
<meta property="og:url" content="$root$$url$">
|
||||
$if(desc)$
|
||||
<meta property="og:description" content="$desc$">
|
||||
$endif$
|
||||
|
||||
$if(image)$
|
||||
<meta property="og:image" content="$root$$image$">
|
||||
$endif$
|
||||
|
||||
$if(type)$
|
||||
<meta property="og:type" content="$type$">
|
||||
$else$
|
||||
<meta property="og:type" content="website">
|
||||
$endif$
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:site" content="$siteName$">
|
||||
<meta property="twitter:title" content="$title$">
|
||||
$if(desc)$
|
||||
<meta property="twitter:description" content="$desc$">
|
||||
$endif$
|
||||
|
||||
$if(image)$
|
||||
<meta property="twitter:image" content="$root$$image$">
|
||||
$endif$
|
||||
|
||||
<link rel="shortcut icon" href="/images/nani.svg">
|
||||
<link rel="canonical" href="$root$$url$">
|
||||
<link rel="stylesheet" href="/css/code.css" />
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
|
||||
<link rel="stylesheet" href="/css/default.css" />
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
|
||||
</head>
|
||||
$head$
|
||||
<body>
|
||||
|
||||
<div id="layout">
|
||||
<div id="menu"> <div class="pure-menu">
|
||||
<a class="pure-menu-heading" href="/">
|
||||
<img id="navbar-image" class="pure-image-responsive py-4" src="/images/header-nani.svg"/>
|
||||
</a>
|
||||
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item"><a href="/" class="pure-menu-link">Posts</a></li>
|
||||
<li class="pure-menu-item"><a href="/" class="pure-menu-link">語源</a></li>
|
||||
|
||||
<!-- <li class="pure-menu-item menu-item-divided pure-menu-selected"> -->
|
||||
<!-- <a href="#" class="pure-menu-link">Services</a> -->
|
||||
<!-- </li> -->
|
||||
<li class="pure-menu-item"><a href="#contact" class="pure-menu-link">Contact</a></li>
|
||||
<li class="pure-menu-item menu-item-divided"><a href="https://git.nani.wtf" class="pure-menu-link">Git</a></li>
|
||||
<li class="pure-menu-item"><a href="https://git.nani.wtf/h7x4/nani.wtf" class="pure-menu-link">Site source</a></li>
|
||||
<li class="pure-menu-item"><a href="public/rss.xml" class="pure-menu-link">RSS</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<!-- <div class="header"> -->
|
||||
<!-- <h1>Page Title</h1> -->
|
||||
<!-- <h2>A subtitle for your page goes here</h2> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="content"> -->
|
||||
<!-- <h2 class="content-subhead">How to use this layout</h2> -->
|
||||
<!-- <p> -->
|
||||
<!-- To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/layouts/side-menu/styles.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive. -->
|
||||
<!-- </p> -->
|
||||
</div>
|
||||
$navbar$
|
||||
</div>
|
||||
|
||||
$body$
|
||||
$-body-$
|
||||
|
||||
<script async src="/js/script.js"></script>
|
||||
<script src="/js/ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
56
www/templates/head.html
Normal file
56
www/templates/head.html
Normal file
@ -0,0 +1,56 @@
|
||||
<head>
|
||||
<title>$title$</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
$if(desc)$
|
||||
<meta name="description" content="$desc$">
|
||||
$endif-$
|
||||
|
||||
$if(author)$
|
||||
<meta name="author" content="$author$">
|
||||
$endif-$
|
||||
|
||||
$if(keywords)$
|
||||
<meta name="keywords" content="$keywords$">
|
||||
$endif-$
|
||||
|
||||
<meta property="og:site_name" content="$siteName$">
|
||||
<meta property="og:title" content="$title$">
|
||||
<meta property="og:url" content="$root$$url$">
|
||||
$if(desc)$
|
||||
<meta property="og:description" content="$desc$">
|
||||
$endif-$
|
||||
|
||||
$if(image)$
|
||||
<meta property="og:image" content="$root$$image$">
|
||||
$endif-$
|
||||
|
||||
$if(type)$
|
||||
<meta property="og:type" content="$type$">
|
||||
$else$
|
||||
<meta property="og:type" content="website">
|
||||
$endif-$
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:site" content="$siteName$">
|
||||
<meta property="twitter:title" content="$title$">
|
||||
$if(desc)$
|
||||
<meta property="twitter:description" content="$desc$">
|
||||
$endif-$
|
||||
|
||||
$if(image)$
|
||||
<meta property="twitter:image" content="$root$$image$">
|
||||
$endif-$
|
||||
|
||||
<link rel="shortcut icon" href="/images/nani.svg">
|
||||
<link rel="canonical" href="$root$$url$">
|
||||
<link rel="stylesheet" href="/css/code.css" />
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
|
||||
<link rel="stylesheet" href="/css/default.css" />
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
|
||||
</head>
|
||||
18
www/templates/navbar.html
Normal file
18
www/templates/navbar.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div id="menu"> <div class="pure-menu">
|
||||
<a class="pure-menu-heading" href="/">
|
||||
<img id="navbar-image" class="pure-image-responsive py-4" src="/images/header-nani.svg"/>
|
||||
</a>
|
||||
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item"><a href="/" class="pure-menu-link">Posts</a></li>
|
||||
<li class="pure-menu-item"><a href="/" class="pure-menu-link">語源</a></li>
|
||||
|
||||
<!-- <li class="pure-menu-item menu-item-divided pure-menu-selected"> -->
|
||||
<!-- <a href="#" class="pure-menu-link">Services</a> -->
|
||||
<!-- </li> -->
|
||||
<li class="pure-menu-item"><a href="#contact" class="pure-menu-link">Contact</a></li>
|
||||
<li class="pure-menu-item menu-item-divided"><a href="https://git.nani.wtf" class="pure-menu-link">Git</a></li>
|
||||
<li class="pure-menu-item"><a href="https://git.nani.wtf/h7x4/nani.wtf" class="pure-menu-link">Site source</a></li>
|
||||
<li class="pure-menu-item"><a href="public/rss.xml" class="pure-menu-link">RSS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user