mirror of https://github.com/lxndrblz/anatole.git
README.md
@@ -20,6 +20,7 @@ - Google Analytics (optional) - Comments powered by Disqus (optional) - Katex support (optional) - Formspree Contact Form (optional) - Twitter Cards support - MIT License - Fontawesome 5.15.1 icons @@ -114,6 +115,14 @@ doNotLoadAnimations = true # Animations are loaded by default ``` ### Have a static page as a home page If you prefer having a static page as your home page rather than a listing of the latest posts, then make sure you leave the `mainSections` parameter blank: ```toml [params] mainSections = [] ``` Put any content into the `_index.md` file located in the content directory. If you want, you can also have some static text and the posts below. In such case, simply keep the `mainSections = ["post"]` and put any static content in the `_index.md`. ### Multilingual support Anatole supports multilingual page setups. All you need to do is to add the languages to your 'config.toml'. For each Language you can set the custom options like title or description. It's important to include a `LanguageName`, as it will be displayed in the main menu. @@ -192,6 +201,7 @@ To use Google Site Verification, add the following line to the `[params]`: ```toml [params] googleSiteVerify = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" ``` @@ -205,7 +215,13 @@ enable = false # options: true, false. Enable math support globally, default: false. You can always enable math on per page. use = "katex" # options: "katex", "mathjax". default is "katex". ``` ### Formspree Contact Form on the Contact page Step 1: Configure the `contactFormAction` in the `config.toml` ```toml [params] #contactFormAction = "https://formspree.io/f/your-form-hash-here" ``` Step 2: Activate the `contact: true` or `contact=true` in the frontmatter of a page. See the `exampleSite/content/contact.html` as an example. ### Twitter Cards support In order to use the full functionality of Twitter cards, you will have to define a couple of settings in the `config.toml` and the frontmatter of a page. assets/css/markupHighlight.css
New file @@ -0,0 +1,215 @@ :root { /* Light -> monokailight */ --chr-def-color: #272822; --chr-def-bg-color: #fafafa; --chr-err-color: #960050; --chr-err-bg-color: #960050; --chr-hl-bg-color: #ffffcc; --chr-lnt-color: #7f7f7f; --chr-ln-color: #7f7f7f; --chr-k-color: #00a8c8; --chr-kc-color: #00a8c8; --chr-kd-color: #00a8c8; --chr-kn-color: #f92672; --chr-kp-color: #00a8c8; --chr-kr-color: #00a8c8; --chr-kt-color: #00a8c8; --chr-n-color: #111111; --chr-na-color: #75af00; --chr-nb-color: #111111; --chr-bp-color: #111111; --chr-nc-color: #75af00; --chr-no-color: #00a8c8; --chr-nd-color: #75af00; --chr-ni-color: #111111; --chr-ne-color: #75af00; --chr-nf-color: #75af00; --chr-fm-color: #111111; --chr-nl-color: #111111; --chr-nn-color: #111111; --chr-nx-color: #75af00; --chr-py-color: #111111; --chr-nt-color: #f92672; --chr-nv-color: #111111; --chr-vc-color: #111111; --chr-vg-color: #111111; --chr-vi-color: #111111; --chr-vm-color: #111111; --chr-l-color: #ae81ff; --chr-ld-color: #d88200; --chr-s-color: #d88200; --chr-sa-color: #d88200; --chr-sb-color: #d88200; --chr-sc-color: #d88200; --chr-dl-color: #d88200; --chr-sd-color: #d88200; --chr-s2-color: #d88200; --chr-se-color: #8045ff; --chr-sh-color: #d88200; --chr-si-color: #d88200; --chr-sx-color: #d88200; --chr-sr-color: #d88200; --chr-s1-color: #d88200; --chr-ss-color: #d88200; --chr-m-color: #ae81ff; --chr-mb-color: #ae81ff; --chr-mf-color: #ae81ff; --chr-mh-color: #ae81ff; --chr-mi-color: #ae81ff; --chr-il-color: #ae81ff; --chr-mo-color: #ae81ff; --chr-o-color: #f92672; --chr-ow-color: #f92672; --chr-p-color: #111111; --chr-c-color: #75715e; --chr-ch-color: #75715e; --chr-cm-color: #75715e; --chr-c1-color: #75715e; --chr-cs-color: #75715e; --chr-cp-color: #75715e; --chr-cpf-color: #75715e; } html[data-theme='dark'] { /* Dark -> monokai */ --chr-def-color: #f8f8f2; --chr-def-bg-color: #272822; --chr-err-color: #960050; --chr-err-bg-color: #1e0010; --chr-hl-bg-color: #ffffcc; --chr-lnt-color: #7f7f7f; --chr-ln-color: #7f7f7f; --chr-k-color: #66d9ef; --chr-kc-color: #66d9ef; --chr-kd-color: #66d9ef; --chr-kn-color: #f92672; --chr-kp-color: #66d9ef; --chr-kr-color: #66d9ef; --chr-kt-color: #66d9ef; --chr-na-color: #a6e22e; --chr-nc-color: #a6e22e; --chr-no-color: #66d9ef; --chr-nd-color: #a6e22e; --chr-ne-color: #a6e22e; --chr-nf-color: #a6e22e; --chr-nx-color: #a6e22e; --chr-nt-color: #f92672; --chr-l-color: #ae81ff; --chr-ld-color: #e6db74; --chr-s-color: #e6db74; --chr-sa-color: #e6db74; --chr-sb-color: #e6db74; --chr-sc-color: #e6db74; --chr-dl-color: #e6db74; --chr-sd-color: #e6db74; --chr-s2-color: #e6db74; --chr-se-color: #ae81ff; --chr-sh-color: #e6db74; --chr-si-color: #e6db74; --chr-sx-color: #e6db74; --chr-sr-color: #e6db74; --chr-s1-color: #e6db74; --chr-ss-color: #e6db74; --chr-m-color: #ae81ff; --chr-mb-color: #ae81ff; --chr-mf-color: #ae81ff; --chr-mh-color: #ae81ff; --chr-mi-color: #ae81ff; --chr-il-color: #ae81ff; --chr-mo-color: #ae81ff; --chr-o-color: #f92672; --chr-ow-color: #f92672; --chr-c-color: #75715e; --chr-ch-color: #75715e; --chr-cm-color: #75715e; --chr-c1-color: #75715e; --chr-cs-color: #75715e; --chr-cp-color: #75715e; --chr-cpf-color: #75715e; --chr-gd-color: #f92672; --chr-gi-color: #a6e22e; --chr-gu-color: #75715e; } /* Background */ .chroma { color: var(--chr-def-color); background-color: var(--chr-def-bg-color) } /* Other */ .chroma .x { } /* Error */ .chroma .err { color: var(--chr-err-color); background-color: var(--chr-err-bg-color) } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: var(--chr-hl-bg-color) } /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chr-lnt-color) } /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chr-ln-color) } /* Keyword */ .chroma .k { color: var(--chr-k-color) } /* KeywordConstant */ .chroma .kc { color: var(--chr-kc-color) } /* KeywordDeclaration */ .chroma .kd { color: var(--chr-kd-color) } /* KeywordNamespace */ .chroma .kn { color: var(--chr-kn-color) } /* KeywordPseudo */ .chroma .kp { color: var(--chr-kp-color) } /* KeywordReserved */ .chroma .kr { color: var(--chr-kr-color) } /* KeywordType */ .chroma .kt { color: var(--chr-kt-color) } /* Name */ .chroma .n { color: var(--chr-n-color) } /* NameAttribute */ .chroma .na { color: var(--chr-na-color) } /* NameBuiltin */ .chroma .nb { color: var(--chr-nb-color) } /* NameBuiltinPseudo */ .chroma .bp { color: var(--chr-bp-color) } /* NameClass */ .chroma .nc { color: var(--chr-nc-color) } /* NameConstant */ .chroma .no { color: var(--chr-no-color) } /* NameDecorator */ .chroma .nd { color: var(--chr-nd-color) } /* NameEntity */ .chroma .ni { color: var(--chr-ni-color) } /* NameException */ .chroma .ne { color: var(--chr-ne-color) } /* NameFunction */ .chroma .nf { color: var(--chr-nf-color) } /* NameFunctionMagic */ .chroma .fm { color: var(--chr-fm-color) } /* NameLabel */ .chroma .nl { color: var(--chr-nl-color) } /* NameNamespace */ .chroma .nn { color: var(--chr-nn-color) } /* NameOther */ .chroma .nx { color: var(--chr-nx-color) } /* NameProperty */ .chroma .py { color: var(--chr-py-color) } /* NameTag */ .chroma .nt { color: var(--chr-nt-color) } /* NameVariable */ .chroma .nv { color: var(--chr-nv-color) } /* NameVariableClass */ .chroma .vc { color: var(--chr-vc-color) } /* NameVariableGlobal */ .chroma .vg { color: var(--chr-vg-color) } /* NameVariableInstance */ .chroma .vi { color: var(--chr-vi-color) } /* NameVariableMagic */ .chroma .vm { color: var(--chr-vm-color) } /* Literal */ .chroma .l { color: var(--chr-l-color) } /* LiteralDate */ .chroma .ld { color: var(--chr-ld-color) } /* LiteralString */ .chroma .s { color: var(--chr-s-color) } /* LiteralStringAffix */ .chroma .sa { color: var(--chr-sa-color) } /* LiteralStringBacktick */ .chroma .sb { color: var(--chr-sb-color) } /* LiteralStringChar */ .chroma .sc { color: var(--chr-sc-color) } /* LiteralStringDelimiter */ .chroma .dl { color: var(--chr-dl-color) } /* LiteralStringDoc */ .chroma .sd { color: var(--chr-sd-color) } /* LiteralStringDouble */ .chroma .s2 { color: var(--chr-s2-color) } /* LiteralStringEscape */ .chroma .se { color: var(--chr-se-color) } /* LiteralStringHeredoc */ .chroma .sh { color: var(--chr-sh-color) } /* LiteralStringInterpol */ .chroma .si { color: var(--chr-si-color) } /* LiteralStringOther */ .chroma .sx { color: var(--chr-sx-color) } /* LiteralStringRegex */ .chroma .sr { color: var(--chr-sr-color) } /* LiteralStringSingle */ .chroma .s1 { color: var(--chr-s1-color) } /* LiteralStringSymbol */ .chroma .ss { color: var(--chr-ss-color) } /* LiteralNumber */ .chroma .m { color: var(--chr-m-color) } /* LiteralNumberBin */ .chroma .mb { color: var(--chr-mb-color) } /* LiteralNumberFloat */ .chroma .mf { color: var(--chr-mf-color) } /* LiteralNumberHex */ .chroma .mh { color: var(--chr-mh-color) } /* LiteralNumberInteger */ .chroma .mi { color: var(--chr-mi-color) } /* LiteralNumberIntegerLong */ .chroma .il { color: var(--chr-il-color) } /* LiteralNumberOct */ .chroma .mo { color: var(--chr-mo-color) } /* Operator */ .chroma .o { color: var(--chr-o-color) } /* OperatorWord */ .chroma .ow { color: var(--chr-ow-color) } /* Punctuation */ .chroma .p { color: var(--chr-p-color) } /* Comment */ .chroma .c { color: var(--chr-c-color) } /* CommentHashbang */ .chroma .ch { color: var(--chr-ch-color) } /* CommentMultiline */ .chroma .cm { color: var(--chr-cm-color) } /* CommentSingle */ .chroma .c1 { color: var(--chr-c1-color) } /* CommentSpecial */ .chroma .cs { color: var(--chr-cs-color) } /* CommentPreproc */ .chroma .cp { color: var(--chr-cp-color) } /* CommentPreprocFile */ .chroma .cpf { color: var(--chr-cpf-color) } /* Generic */ .chroma .g { } /* GenericDeleted */ .chroma .gd { } /* GenericEmph */ .chroma .ge { font-style: italic } /* GenericError */ .chroma .gr { } /* GenericHeading */ .chroma .gh { } /* GenericInserted */ .chroma .gi { } /* GenericOutput */ .chroma .go { } /* GenericPrompt */ .chroma .gp { } /* GenericStrong */ .chroma .gs { font-weight: bold } /* GenericSubheading */ .chroma .gu { } /* GenericTraceback */ .chroma .gt { } /* GenericUnderline */ .chroma .gl { } /* TextWhitespace */ .chroma .w { } assets/css/style.css
@@ -7,6 +7,8 @@ --body-color: rgba(0, 0, 0, 0.7); --post-color: rgba(0, 0, 0, 0.44); --border-color: rgba(0, 0, 0, 0.15); --form-border-color: #9f9f9f; --form-button-hover-border-color: #000; --pre-bg-color: #f9f9fd; --nav-text-color: #5a5a5a; --tag-color: #424242; @@ -22,6 +24,8 @@ --body-color: rgb(169, 169, 179); --post-color: rgba(0, 0, 0, 0.44); --border-color: rgb(38, 38, 38); --form-border-color: rgb(169, 169, 179); --form-button-hover-border-color: #fff; --pre-bg-color: rgb(33, 33, 45); --nav-text-color: rgb(191, 191, 191); --tag-color: rgb(191, 191, 191); @@ -994,4 +998,75 @@ padding-left: 15%; width: 25%; } } } /* (CONTACT) FORM */ .contact-form { margin-top: 30px; } .form-style{ width: 100%; } .form-style ul { padding: 0; margin: 0; list-style: none; } .form-style ul li { display: block; margin-bottom: 10px; min-height: 35px; } .form-style ul li .field-style { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 14px; padding: 8px; outline: none; background-color: var(--bg-color); border: 1px solid var(--form-border-color); color: var(--body-color); } .form-style ul li .field-style:focus { box-shadow: 0 0 5px; border:1px solid; } .form-style ul li .field-split { width: 49%; } .form-style ul li .field-full { width: 100%; } .form-style ul li input.align-left { float:left; } .form-style ul li input.align-right { float:right; } .form-style ul li textarea { background-color: var(--bg-color); border: 1px solid var(--form-border-color); color: var(--body-color); width: 100%; height: auto; } .form-style ul li input[type="button"], .form-style ul li input[type="submit"] { background-color: var(--bg-color); border: 1px solid var(--form-border-color); display: inline-block; cursor: pointer; color: var(--body-color); text-decoration: none; width: 100%; } .form-style ul li input[type="button"]:hover, .form-style ul li input[type="submit"]:hover { background-color: var(--bg-color); border: 1px solid var(--form-button-hover-border-color); } /* (CONTACT) FORM END */ exampleSite/config.toml
@@ -13,6 +13,11 @@ # Google Analytics #googleAnalytics = "UA-123-45" # Syntax highlighting pygmentsUseClasses = true pygmentsCodeFences = true pygmentsCodefencesGuessSyntax = true [params] title = "I'm Jane Doe" author = "Jane Doe" @@ -20,12 +25,16 @@ profilePicture = "images/profile.jpg" keywords = "" favicon = "favicons/" # example ["css/custom.css"] customCss = [] customJs = [] # example ["js/custom.js"] customJs = [] mainSections = ["post"] images = ["images/site-feature-image.png"] doNotLoadAnimations = false # Google Site Verification # Form Spree Contact Form #contactFormAction = "https://formspree.io/f/your-form-hash-here" # Google Site Verify #googleSiteVerify = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" ## Math settings @@ -76,3 +85,9 @@ weight = 300 identifier = "about" url = "/about/" [[menu.main]] name = "Contact" weight = 400 identifier = "contact" url = "/contact/" exampleSite/content/_index.md
@@ -1,3 +1,24 @@ +++ author = "Hugo Authors" +++ <!-- This file is left intentionally empty by default to be backward compatible with initial theme setup. Although the theme has advanced a little bit and it now allows to specify the content on the main page (even if the list of posts/articles is not intended). This can be: - with the list of posts/articles (default: `mainSections = ["post"]) or - without the list of posts/articles (by setting `mainSections = [""]`) Markdown supported, ie: ``` # Welcome - Hugo :rocket: - Hugo theme :rocket: Don't forget to check the README.md file! ``` --> exampleSite/content/contact.md
New file @@ -0,0 +1,7 @@ --- author: Hugo Authors title: Contact date: 2019-03-08 description: Contact Page contact: true --- i18n/de.toml
@@ -19,3 +19,6 @@ [comments] other = "Kommentare" [send] other = "Senden" i18n/dk.toml
@@ -19,3 +19,6 @@ [comments] other = "kommentar" [send] other = "Sende" i18n/en.toml
@@ -19,3 +19,6 @@ [comments] other = "comments" [send] other = "Send" i18n/es.toml
@@ -19,3 +19,6 @@ [comments] other = "comentarios" [send] other = "Enviar" i18n/fa.toml
@@ -19,3 +19,6 @@ [comments] other = "نظرات" [send] other = "ارسال" i18n/fi.toml
@@ -19,3 +19,6 @@ [comments] other = "kommentit" [send] other = "Lähetä" i18n/fr.toml
@@ -19,3 +19,6 @@ [comments] other = "commentaire" [send] other = "Envoyer" i18n/it.toml
@@ -19,3 +19,6 @@ [comments] other = "commenti" [send] other = "Spedire" i18n/zh-tw.toml
@@ -19,3 +19,6 @@ [comments] other = "註解" [send] other = "發送" i18n/zh-zn.toml
@@ -19,3 +19,6 @@ [comments] other = "注释" [send] other = "发送" layouts/_default/single.html
@@ -1,7 +1,6 @@ {{ define "main" }} <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}"> <div class="post-content"> <div class="post-title"> <h3>{{ .Title }}</h3> {{ if eq .Type "post"}} @@ -15,6 +14,11 @@ </div> {{ .Content }} {{- if (eq .Params.contact true) -}} {{- partial "contact.html" . -}} {{- end -}} </div> <div class="post-footer"> <div class="info"> layouts/index.html
@@ -1,6 +1,18 @@ {{ define "main" }} <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}"> <!-- (Optional) Home -- on top of `mainSections` content (aka posts) ; -- as declared in content/_index.md One can set `mainSections = [""]` and have the content/_index.md specified here --> {{ .Content }} </div> {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }} {{ range $paginator.Pages }} <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}"> <div class="post-title"> <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a> layouts/partials/contact.html
New file @@ -0,0 +1,19 @@ <div class="contact-form"> <form class="form-style" method="POST" action="{{ .Site.Params.contactFormAction }}" data-toggle="validator"> <ul> <li> <input class="field-style field-full" type="text" name="username" id="username" placeholder="Name" required> </li> <li> <input class="field-style field-full" type="email" id="email" name="email" placeholder="Email" required> </li> <li> <textarea class="field-style" name="message" id="message" rows="6" placeholder="{{ i18n "message" }}"></textarea> </li> <li> <input class="field-style" type="submit" value="{{ i18n "send" }}"></input> </li> </ul> </form> </div> layouts/partials/head.html
@@ -17,6 +17,12 @@ integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" type="text/css"> {{ $markupHighlightStyle := resources.Get "css/markupHighlight.css" | resources.Minify | resources.Fingerprint }} <link rel="stylesheet" href="{{ $markupHighlightStyle.Permalink }}" integrity="{{ $markupHighlightStyle.Data.Integrity }}" crossorigin="anonymous" type="text/css"> {{- $css := "" -}} {{- range .Site.Params.customCss -}} {{ $css := resources.Get . | fingerprint }}
