Yes, because many people use their mobile phones to look at website. Why would you deliberately choose to make their viewing experience unpleasant?

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 🤣

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.

By default, Hugo uses Chroma for server-side rendering.

Using Chroma brings us some benefits aligning with this theme's purpose:

• Superior client-side performance
• Elimination of an external JS dependency

with some potential drawbacks:

• Fewer color styles (however one could customize the CSS)
• Fewer supported languages
• May break the habits of bookdown (Not quite sure about this because I only skimmed bookdown's docs)

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.

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

用户已经看到脚注了，没必要移动脚注，而且脚注长达超出屏幕了。

把这段css的宽度改为 1281px 可以避免这个问题。

@media (min-width: 1280px) {
  .note-ref:hover + .side {
    display: inline-block;
    background-color: #f8f8f8;
    position: absolute;
    margin-left: 1em;
    padding: .5em;
    box-sizing: content-box;
  }
}

I believe this is a known issue with Firefox and the position: sticky CSS selector, but the experience of scrolling through a post with the sticky TOC is pretty jumpy.

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?

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:

luizdepra/hugo-coder#59

https://djnavarro.github.io/hugo-calade/project/

https://academic-demo.netlify.app/#projects

https://desiree.rbind.io/project_landing/

https://maya.rbind.io/shiny/

Nice to have features:

1. 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).

2. 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/

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 :)

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

Looking at the home page layout, wanted to see if you had considered using mainSections?

https://gohugo.io/functions/where/#mainsections

gohugoio/hugo#3206

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).

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:

https://prose.yihui.org/card/projects/

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.

https://www.netlify.com/blog/2018/07/24/hugo-tips-how-to-create-author-pages/

It took me a while to realise that's because the footnotes are actually in the margins.

Example like this:

The reason is the blockquote has style:

padding: 3px 1em 3px;

Because of this, attr position could not move right.

As it can be seen, the TOC influence to view the content below. So, just move it to the original place when screen is narrow.

益辉大神好，我最近用hugo-prose主题时，如果knitr出来的表格过宽的话，会出现表格溢出的情况，影响美观，请问这个是在哪里设置，谢谢

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.

• baseurl: "https://haaforever.github.io/blog/"
• publishDir: "docs"

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.

• http://127.0.0.1:4321/blog/blog/
• http://127.0.0.1:4321/blog/blog/about/
• http://127.0.0.1:4321/blog/blog/sitemap/

Could you help me with this problem?

A resolution of 300*800 appears like this.

On my mobile screen, it appears to have extra whitespace that can scroll to the right.

If anyone knows what's the issue that would be great, otherwise I'll dig a bit deeper into the CSS when I get some time.

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 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?

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)

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.

Thanks for awesome theme !
I just want use light mode , are there any parameters to modify?

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.

Hey, I am trying to override some XMin stylesheet parameters such as the padding-left of article:

I have tried including:

.article {
   padding-left: 5%;
}

but it doesn't override the xmin stylesheet

I've tried removing .numbered here but it doesn't work, see diff:

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.

How my personal site is set up:

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/

CSS again:
https://github.com/capnfabs/paperesque/blob/228903d2bad09f92d4de8a2922806fafd24d3966/layouts/_default/list.html#L7-L19

https://prose.yihui.org/tags/

When I in this page, Search function is not available

Similar to distill: https://pkgs.rstudio.com/distill/reference/import_post.html

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.

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:

default page:

When I add _index.md:

I'd like to keep the look of the default Posts page

See: https://masalmon.eu/2019/10/02/disqus/

https://utteranc.es/

A big pro:

"Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers."

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.

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/

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:

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,

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. :)

Hi Yihui and team,

I love this theme so far! I have one suggestion about the "dangerous" vertical side title design.

1. It forces users to have a certain length of content for each block. If the content is too short, the title will be cut off (see screenshot), if too long, it is not perfectly central aligned.
2. If the vertical subtitle is too long but the content is short, we might also need to consider the text wrapping which might cause some padding issues.
3. Aesthetically speaking, vertical title or subtitle mixed with content is not an efficient design.

But I would like to hear from you that any specific idea behind this design?

Thank you!

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

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/