Hugo Prose is a theme derived from the hugo-xmin theme, and inspired by Wowchemy (previously known as the Academic theme), Distill, and tufte.css. See https://prose.yihui.org for a live demo.
Please note that this project is still work-in-progress.
A Hugo theme derived from the XMin theme, and inspired by Wowchemy, Distill, and tufte.css
Home Page: https://prose.yihui.org
License: MIT License
Hugo Prose is a theme derived from the hugo-xmin theme, and inspired by Wowchemy (previously known as the Academic theme), Distill, and tufte.css. See https://prose.yihui.org for a live demo.
Please note that this project is still work-in-progress.
A lot of folks who use other themes like to be able to display projects as a portfolio (in the example site, I changed "work" to "project"). Definitely one of the best features of Academic/Wowchemy. I think you have the infrastructure to do this, but want to pin these:
https://djnavarro.github.io/hugo-calade/project/
https://academic-demo.netlify.app/#projects
https://desiree.rbind.io/project_landing/
Nice to have features:
adding a featured image to a card. Academic used the trick of having it always named featured.jpg
for example then used regex to locate that image (if you do it this way, it becomes easier to use the featured image for social sharing of that individual project page).
ability to add custom metadata as buttons per project (i.e., beyond categories and tags). I use this pretty heavily so I can better save all the relevant links for each project like: https://alison.rbind.io/project/advanced-r-markdown/ and https://share-blogdown.netlify.app/post/07-site/
Bug in action: (This is a general Markdown test document on vanilla Hugo server. I also tweaked the style a little bit to make the hovering more obvious. Not tested for Rmd or Blogdown.)
I was able to find the exact CSS code that has caused this bug:
After changing from ~
to +
in the selector, the hovering effect is now only pulling the intended footnote:
However, this CSS file seems to have been imported by some JS within this theme, and I am not very well-versed with JS. So, I am writing this issue to see if you would like to address it somehow. If there is another repo where you know the bug is coming from, please tell me and I can create an issue there as well.
Thank you very much for this beautiful theme as always.
Distill recently added this via fuse.js based on feature requests, and the new RStudio blog (a blogdown site built with a custom Hugo theme) will have it too via lunr.js.
This is very hard to add on your own, and is now a big differentiator for users to make the choice between Distill/bookdown and blogdown (one of the reasons I use the academic theme for teaching).
See:
https://github.com/rstudio/rstudio.com/pull/156/commits/026af8566fc1d3c3b6eee6d1a686f8551bec3b73
https://palant.info/2020/06/04/the-easier-way-to-use-lunr-search-with-hugo/
Hi @yihui,
I cannot offer a fix, but with any custom font I choose, the title of the cards overflows from the card itself:
It would also be nice to offer a knob to turn within each card's yaml with like position
so you can pick title on the side or on top. I am thinking of the data visualization advice to not force readers to tilt their heads 🤣
Similar to tabsets in R Markdown/bootstrap based outputs, and the xaringanExtra panelset:
https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset
This is a neat shortcode based approach, up to you whether folks use this as a module or you build it in 👍
https://github.com/rvanhorn/hugo-dynamic-tabs
used here:
https://www.nistara.net/videos/
Comes up frequently on the wishlist for blogdown users, for example: rstudio/blogdown#69
Currently it leads to a 404 page. Many organizations (BlkInData, MiR, ROpenSci ) like to have a form, and with Netlify forms there doesn't have to be a third party.
When I first started blogging, even though folks could email me, I got the nicest messages through my website contact form- it probably felt like a lower activation level for some folks to just say "thanks" and send kind words.
Thanks for awesome theme !
I just want use light mode , are there any parameters to modify?
It took me a while to realise that's because the footnotes are actually in the margins.
For team sites it is a great feature to see content authors listed on the listing pages, but for individual sites it can feel self-congratulatory to list your name over and over again. With distill, we enabled this in the _site.yml
file- author names are printed by default but you can disable this with:
---
collections:
posts:
authors_metadata: false
---
It would be great to be able to do this on a site- and per-post level, and I think relatively easy to do with Hugo.
Hey,
Just started tinkering with hugo-prose
today. I appreciate the minimalism of this theme and the fact that it's a WIP but I actually really like that, so that I can learn and make it my own.
Setting up my _index.md
I noticed that the URLs don't get highlighted, which does happen in posts, see below:
I was wondering if this is by design/choice and how to change it/fix it, rather than manually underlining the links
I haven't seen anywhere whether it is possible to disable TOC for a single article, is it?
Globally disabling the TOC I have only seen this:
But I haven't gotten it to work either
By default, Hugo uses Chroma for server-side rendering.
Using Chroma brings us some benefits aligning with this theme's purpose:
with some potential drawbacks:
Though I am aware of the parameter disable_highlight
, which can turn off highlight.js
, I would like to hear your opinion(s) about this.
Similar to bookdown::gitbook
TOC
The scroll_highlight option in toc indicates whether to enable highlighting of TOC items as you scroll the book body (by default this feature is enabled). Whenever a new header comes into the current viewport as you scroll down/up, the corresponding item in TOC on the left will be highlighted.
See also:
https://discourse.gohugo.io/t/hugo-themes-with-dynamic-toc-highlighting/10281/4
http://tscanlin.github.io/tocbot/
Trying to include a single image:
::: {.embed-right}
![mycology illustration](featured.jpg)
:::
<div class="embed-right">
![mycology illustration](featured.jpg)
</div>
{{< figure src="featured.jpg" alt="mushrooms" caption="Illustration by Beatrix Potter" >}}
If I flip on visual editor mode, <div class="embed-right">
becomes this: ::: {.embed-right}
and renders with the dots:
The figure shortcode works well but doesn't show a preview in the visual editor. It would be great to be able to write blog posts well with the visual editor.
I saw the issue: #30 ,
and found the param disable_highlight
to disable code highlight default:
params:
disable_highlight: true
But not work for me.
When I deleted this lines in foot_custom.html :
{{ if and (not .Params.disable_highlight) (in (string .Content) "</pre>") }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rstudio/markdown/inst/resources/prism-xcode.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js" defer></script>
{{ end }}
and add hugo params in config.yaml:
markup:
highlight:
codeFences: false
style: catppuccin-latte
code highlight not work, so , what should I do to use the chroma of hugo code highlight?
See: https://masalmon.eu/2019/10/02/disqus/
A big pro:
"Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers."
益辉大神好,我最近用hugo-prose主题时,如果knitr出来的表格过宽的话,会出现表格溢出的情况,影响美观,请问这个是在哪里设置,谢谢
Hi Yihui,
It would be nice to bring the timeline to this theme so users can demo their working experience or any timeline info. I built one using pure css (no dependency) in the codepen: https://codepen.io/Jienagu/pen/NWreNvJ
Welcome to use it because I don't know how to implement into RMarkdown yet. Also feel free to let me know any thoughts or feedbacks. :)
Hello,
I'm trying to start my blog using hugo-prose with github page.
So I made "blog" repository in my github, and edit "config.yaml" as follows.
Here is a problem.
If I click other tabs (Home, About, Sitemap) , they don't work and show "404 page not found" message.
Here are their local addresses.
Could you help me with this problem?
Yes, because many people use their mobile phones to look at website. Why would you deliberately choose to make their viewing experience unpleasant?
Hey @yihui, first of all, thanks so much for this theme, I am having a lot of fun and learning a lot making it my own
I am trying to add a description of sorts under "Posts" (as an example):
I see that the Posts or Work pages (from the example page) get rendered from the list.html
template but I have not been able to figure out how parameters like .IsHome
or .Title
get passed down to the renderer. In essence, I would like to have a Posts page and a Work page with a short paragraph within them. When I create an _index.md
in the posts/
folder for example a "card" gets created instead of the plain HTML default output. See below:
When I add _index.md
:
I'd like to keep the look of the default Posts page
Hi Yihui and team,
I love this theme so far! I have one suggestion about the "dangerous" vertical side title design.
But I would like to hear from you that any specific idea behind this design?
Thank you!
Similar to distill: https://pkgs.rstudio.com/distill/reference/import_post.html
As we detailed here in the book: https://bookdown.org/yihui/blogdown/templates.html#how-to
Similar to the bookdown feature in the gitbook and bs4_book output formats.
Also one of the features we were unable to add in Distill (see: rstudio/distill#163).
See it in action in the right sidebar on https://ropensci.org/blog/2020/10/13/covidpreprints/.
Also similar to a nice feature of the Airbnb knowledge repo:
Leaving this collection of links:
https://earo.me/ (source: https://github.com/earowang/earo.me)
https://alison.rbind.io/ (source: https://github.com/rbind/apreshill)
https://desiree.rbind.io/ (source: https://github.com/dcossyleon/blogdown_desiree)
Alison's other demo sites:
https://share-blogdown.netlify.app/ (source: https://github.com/apreshill/share-blogdown)
https://happy-rladies.netlify.app/ (source: https://github.com/rladies-canberra-blogdown/blankslate)
https://optimistic-lewin-13b02b.netlify.app/ (source: https://github.com/ysc2019-workshop/04-blogdown)
https://hugo-graphite.netlify.app/ (source: https://github.com/rstudio/hugo-graphite/tree/master/exampleSite)
https://kellykapowski.netlify.app/ (source: https://github.com/apreshill/kellykapowski)
See discussion here on the distill repo: rstudio/distill#220
And PR: rstudio/distill#223
Other links:
HugoBlox/hugo-blox-builder#507
https://gohugo.io/about/hugo-and-gdpr/
I create a folder about
and placed two markdown files: file1.md
and file2.md
in it. So is it possible to add a menu about
with two subitem file1
and file2
?
Where should I check to understand the underlying mechanism of menu integration in this theme?
It doesn't need to be a professional headshot, but I think including a photo of yourself is very important so that other people can recognise you when they see you in person.
Looking at the home page layout, wanted to see if you had considered using mainSections?
https://gohugo.io/functions/where/#mainsections
That way, folks could define in the config file which types of content shows up on the home page (i.e., cards may or may not be included, one could only include posts, etc).
Currently, you can set the number of cards in the config file, and the kind of content shows up in the side title. But, it isn't totally clear to a user that if you click on "post" for example, that you'll see all posts. This makes it hard for a user to use the home page to highlight while at the same time letting their readers know "hey there is more over here".
One solution is to group the content by section (perhaps using your side title but in the margin on the left?) then allowing either 1 (make card fill up single row), 2 (as you have it), or 4 (as you have it) elements per section? Then you could have a pointer after each content section group that says "see all __" like "see all posts", and "see all projects", etc.
I love this feature from the paperesque theme, where all drafts have clear diagonal lines on the listing page and the full article page.
Full article: https://themes.gohugo.io/theme/paperesque/posts/magpie/
Simple CSS in the layout file:
https://github.com/capnfabs/paperesque/blob/228903d2bad09f92d4de8a2922806fafd24d3966/layouts/_default/single.html#L1-L3
Listing page: https://themes.gohugo.io/theme/paperesque/posts/
I see this in your to do list, and want to make sure to link you to this for doing markdown render hooks: https://gohugo.io/getting-started/configuration-markup/#heading-link-example
On shorter pages, the footer floats above the bottom of the page:
Hi @yihui,
I tried to build/deploy the site via Netlify using the current minimum version 0.54.0
and ran into build errors:
https://github.com/yihui/hugo-prose/blob/master/theme.toml#L8
Here is my log:
https://app.netlify.com/sites/sharp-colden-263590/deploys/5fae99f929769000f09eba3b
I upgraded to my local Hugo version 0.71.1
and it worked, but not sure if there is anything in between that would work :)
One of the best features of the new Hugo Goldmark renderer is the ability to set the TOC start and end levels for your site:
https://gohugo.io/getting-started/configuration-markup/#table-of-contents
markup:
tableOfContents:
endLevel: 3
ordered: false
startLevel: 2
I think because the Hugo variable {{ .TableOfContents }}
isn't being used, this setting doesn't change how the TOC is displayed in the theme.
If I set the sticky menu globally, it only affects pages, it still doesn't affect the home page, or any other pages like sitemap
or the single card pages in the demo site:
params:
pageFeatures: [+sticky_menu]
To get the sticky menu to work for those pages, I had to set it individually in the _index.md
front matter. I think this is a bit confusing- can you add a global sticky menu option?
I was surprised by the default display of the site:
But I think this is because you have:
/* dark theme */
@media (prefers-color-scheme: dark) {
body {
background-color: darkslategray;
filter: invert(1);
}
img { filter: invert(1); }
.article-list { box-shadow: 0 0 8px #333; }
}
I think the site is much more aesthetically pleasing if you don't invert all the colours.
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.