Giter VIP home page Giter VIP logo

hugo-paper's Introduction

Link in bio to widgets, your online home screen. ➫ 🔗 kee.so


Paper 6.25

Demo → hugo-paper.vercel.app

A simple, clean, customizable Hugo theme.

⚡️ Fast | 👒 Customizable | 🫙 Smooth

Links

Product Hunt: producthunt.com/posts/hugo-paper-6

Hugo themes: themes.gohugo.io/hugo-paper

Overview

Options

Available options to config.toml or hugo.toml:

disqusShortname = 'YOUR_DISQUS_SHORTNAME'   # use disqus comments

[params]
  # color style
  color = 'linen'                           # linen, wheat, gray, light

  # header social icons
  twitter = 'YOUR_TWITTER_ID'               # twitter.com/YOUR_TWITTER_ID
  github = 'YOUR_GITHUB_ID'                 # github.com/YOUR_GITHUB_ID
  instagram = 'YOUR_INSTAGRAM_ID'           # instagram.com/YOUR_INSTAGRAM_ID
  linkedin = 'YOUR_LINKEDIN_ID'             # linkedin.com/in/YOUR_LINKEDIN_ID
  mastodon = 'YOUR_MASTODON_LINK'           # e.g. 'https://mastodon.instance/@xxx'
  threads = '@YOUR_THREADS_ID'              # threads.net/@YOUR_THREADS_ID
  rss = true                                # show rss icon

  # home page profile
  avatar = 'GRAVATAR_EMAIL'                 # gravatar email or image url
  name = 'YOUR_NAME'
  bio = 'YOUR_BIO'


  # misc
  disableHLJS = true                        # disable highlight.js
  disablePostNavigation = true              # disable post navigation
  monoDarkIcon = true                       # show monochrome dark mode icon
  gravatarCdn = 'GRAVATAR_CDN_LINK'         # e.g. 'https://cdn.v2ex.com/gravatar/'
  math = true                               # enable KaTeX math typesetting globally
  graphCommentId = "YOUR_GRAPH_COMMENT_ID"  # use graph comment (disqus alternative)

  # giscus
[params.giscus]
  repo = 'YOUR_GISCUS_REPO'                 # see https://giscus.app for more details
  repoId = 'YOUR_GISCUS_REPO_ID'
  category = 'YOUR__GISCUS_CATEGORY'
  categoryId = 'YOUR_GISCUS_CATEGORY_ID'
  mapping = 'pathname'
  theme = 'light'
  lang = 'zh-CN'

Available options to front matter:

comments = false                            # disable comments for a specific page
math = true                                 # enable KaTeX math typesetting for a specific page

Install

As git submodule

Inside the folder of your Hugo project, run:

git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper

Open config.toml(or hugo.toml), change theme to "paper":

theme = "paper"

For more information, please read the official guide of Hugo.

As hugo module

Add paper theme ad dependency of your site:

hugo mod init github.com/<your_user>/<your_project>

Open config.toml(or hugo.toml), remove the theme line (if present), add module section to the bottom of the file:

[module]
  [[module.imports]]
    path = "github.com/nanxiaobei/hugo-paper"

For more information, please read the official guide of Hugo.

License

MIT License (c) nanxiaobei

hugo-paper's People

Contributors

0xmehedi avatar arkrz avatar canova avatar chr4 avatar deining avatar dependabot[bot] avatar dolsup avatar ham1 avatar hamadata avatar izdwuut avatar jin-k-yang avatar koenwoortman avatar lusitaniae avatar mboultoureau avatar mdoff avatar metalblueberry avatar movch avatar muhammad-saad-01 avatar nanxiaobei avatar nilsramsperger avatar philip-khor avatar rharter avatar saiskandapgs avatar stevenjin8 avatar tarampampam avatar techwithomid avatar tyanbiao avatar vergedx avatar windbelike avatar yhippa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hugo-paper's Issues

taxonomy is not working

Today I just applied this theme to my personal website. It works well, and I love it!

I wonder whether it is possible to add taxonomy support to this theme.

Like the following screenshot, if I click on a taxonomy, say "Hugo", I cannot really screen out only the posts with "Hugo" taxonomy. Does it possible to have such function?

Thank you!

image

Posts not showing

I was trying to upgrade my blog to the newest hugo-paper and hugo versions (0.82.0) and something weird happened, the front page stopped showing my blog posts. I then tried following the hugo quick start tutorial and adding paper as the theme to check if maybe I was missing something and the same behavior happened when I activated paper:

Screen Shot 2021-03-30 at 15 53 26

The structure is identical to the one in the quick start article, just one blog post and a simple configuration file as follows:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "paper"

Screen Shot 2021-03-30 at 15 54 56

I activated another theme to check and the posts appeared:

Screen Shot 2021-03-30 at 15 55 59

Is there anything that I'm missing? Or is it related to hugo's version 0.82.0?

Menu dropdown not working

Hi, I really love this theme, awesome work 👍

I've found one issue: one mobile and tablet devices, the tapping the menu dropdown (two horizontal lines) doesn't do anything, so the menu cannot be accessed.

I tried this on the demo website, and by using the theme on my own site. Even on desktop when the browser is resized, clicking the = on the top-right does not show the menu. Like in this screenshot:

!image

add an exampleSite

exampleSite are very good reference of all the features and things possible with theme.

It will document the theme in very good way. so please add it.

Homepage: index page.

Provide the ability to change the first post (Markdown Syntax Guide)'s spot to static text.

image

Can I fork and modify this theme?

Hello,thank you for create this theme,I really love it.

Can I make some change based on this?

Just for myself,I won't publish it.

Blank page after running 'hugo server'

Showing a blank page on my local after running hugo server. No errors appear in my console nor in the command line.

Screenshot of my directory:
hugopaper

Added a config.toml with this inside

baseURL = "/"
languageCode = "en-us"
title = "ProdShip"
author = ""
theme= "hugo-paper"

Github Dependabot alerts

Dependabot couldn't find a package.json
Dependabot couldn't find a package.json.

Dependabot requires a package.json to evaluate your JavaScript dependencies. It had expected to find one at the path: /package.json.

Learn more about troubleshooting Dependabot errors.

2 highlight.js vulnerabilities found in highlight.min.js on Nov 25, 2020
Remediation
Upgrade highlight.js to version 10.4.1 or later.

Always verify the validity and compatibility of suggestions with your codebase.

反馈

您好,我在使用中发现了几个问题

  1. 文章没有目录
  2. 封面展示的时候,如果里面的内容是代码块,整个就乱掉了。image
  3. 表格样式太丑了
    image
    下面的好看很多
    image
  4. 目录需要点击两个小横杠才能打开,但是打开之后字体很大,有一种老年人的感觉。
    image
    能够支持将目录添加在第一行等的方式,毕竟第一行占用的空间也不大,而且除了这些一般也不放别的东西。
    image
    image
  5. 首页是有颜色的,点击文章进去之后一片纯白,有一种走到了别的网站的感觉。希望能够将首页的颜色顺带到文章的页面,保持网站的一体感。
  6. 归档的页面和分类的页面个人觉得没有必要和主页一样显示文章的内容。归档的页面完全可以按照时间分类,只显示标题。分类的页面也是如此,没有必要显示内容,可以节省出很多空间,显示出更多的文章。
    image

The website is not responsive on mobile

first, i really like the theme, great job!

There is horizontal scroll when viewed on mobile screen, i wish if you can fix it and make it responsive,
as many people would read on mobile.

Thanks!!

Tags linked in post can point to non-existing sites

Hi @nanxiaobei,

in the demo for your theme I noticed that the tags at the bottom of a blog post are relative to the root of a url. Since the demos are hosted in a subdirectory this means that the links are relative to www.themes.gohugo.io. Therefore you link www.themes.gohugo.io/tags/TAG instead of themes.gohugo.io/theme/hugo-paper/tags/TAG.

When linking pages and assets also make sure that your partial link doesn't start with a /. Otherwise those functions will make it relative to the root (by design).

What have you done 🙀

Can I find a backup of version 4.9 somewhere? I browsed through version history, but it keeps downloading 5.1

带有行数的代码显示效果不好

Hugo 版本: v0.54.0
hugo-paper版本:3.0 (0a22cc5)

config.toml 代码高亮配置:

PygmentsCodeFences = true
PygmentsUseClasses = true
PygmentsCodefencesGuessSyntax = true
PygmentsOptions = "linenos=table

文章中任意插入一代码块,例如:

import this

print("Hello World")

行号不能很好地展示,与代码之间有一段距离,并且和前后段落的间距也很大。

类似issue #12

效果如图:

图片

想问下是否是缺了什么配置

我看了下 config.toml 里没有 RegularPages 我加上了.但是还是报错

Building sites … ERROR 2019/08/22 13:09:38 render of "taxonomyTerm" failed: "/Users/otis.z/xiaoheiah/blog/themes/paper/layouts/_default/list.html:13:39": execute of template failed: template: _default/list.html:13:39: executing "_default/list.html" at <$pctx.RegularPages>: can't evaluate field RegularPages in type *hugolib.pageState ERROR 2019/08/22 13:09:38 render of "taxonomy" failed: "/Users/otis.z/xiaoheiah/blog/themes/paper/layouts/_default/list.html:13:39": execute of template failed: template: _default/list.html:13:39: executing "_default/list.html" at <$pctx.RegularPages>: can't evaluate field RegularPages in type *hugolib.pageState ERROR 2019/08/22 13:09:38 render of "taxonomy" failed: "/Users/otis.z/xiaoheiah/blog/themes/paper/layouts/_default/list.html:13:39": execute of template failed: template: _default/list.html:13:39: executing "_default/list.html" at <$pctx.RegularPages>: can't evaluate field RegularPages in type *hugolib.pageState ERROR 2019/08/22 13:09:38 render of "taxonomy" failed: "/Users/otis.z/xiaoheiah/blog/themes/paper/layouts/_default/list.html:13:39": execute of template failed: template: _default/list.html:13:39: executing "_default/list.html" at <$pctx.RegularPages>: can't evaluate field RegularPages in type *hugolib.pageState Total in 22 ms Error: Error building site: failed to render pages: render of "taxonomy" failed: "/Users/otis.z/xiaoheiah/blog/themes/paper/layouts/_default/list.html:13:39": execute of template failed: template: _default/list.html:13:39: executing "_default/list.html" at <$pctx.RegularPages>: can't evaluate field RegularPages in type *hugolib.pageState

[Feature request] Full menu

Would it be possible to bring back the old full menu? Ideally by setting some opt-in flag in the site config.

I personally do not like looking at sites with hamburger menu on my 27" 4K display where there is a lot of free space for the menu.

Dark theme not applied if browser prefers dark themes

In setBodyClass() in header.html, the preferred color scheme check seems to be inverted:

function setBodyClass() {
        if (window.matchMedia("(prefers-color-scheme: dark)").matches || now > sunrise && now < sunset) return;
        document.body.classList.add('dark');
}

If the browser prefers a dark theme, it will return without enabling the dark theme.

I have no experience with media queries, but from some basic testing, I think my theory is correct.

Open Graph tags and Twitter cards

I am new to Hugo and I am having problems adding the og tags and twitter cards for this theme. Can you please tell how these can be implemented.

不显示文章

只能提交hugo new xxx.md第一级别的文章

但是,不能 new post/xxx

而且,界面也不对

图片

Image not loaded cause of instantClick

Hello,

I discovered you're theme on the Hugo store and just fall in love with it. It's so clean and simple, just wow 👏

However, I experiment curious behavior with the instantSearch feature.

Scenario to reproduce:

  • Given that I'm on the home page
  • And I click on a post
  • Then the post images aren't displayed (see screenshot below)

image

However, when I disable JS (or I reload the post page), everything works fine.

Let me add that I use the $ hugo serve -D for development purpose :)

Thanks.

Highlight.js is not compatible with Hugo.

Hi there!

I have noticed that while highlight.js runs on the site, a code snippet with line numbers (linenos parameter set to table) enabled gets displayed wrong. The library doesn't come with line numbering feature thus I think that it's not fully compatible with Hugo and it shouldn't be used with it. Related themes simply don't come with required CSS rules.

Here's a related PR with my suggested changes.

Steps to reproduce:

  1. Create a Hugo site using hugo-paper theme.
  2. Write the following post in markdown:
{{< highlight python "linenos=table" >}}
var = 2
if var is 2:
    print("Hello world!")
{{< / highlight >}}
  1. Code snippets with line numbers enabled should display incorrectly. It also messes with the shortcode without params:

preview

Tested browsers:

  • Firefox Developer Edition 63.0b9 (64-bit)
  • Chrome Version 69.0.3497.100 (Official Build) (64-bit)
  • Microsoft Edge 40.15063.674.0

Is it possible to pin post to the top of the webpage

Hi!

First of all thanks for this theme! It's really straightforward and good looking 👍

I have a question though, is it possible (or how to make it possible) to pin some post to the top of the site? So I can e.g. write my biography and pin it, so it is at the top of the page (like "Create a New Theme" in your demo).

Thanks for help!

本地正常,Github不正常

你好,我在本地预览的时候一切正常,但是push到Github上以后就好像没有用到CSS样式一样了,这个会是什么原因呢?
image

RSS Feed Mine Type Incorrect

Hello,

I recently started using Hugo Paper and enjoy the theme very much.

I've found a small issue with the mime-type encoding for RSS feeds.
Paper encodes the "+" as an entity, which breaks some RSS readers.

type="application/rss&#43;xml"

I believe this should be:

type="application/rss+xml"

I'm using the latest version of Hugo Paper (c1fe22e) and hugo v0.88.1+extended.

Demo site as an example

Hello Mr Lee, it would be very useful if you could put your hugo-paper demo site in the theme repository as an example site. I opened the issue even though this is a request as I am not sure how else to contact you in this Hugo theme context.

how to set pre code white-space:pre at ios safari

  1. how to set pre code white-space:pre at ios safari, 如何设置在ios移动端代码块不换行, 空格和换行符仍然保存.
  2. 对比图片, pc和ios
    img345

365

3.

.post-content code {
margin-left: 4px;
margin-right: 4px;
padding: 4px 6px;
font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
font-size: 0.95em;
line-height: 1.5;
background: var(--code-bg);
border-radius: 2px;
white-space: pre;
}
.post-content pre code {
display: block;
margin-left: 0;
margin-right: 0;
padding: var(--gap);
color: rgba(255, 255, 255, 0.8);
/background: transparent;/
background: rgba(40, 44, 52, 1);
border-radius: 0;
white-space: pre;
}

How does dark mode work

Hi,

how exactly does dark mode work? I am wondering, because switching appearance on a mac does not seem to have an effect on the website (on other sites I can switch betweeen dark/light and the site changes accordingly immediately). Is it triggered by something else? Best

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.