cntrump / hugo-notepadium Goto Github PK
View Code? Open in Web Editor NEWa fast gohugo theme, 100% JavaScript-free.
Home Page: https://examplesite.lvv.me/
License: MIT License
a fast gohugo theme, 100% JavaScript-free.
Home Page: https://examplesite.lvv.me/
License: MIT License
Hugo Version: v0.60.1
I can't see the 'Categories' and 'Tags' right side of header after running server. I've checked documentation and mentions though.
I haven't modified 'showCategories' and 'showTags'. I just let them 'true' values.
Hugo Version: v0.62.1-A1518704
Build Command: hugo
Hey how could I go about doing this? Love the theme, but I'm no web dev - I couldn't figure this one out. Thanks
The theme's not including the custom contents of a root content/_index.md file. It's just ignoring it altogether.
(usual disclaimer: I might be wrong myself)
ERROR 2019/12/21 19:47:00 Failed to get JSON resource "https://api.instagram.com/oembed/
a nice vscode theme: https://github.com/atomiks/moonlight-vscode-theme
@media (prefers-color-scheme: dark) {
body {
background-color: #222436;
}
body,
.site.name,
.note.title,
.note.content,
.article.markdown-body,
.image-container .title {
color: #c8d3f5;
}
mark {
background-color: #3c4361;
}
.site.slogan .title,
.note.date,
.article.date,
.footer {
color: #828bb8;
}
code,
kbd,
tt,
samp {
color: #f7a4ec;
}
a {
color: #82aaff;
}
.pagination ul li a {
color: #82aaff;
}
.pagination ul li a.active {
background-color: #82aaff;
}
.pagination ul li a:hover:not(.active) {
background-color: rgba(130, 170, 255, .5);
}
.tag {
color: #fc7b7b;
}
.category {
color: #ffc777;
}
.note.list .item a:hover,
.nav.item:hover,
.article.tag:hover,
.article.category:hover {
background-color: #3c4361;
}
/* border color */
pre,
.note.imgs .img,
.image-container .img,
.article.markdown-body table td,
.article.markdown-body table th,
.article.markdown-body .lntable {
border-color: rgba(116, 198, 241, 0.15);
}
.article.markdown-body h1,
.article.markdown-body h2,
.image-container .title,
.site.slogan .title,
.note.list .item {
border-bottom-color: rgba(116, 198, 241, 0.15);
}
.article.discussion {
border-top-color: rgba(116, 198, 241, 0.15);
border-bottom-color: rgba(116, 198, 241, 0.15);
}
.article.markdown-body .lntable tr>:first-child {
border-right-color: rgba(116, 198, 241, 0.15);
}
}
Right now, it's hardcoded ISO style.
It would be nice if there were a way to configure this from params without having to override the partial.
I'm imagining that it might be desirable to have the full text of your articles on a single page, like https://daringfireball.net. Would it be technically challenging to make that a configurable option?
Is there a straightforward way to inject CSS to override the default theme? I'm trying to change some minor details (font color and background in dark mode, for example) and don't see a way to do that short of overriding the style.html partial.
I was hoping that there would be something like this: https://discourse.gohugo.io/t/how-to-override-css-classes-with-hugo/3033/4
It would be really nice to have a "last updated" option for pages derived from .Lastmod
when using --enableGitInfo
.
Hugo Version: 0.63.8
Build Command: hugo service
Error message:
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:12:8: executing "main" at <partial "article-share.html" .>: error calling partial: "/path/of/my/project/themes/hugo-notepadium/layouts/partials/article-share.html:1:11": execute of template failed: template: partials/article-share.html:1:11: executing "partials/article-share.html" at <len .Site.Params.share.addThisId>: error calling len: len of untyped nil
I guess this is because I don't have params.share.addThisId
in my config, and I just checked the code.
It makes more sense to me if the condition set like this in hugo-notepadium/layouts/partials/article-share.html
:
{{- if or (eq .Params.share true) (and (ne .Params.share false) (eq site.Params.share.enable true)) -}}
{{- if gt (len .Site.Params.share.addThisId) 0 -}}
<div class="article share addthis_inline_share_toolbox"></div>
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid={{- .Site.Params.share.addThisId -}}" async></script>
{{- end -}}
{{- end -}}
Currently, I just set params.share.addThisId
an empty string to avoid this issues. Hope this can fix soon before others noticed it.
I was wondering if we could have a link on every page that links to the page as written in other languages.
I'm slowly learning Hugo, I know I have to create a layout for this or a partial but I don't know where to put it. I found this code:
{{- if .IsTranslated -}}
<nav class="LangNav">
{{- range .Translations -}}
<a href="{{ .Permalink }}">{{- .Language.LanguageName -}}</a>
{{ end }}
</nav>
{{- end -}}
I want to have a link in the navbar to allow someone to contact me. For example, in config.yaml:
nav:
showCategories: true
showTags: true
custom:
- title: About
url: /about
- title: GitHub
url: https://github.com/Benjamin-Lee
- title: Email
url: mailto:[email protected]
The rendered HTML is linking to /mailto:[email protected]
rather than mailto:[email protected]
, which yields a 404.
The new header-right partial is a wonderful addition. In fact, I think it can replace the current nav, especially since it has the advantage of being displayed on every page:
What do you think @cntrump?
Create a navigation-items.html
at your site root: ./layouts/partials/
Add custom <a>
link items
<a class="nav-item" href="{{- `/pages/about/` | relURL -}}"><span class="iconfont icon-aboutus"></span> About</a>
<a class="nav-item" href="https://github.com/cntrump" target="_blank"><span class="iconfont icon-logo_github"></span> Github</a>
class nav-item
is theme builtin style, you can create custom CSS style replace it.
iconfont
, icon-*
are my custom icon font.
If you have custom CSS (icon font, custom color, font size ...)
iconfont.css
at site root: ./assets/css/
iconfont.css
@font-face {font-family: "iconfont";
src: url('/fonts/iconfont/iconfont.eot?t=1577922877079'); /* IE9 */
src: url('/fonts/iconfont/iconfont.eot?t=1577922877079#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQsAAsAAAAACEgAAAPfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEKINqATYCJAMMCwgABCAFhG0HPxs5B8iemjxBhNlgNgBQBfkIhEVQjZU9u/sAqADle7akEBVFGJRRrBSSsSkfdil/85+b/hAq4qmZAHWJ4OGFUBE7oVMTOE3Ebm2XC1mkDWGTvOyPe1UzFuDHrGfJdpljcigXwHCAAjTG7NggBW5BCuRdDmdehUfXeQL1hoWAlvNKKoGhgkwLxCWPaAOGKbNSUxtqheqStUU8Anpq0wPGHcBD//fjr6gwJKnKyNz1i1wUZPzw+FgPD/8f1uiigGQ8J8RNZMwACnFQ6t4Ch+kZsHpdzawvrVaENFbs/398saGtXuk/XiKqEXUj4CeMyUlJbAbBr3oRaJz/JqpRg+cA+A/4zkS16LOiDWZmy22z1VotQ0ZqdDpkrurpU2S48skTR+/sE0Iafkqa05FGtO/bOBuntLdXKlUqO8XJ46cdVAqF3FZ+I8a2egRSKiHovsoBUigAeCavmVXGak5dWYmcNWvP7qBkpZUNY++5VQVVP9E67Ntlu2u73dGz4OJT/9WrHdCB1esPBys3hY9crbo+l6u7DvZusN150G0ZxYq9TpXDCv/F7aN9X/3k7YqVebGQnh6E5VV2iHEi7J5ulmeZ56Eg27O72zGWHUruweruYSOlXnqbI0umEwSC+Gk1FniO6Xg1CECRkMIkfFECy9aNox0fR8MXf9MTly882tbxZzENjTodaak5DsCt90a5RqeG/b6Gu34H2R+OnqJ/r3W/x63sEIPsPajH3l/onkqPfSDuLqTZ/WEmHPpeB1b2zNJy7PSXWBXh488AqxpGl9UcZn8jPMQcqCkgLRhvMgPEnWKnz3GGxU1BzQATvluxH4d5s87C7fpvMRO++wOkYV4M6BssLFA4AlApH4fj/ez5Vi7623/jX8UL3xaLlH+GCvgeXZ4KwUoFtPMCte/CE/xbScuWYsiIJRdNbIutSHbt/zkTIJTsKtjf7nl/bVfrakKtrhiSGkOQ1RpBF/wMVGkwC9VqzUG9afmbG3SgwKLUYcoEgtBqPyTNvkDW6i664J9BlW7foFprwFBvI2z2bDAWPONsCmujMRRp70F4HaQYZzbaOKgtxwiZsI1KynxyNUZJeTEkMiwim8vHxBg1xgJpJxFF0ziCU6QIyUOXYUIhiUgoko910GFcmpYkhYfjZV8U1kGKgLElFEwbGgaFaNcDwdOBJIa7nWnGuZ8vhyHICLWhaprq/NUwFCle74hIYSJaoPPV4lZN1/ISqU6EKDQaDoGjkEQQeciJEdI0CSEpH8WH6UALw+2RlEgSjtvhbdVh82tFz7cL6pFH5kiRo6g5bidltExqIiQJsoXg0VxZOwAA') format('woff2'),
url('/fonts/iconfont/iconfont.woff?t=1577922877079') format('woff'),
url('/fonts/iconfont/iconfont.ttf?t=1577922877079') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('/fonts/iconfont/iconfont.svg?t=1577922877079#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-aboutus:before {
content: "\e61f";
}
.icon-logo_github:before {
content: "\e85a";
}
Edit config.toml
[params.assets]
css = ["css/fonts.css", "css/iconfont.css"]
I have added to the partials folder a new file - favicon.html
- containing the html output of https://realfavicongenerator.net/?cse#.Xh4kaS2ca-Z //
once that is done - favicon.html will look something like:
{{- $favicon := . -}}
<link rel=....
then added the favicon package from the generator to the static folder, in my case I did:
.
└── static
└── favicon
└── files
then I added {{- partial "favicon.html" . -}}
to head.html
et voila'
worth adding it to the template? (also not sure my implementation is the best)
Thanks!
你好,我从官方github库里下载了模板上传,并通过netlify生成,修改代码syntax和logo,生成出错,还有想请教下,logo和favicon应该上传到哪个目录对应网站目录呢?
7:58:15 PM: ERROR 2020/01/06 11:58:15 render of "section" failed: execute of template failed: template: _default/list.html:3:4: executing "_default/list.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: partials/head.html:20:4: executing "partials/head.html" at <partial "style.html" .>: error calling partial: "/opt/build/repo/themes/hugo-notepadium/layouts/partials/style.html:49:76": execute of template failed: template: partials/style.html:49:76: executing "partials/style.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
7:58:15 PM: ERROR 2020/01/06 11:58:15 render of "taxonomy" failed: execute of template failed: template: _default/list.html:3:4: executing "_default/list.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: partials/head.html:20:4: executing "partials/head.html" at <partial "style.html" .>: error calling partial: "/opt/build/repo/themes/hugo-notepadium/layouts/partials/style.html:49:76": execute of template failed: template: partials/style.html:49:76: executing "partials/style.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
7:58:15 PM: ERROR 2020/01/06 11:58:15 render of "taxonomy" failed: execute of template failed: template: _default/list.html:3:4: executing "_default/list.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: partials/head.html:20:4: executing "partials/head.html" at <partial "style.html" .>: error calling partial: "/opt/build/repo/themes/hugo-notepadium/layouts/partials/style.html:49:76": execute of template failed: template: partials/style.html:49:76: executing "partials/style.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
7:58:15 PM: ERROR 2020/01/06 11:58:15 render of "taxonomyTerm" failed: execute of template failed: template: _default/list.html:3:4: executing "_default/list.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: partials/head.html:20:4: executing "partials/head.html" at <partial "style.html" .>: error calling partial: "/opt/build/repo/themes/hugo-notepadium/layouts/partials/style.html:49:76": execute of template failed: template: partials/style.html:49:76: executing "partials/style.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
7:58:15 PM: Total in 49 ms
7:58:15 PM: Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:3:4: executing "_default/single.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: partials/head.html:20:4: executing "partials/head.html" at <partial "style.html" .>: error calling partial: "/opt/build/repo/themes/hugo-notepadium/layouts/partials/style.html:49:76": execute of template failed: template: partials/style.html:49:76: executing "partials/style.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
7:58:15 PM: Skipping functions preparation step: no functions directory set
7:58:15 PM: Caching artifacts
7:58:15 PM: failed during stage 'building site': Build script returned non-zero exit code: 255
7:58:15 PM: Started saving pip cache
7:58:15 PM: Finished saving pip cache
7:58:15 PM: Started saving emacs cask dependencies
Hi! This is my fave Hugo theme. Would it be hard to add multi language support out of the box?
Hugo Version: 0.62
Hi.
I have found a really easy way to use Mermaid with this theme to draw flowcharts, maybe this can be included in the theme or just in the docu?
User-agent: *
Disallow: <-- Why is this line here?
Disallow: /css/
Disallow: /js/
If I understand how robots.txt correctly, this line is not necessary since "Everything not explicitly disallowed is considered fair game to retrieve."
Would you be interested in adding IndieWeb features?
https://indieweb.org/
https://indiewebify.me/
Hugo Version: Hugo Static Site Generator v0.66.0/extended darwin/amd64 BuildDate: unknown
Build Command: hugo
有些摘要太长,或者中间截一半,最好能自己控制。
Can I remove or hide "more" at the very end of the text on the site?
设置好disqusShortname还是没有评论框
I was thinking of allowing the user select their preferred theme by toggling light or dark mode - what changes should I do to make this selectable after the site has been built?
Hugo Version: v0.62.2/extended darwin/amd64
打开 https://lvv.me/tags/ 的时候,没找到 Tags
从哪里取值的。
<section class="article header"><h1>Tags</h1></section>
Hi,
how is it possible to use the DarkMode Theme?
Thanks!
Kind Regards
Hugo Version: REPLACE_WITH_YOUR_HUGO_VERSION
Build Command: REPLACE_WITH_YOUR_HUGO_BUILD_CMD
Hugo Version: Hugo Static Site Generator v0.66.0/extended darwin/amd64 BuildDate: unknown
Build Command: hugo server
404 page not found
Hugo Version: Hugo Static Site Generator v0.64.1/extended darwin/amd64 BuildDate: unknown
I have a custom JavaScript file that I want to run on a specific page. I added the following configuration to the front-matter of my post:
assets:
js:
- "js/example.js"
However, the custom-js.html
partial is looking at the global site parameters to find the custom JS:
{{- range site.Params.assets.js -}}
To get the page-specific JavaScript to work, I had to change that line to the following:
{{- range $.Param "assets.js" -}}
Is this the optimal way of doing this, or is there a better approach?
~Thanks
Hugo Version: 0.65.3
Build Command: hugo -D
在config.toml配置了defaultContentLanguage = "zh-CN"
确保了生成的静态页中<html lang="zh-CN">
但主题目录下只有i18n/zh.toml
,此时静态页的Nav标签不会显示字,也就看不见了
只有手动改这个文件名为zh-CN.toml
或者配置defaultContentLanguage = "zh"
希望这一小点改进下
Such that the user can change it to whatever they want, not just "Powered by Hugo and the Notepadium".
I'm thinking something like this:
<section id="footer" class="footer max-body-width">
{{- $copyright := .Site.Copyright -}}
{{- if not $copyright -}}
{{- $copyright = .Site.Title | safeHTML -}}
{{- end -}}
<p>{{- $copyright | safeHTML -}}</p>
<p>{{- .Site.Params.footer | safeHTML -}}</p>
</section>
{{- partial "math.html" . -}}
{{- partial "syntax.html" . -}}
{{- template "_internal/google_analytics_async.html" . -}}
Where .Site.Params.footer
defaults to
<span>Powered by </span><a href="https://gohugo.io">Hugo</a><span> and the </span><a href="https://themes.gohugo.io/hugo-notepadium/">Notepadium</a>
Hugo Version: Hugo Static Site Generator v0.62.1-A1518704
Build Command: hugo
One last question! At the bottom of my blog posts, I get a link to the previous article. Is there a way to remove this? I've attached a photo of how this link appears.
Also, is there any documentation on overriding UI elements from within hugo (specific to this theme?)
Thanks!
Hugo Version: v0.68.3/extended
Build Command: hugo
Right now the date is displayed right below the title of the page. This kind of gets in the way of the content. Is there an option to display the date of the article at the bottom of the article? Like an article footer? Thanks.
Hugo already supports this, but I get the following error:
"themes/hugo-notepadium/layouts/partials/custom-css.html:8:50": execute of template failed: template: partials/custom-css.html:8:50: executing "partials/custom-css.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-sass" and "text/css"
Hugo Version: 0.68.3
Build Command: hugo
Hello, I have been trying to use your theme, I added it to my theme folder and when i launch the server everything works perfectly... but when building it with the command hugo, i click on the public/index.html and the page is just white with text https://i.imgur.com/u5ygLRV.png
Add light.css
, dark.css
to your ./assets/css/
Edit config.toml
, add CSS path
[params.assets]
css = ["css/light.css", "css/dark.css"]
Note, dark.css
MUST at last.
Example of light.css
& dark.css
light.css
body { background-color: #f4f7ef; }
.base-body {
background-color: #fff;
padding: 8px 0;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, .15) 0 10px 30px;
}
dark.css
@media (prefers-color-scheme: dark) {
body { background-color: #222; }
.base-body {
color: #fff;
background-color: #24292e;
padding: 8px 0;
border-radius: 8px;
box-shadow: rgba(220, 220, 220, .15) 0 10px 30px;
}
}
Choose a font from Google Fonts
Open Sans
curl -O https://fonts.googleapis.com/css?family=Open+Sans&display=swap
Create a fonts.css
at yout site root: ./assets/css/fonts.css
Paste the css code from step 1
And Override the font-family
[CSS CODE FROM STEP 1]
html {
font-family: 'Averia Sans Libre', -system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, SimHei, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
Edit config.toml
[params.assets]
css = ["css/fonts.css"]
Done, run hugo server
take a look.
Hi.
Thanks for this great theme. I am really enjoying it.
It turns out I might be using the Tag function a bit excessively and now ended up with three pages on the Tag list. Given that each tag line need quite a lot of space, is there a way to show this more compact? Maybe all tags one by one comma separated like so:
Linux, OS, Ocaml, Keyboard
Same like the original list, just more compact formatting?
Idea from @JayFarei
Generate favicon:
https://realfavicongenerator.net
Create an user-side partial head-extra.html
./layouts/partials/head-extra.html
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
Hugo Version: 0.69
Build Command: hugo
I'd like to have a preview below my link when I post a link on twitter. But with hugo-notepadium, the tweet doesn't have any preview.
Here's with preview (not notepadium)
It might have something to do with the meta tags, as I search around looking for answers. But I'm not really sure.
Hugo Version: 0.64
I have changed config.toml
file by modifying logo = "/img/logo.png"
I also uploaded logo.png
to '/img/' folder. The image was 512 px to 512 px.
After rebuilding my site, the logo did not show. It only show blank square.
Hugo Version: Hugo Static Site Generator v0.66.0/extended darwin/amd64 BuildDate: unknown
Build Command: hugo
非得用这种格式:
+++
...
categories = ["abc"]
...
+++
默认的这种产生不出categories(空的category页面)
---
...
categories: ["abc"]
...
---
One thing I noticed when reading this blog post was the little picture with the description of the author at the end. It might be a good idea to add something like this to the site. I tried my hand at making a partial but got stuck trying to make it responsive. Do you have any ideas?
hugo-notepadium/assets/css/style.css
Line 633 in cc96f74
config.toml
[params.assets]
css = ["css/layout.css"]
layout.css
.note.list .item > .note,
.article.markdown-body pre,
.article.markdown-body .image-container {
margin-left: -20px;
margin-right: -20px;
}
.note.list .item > .note,
.article.markdown-body pre {
padding-left: 20px;
padding-right: 20px;
}
.article.markdown-body pre,
.article.markdown-body .image-container .img {
border: 0;
border-radius: 0;
}
@media (max-width: 375px) {
.note.list .item > .note,
.article.markdown-body pre,
.article.markdown-body .image-container {
margin-left: -15px;
margin-right: -15px;
}
.note.list .item > .note,
.article.markdown-body pre {
padding-left: 15px;
padding-right: 15px;
}
}
When I click on the C# tag, page 404 appears. How did I figure it out that the " # " symbol is specific. How is this resolved?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.