amazingrise / hugo-theme-diary

Moments piled up. A Hugo theme ported from SumiMakito/hexo-theme-Journal.

Hugo Theme Diary

My Blog with ✨Theme Diary✨ - Intro Video - Progress - Wiki

隻言片語・於此匯聚

Moments piled up.

A Hugo theme ported from SumiMakito/hexo-theme-Journal.

Features

Features of this theme

• Customizable: Easy to customize with detailed project wiki.
• Adaptive: Mobile-friendly & widescreen-friendly.
• Abundant: 3rd. service intergration (Gitalk, LiveRe, Disqus, Waline, Twikoo, Google Search, Analytics... ).
• Convenient: Table of Contents with scroll spy.
• Professional: LaTeX support (disabled by default).
• Graceful: Dark mode (automatic or manual switch).
• International: English, Chinese (CHS/CHT), French, German, Portuguese(Brazil) support.
• ...

For details, please visit project wiki.

Features in new version

CHANGELOG

1.3.0:

• Removed jQuery and other redundant scripts.
• Some improvements on performance.

Quick Start

Click to expand

If your website is using Git as version control, please do as follows:

1. Fetch the theme dir.

From the root of your Hugo site, open the terminal and execute:

git submodule add https://github.com/AmazingRise/hugo-theme-diary.git themes/diary

2. Update git repository.

Then update the git repository from the root of your site:

git submodule update --remote --merge

3. Run example site.

From the root of themes/diary/exampleSite:

hugo server --themesDir ../..

Personalization

Example config

See /exampleSite/config.toml

Customization

• Wiki Home
• Configurations
  • Internationalization(i18n)
  • Sidebar
  • Favicon
  • Table Of Contents
  • Enable/Disable Comment
• 3rd. party services
  • Comment Services
  • Google Analytics
  • Google Site Verification
  • Google Search Intergration
• Writing
  • Meta Data
  • LaTeX Support
  • RSS Feed
  • Inserting Figures
• Styling
  • Color Scheme
  • Code Highlight
  • Font Family
  • Reading Time
  • Dark Mode
• Troubleshooting

Screenshots

Index Page

Post

Dark Mode

Mobile View

hugo-theme-diary's Issues

featured_image not support url

By default, the prefix is added, causing the image to fail to load,such as

https://***.github.io/https:/i.loli.net/***31adba33653.jpg

Shouldn't last modified be at top of the page?

I'm looking at it from a UX perspective. Last modified is more relevant to me before reading an article rather than after. I think it should be at the top of the page with the other post metadata. What do you think?

About Page

Can you add an about page? It will be a good enhancement.
And how to Put a logo Beside title of the page.

运行hugo server 报错

新建项目，已经将本主题下载至themes/diary目录下，根据exampleSite中的config.toml配置指定好了主题。
运行hugo server报错：
Building sites … ERROR 2020/03/08 21:39:56 Transformation failed: TOCSS: failed to transform "scss/journal.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Built in 18 ms
Error: Error building site: logged 1 error(s)

Hugo Version : Hugo Static Site Generator v0.66.0-DEV darwin/amd64 BuildDate: unknown

Error with running theme

Describe the bug
I set my config at the root directory as theme = "diary". When I run hugo server, it throws the error below.

To Reproduce

$ hugo server
Building sites … ERROR 2020/04/14 22:32:30 TOCSS: failed to transform "scss/dark-mode.scss" (text/x-scss): resource "scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941" not found in file cache
Built in 32 ms
Error: Error building site: TOCSS: failed to transform "scss/journal.scss" (text/x-scss): resource "scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941" not found 
in file cache

Expected behavior
The website should run properly.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment
Your Hugo version, generated from hugo version.

I downgraded my hugo version from v0.69.0 to v0.68.3:

Hugo Static Site Generator v0.68.3-157669A0 windows/amd64 BuildDate: 2020-03-24T12:04:36Z
Chrome Version 80.0.3987.163 (Official Build) (64-bit)

Additional context
Add any other context about the problem here.

文章TOC目录过长时无法显示全

文章TOC目录过长超出屏幕高度时无法显示完全，超出时能否增加滚动条

Adding a FAQ page with questions and answer in Drop down menu

I want to add a new page (not a post) for Faqs where I will put questions and answer like the drop-down style. For this what should I do? I mean I have added a FAQ in menu bar. So when I will click on faq I want to redirect to faq page(where I only want drop-down faqs and no menu in left side).

Summary of problem:

1. how to create a web page(not a blog post) where I need drop-down style using markdown.
2. where to create i mean in which directory and how to add URL.
   3)how to hide side menu while getting into one web page.

huog version v0.69.1-17661DEB windows/64 bit

About page

Hi,
Beautiful theme. Thanks for creating it.
I have a feature request. Can you please add a 'About' section with a static landing page?
Examples: https://themes.gohugo.io//theme/hyde-hyde/about/
https://themes.gohugo.io/theme/hugo-coder/about/

Add reading time to each article

This is an enhancement idea. The diary can include an estimation of the amount of time required to finish an article. That would make it better.

Question about stopping markdown renderer

I regret any inconvenience caused to you, I can't find a better way to contact you so I open the issue.

I read your blog about this usage, however, I found my Hugo renderer will omit raw HTML when I practised it.

like this fragment:

I am wondering how you do it, made the renderer output raw HTML directly.

I would be very grateful for your support.

Archive page not listing any posts

Describe the bug
I've enabled Archive section in the sidebar using instructions in this doc: https://github.com/AmazingRise/hugo-theme-diary/wiki/Taxonomies-and-Sections-(Archive,-Categories-and-Tags)#archive-page but when navigate to the url, i get following page

This is a brand new project I'm starting so I've set up everything from scratch. Just for testing purpose, i also added about 20 notes. All other URL's (tags, categories) work fine

Expected behavior
A list of old posts should be shown

Environment
Hugo version: ugo Static Site Generator v0.74.3-DA0437B4 linux/amd64 BuildDate: 2020-07-23T16:22:34Z
Firefox 80.0.1

Thanks in advance for the help and great work on the theme!

Catalog auto scroll with content

Describe the bug
目录只能显示第一页，不能跟随文章自动下滑，只能手动
To Reproduce
当标题过多时
Screenshots

Dark mode 没有在文章的 list 中生效

Dark mode 没有在文章的 list 中生效
即使开启dark mode，文章中的列表的文字还是按light mode显示的（即文字还是黑色）

案例链接
作者的博客中的一篇文章

Pagination is not shown in mobile mode

Changing color scheme

Describe the bug
Modifying $color-accent: per the documentation on the wiki seems to have no effect. I've done full rebuilds and no had no luck.

To Reproduce
Always reproducible.

Expected behavior
Colour scheme to change

Environment
Hugo Static Site Generator v0.67.1 linux/amd64 BuildDate: 2020-03-16T08:10:43Z

Additional context
Excellent theme by the way

How to use the home page as an about page

How do I use the home page as an about page and not a list of posts? (I'm using /blog for posts)

allow for nested menues, feature request

hi rise,

thanks a lot for this hugo theme, its great!

i am currently prepairing a website with cooking-recipies for (self) quarantined people because of the covid-19 pandemic, and i will use your theme to do so.

would it be possible to allow for nesting in the main menue?

so this would be possible:

• home
• recipies
  • categories
  • ingredients
• rss-feed

thank a lot in advance,
bernhard

problem when deploying on netlify or render

I tried to deploy the website on Netlify and Render, but it seems that it just shows the html files out. I cannot figure out why, can you help fix it out? And I am wondering that you could write a doc about the installation and deployment.

1. When I use hugo server to generate the website on my computer, it looks well (through localhost:1313).
2. My hugo version is 0.69.0, and I set the hugo version on Netlify to 0.69.0 too. I also tried previous version of hugo but it still doesn't work in Netlify.
3. My OS is win10 while the Netlify's OS is ubuntu 16.04.

Disqus comments section not displayed

Describe the bug
The Disqus comment section is not being displayed when disqusShortname is set.

To Reproduce
Add disqusShortname to the root of your config.toml as per the docs and then create a new post.

Expected behavior
The Disqus comments section should appear.

Environment
Hugo Static Site Generator v0.71.1/extended linux/amd64 BuildDate: 2020-05-25T13:06:06Z
Google Chrome Version 83.0.4103.61 (Official Build) (64-bit)

Additional context
I've put disqusShortname under [params] as a workaround.

[params]
    disqusShortname = "xxxxx"

ToC Auto Collapsing doesn't work on some ToC structure

Describe the bug
Hi, thanks for your theme😀! and for the issue : my blog is writted in the format of Markdown, but the ToC is empty. Just shows "-CATALOG-", and nothing else.

Environment
Hugo Static Site Generator v0.73.0/extended windows/amd64
browser: chorme latest version

Font and size cahnges

I want to change the size of fonts in archive /tag and category pages. I mean I want to show more blogs links in a fixed screen by that.

主题评论设置

我想用Valine来做评论，但是主题默认的是Gitalk 怎么按照https://github.com/AmazingRise/hugo-theme-diary/wiki/Comment-Area 进行修改配置了。主题文章就没评论了。
https://blog.chenmingmao.com

blog里面修改图片大小

请问如何在blog markdown文件中修改添加的图片大小？比如宽度和长度都变为1/2。
谢谢

Automatic enabling of dark mode

Describe the bug
The instructions on the Wiki for automatically enabling dark mode don't seem to work wiki link

To Reproduce
Always reproducible

Expected behavior
The file journey.js to exist.
I've found the same section in journal.html however amending this doesn't seem to have any effect.

        // From https://www.jdeal.cn/archives/Dark.html
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        if (night==""){
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                this.toggleDarkMode();
            }
        }else{
            // If night is not empty
            if (night=="1") {
                this.toggleDarkMode();
            }
        }

Environment
Hugo Static Site Generator v0.67.1 linux/amd64 BuildDate: 2020-03-16T08:10:43Z

Additional context
It would be great to have this as a parameter in the toml configuration. Let me know if you need anything else.

Add in-site search

能否添加搜索功能，搜索文章？

Long-line in source code block cause js error

Describe the bug
long-line in source code block will case js error and page not loading

console error:

TypeError: Cannot read property 'offsetHeight' of undefined
    at hn.pageHeadHeight ((index):427)
    at hn.handleScroll ((index):408)
    at hn.mounted ((index):472)
    at _t (vue.min.js:6)
    at hn.$mount (vue.min.js:6)
    at hn.$mount (vue.min.js:6)
    at hn._init (vue.min.js:6)
    at new hn (vue.min.js:6)
    at (index):388

To Reproduce
put this to any post.md

 {{< highlight plaintext "hl_lines=3 " >}}
 elasticsearch_1  | {"type": "server", "timestamp": "2020-05-26T02:27:46,322Z", "level": "INFO", "component": "o.e.c.s.ClusterApplierService", "cluster.name": "docker-cluster", "node.name": "es02.host.fqdn", "message": "master node changed {previous [], current [{es01.host.fqdn}{ofLOlsGZT_OgBfJVyr1I0Q}{2vdYT2RGT92uqH4v8S3duQ}{ip.ad.dr.es}{ip.ad.dr.es:9320}{dilm}{ml.machine_memory=201400594432, ml.max_open_jobs=20, xpack.installed=true}]}, added {{es01.host.fqdn}{ofLOlsGZT_OgBfJVyr1I0Q}{2vdYT2RGT92uqH4v8S3duQ}{ip.ad.dr.es}{ip.ad.dr.es:9320}{dilm}{ml.machine_memory=201400594432, ml.max_open_jobs=20, xpack.installed=true}}, term: 4, version: 80, reason: ApplyCommitRequest{term=4, version=80, sourceNode={es01.host.fqdn}{ofLOlsGZT_OgBfJVyr1I0Q}{2vdYT2RGT92uqH4v8S3duQ}{ip.ad.dr.es}{ip.ad.dr.es:9320}{dilm}{ml.machine_memory=201400594432, ml.max_open_jobs=20, xpack.installed=true}}" }
 {{< /highlight >}}

Environment
Hugo Static Site Generator v0.70.0/extended darwin/amd64 BuildDate: unknown
Chrome

Unable to set up disqus

Describe the bug
Unable to set up disqus for my posts.

To Reproduce
I have added disqusShortname = "jenlky" to the config.toml. Neither did I set the frontmatter comment = false.

It exists in comment.html too:

{{ if .Site.Params.disqusShortname }}
<div class="post-comment-wrapper">
  {{ template "_internal/disqus.html" . }}
</div>
{{ end }}

Expected behavior
By right, disqus should appear below all the posts.

Screenshots

Environment
Your Hugo version, generated from hugo version.

I downgraded my hugo version from v0.69.0 to v0.68.3:

Hugo Static Site Generator v0.68.3-157669A0 windows/amd64 BuildDate: 2020-03-24T12:04:36Z
Chrome Version 80.0.3987.163 (Official Build) (64-bit)

Additional context

markdown table is not rendered.

| id  | name |
| --- | ---- |
| 1   |  xxx |
| 2   |  xxx |

shortcode for images

Hi Rise, is it possible to create a custom hugo shortcode for images so that you can do the following:

1. resize
2. align
3. add caption

Maybe something like https://themes.gohugo.io//theme/cupper-hugo-theme/cupper-shortcodes/#figurecupper

Js加载错误

也许是我我不太熟悉hugo的原因生成出来的静态文件 直接打开静态文件均不加载JS 导致github pages 无法正确展示
能否给予我一些帮助/也可能是一个bug？

Pagination icons do not render in safari

Describe the bug

When using safari on Mac pagination buttons do not show. Cannot see all posts since you can't page down. The buttons are there, you can still click in the space that they should be and it works.

To Reproduce
visit site on safari

Expected behavior
I expect to see the pagination controls

Environment
Your Hugo version, generated from hugo version.
Hugo Static Site Generator v0.69.0-4205844B/extended darwin/amd64 BuildDate: 2020-04-10T09:15:13ZAnd your browser's basic information.

Additional context
Add any other context about the problem here.

valine留言了为什么看不见呢？

我开始以为是我自己的leancloud相关的Key没有设置对，但是我在大佬您的左手的世界网站下面文章留言后也看不见评论呢？

Enhacement add aFAQ page

I want to add a faq page where questions and answers are put like the drop-down style.

Generated links javascript are wrong

Describe the bug
When deploying with a custom domain, some reference-links have a double forward slash, rendering them useless.

For example:
<script src="https://myexample.be//js/loadCSS.js"></script>

In the templates, this link is defined as <script src="{{.Site.BaseURL}}/js/loadCSS.js"></script> in the head.html.

Setting my baseUrl in the toml find without ending slash has no effect

To Reproduce
Deploy it with a custom domain name.
Get 404's because some scripts won't load

Expected behavior
The resulting link should be correct (no double slashes)

Screenshots
If applicable, add screenshots to help explain your problem.

Environment
Your Hugo version, generated from hugo version.
0.71

增加站點圖像

希望能將站點圖像功能加入todo

task list (check list) is not rendered properly

- [X] task1
- [ ] task2 

Archive page not showing any posts

Describe the bug
I've enabled Archive section in the sidebar using instructions in this doc: https://github.com/AmazingRise/hugo-theme-diary/wiki/Taxonomies-and-Sections-(Archive,-Categories-and-Tags)#archive-page but when navigate to the url, i get following page

This is a brand new project I'm starting so I've set up everything from scratch. Just for testing purpose, i also added about 20 notes. All other URL's (tags, categories) work fine

Expected behavior
A list of old posts should be shown

Environment
Hugo version: ugo Static Site Generator v0.74.3-DA0437B4 linux/amd64 BuildDate: 2020-07-23T16:22:34Z
Firefox 80.0.1

Thanks in advance for the help and great work on the theme!

image margin

在使用 markdown 原生的写法时若上下空一行，则生成的文章中图片和文字上下会有间隔，但是使用 html 格式，则生成的文章中图片下方和文字缺少间隔，不够美观。

编写如下

你好你好你好你好你好你好你好你好你好你好。你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。

![AragakiYui](https://i.loli.net/2020/08/06/YwFuaOm9n3zADvX.png)

你好你好你好你你好你好。你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。

<img src="https://i.loli.net/2020/08/06/YwFuaOm9n3zADvX.png"/>

你好你好你好你好你好你好你好你好你好你好你好你好你好。你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。

生成文章如下

由于个人文章经常会用到规定图片高度或者居中，所有希望能够解决 html 情况下的bug

Question about adding custom footer

First of, I wanted to say thank you for such a great theme. I'm trying to change my current setup of Jekyll + Minima to Hugo + diary. One tiny thing I'm struggling with is that previously I was able to add a custom layout with a footer on all the pages that are blog posts.

I was able to add a custom footer but only after creating a partial in my own repo and using it in dairy's _default/single.html

I'm not sure that's the best way to do that, or if there's an out-of-the-box way to do that with diary/hugo. Do you have any suggestions? Preferably I don't want to maintain my own layouts but instead use the one that comes with diary.

Vue reference error

Describe the bug
Vue throws a reference error when the template syntax {{ }} is used in a post, and the page doesn't render properly (i.e blank page).

To Reproduce
Create a post and add {{ helloWorld }}.

Expected behavior
{{ helloWorld }} should be treated like any other text and the page should be rendered properly.

Screenshots

Environment
Hugo Static Site Generator v0.71.1/extended linux/amd64 BuildDate: 2020-05-25T13:06:06Z
Google Chrome Version 83.0.4103.61 (Official Build) (64-bit)

Categories and tags are not displayed.

你好，我非常喜欢这个主题，感谢你做的移植工作。但是我在配置过程中遇到一个问题，就是分类页和标签页没有东西显示。我看了你的文档，分类确实只用了一个值，没有用括号括起来，但还是空白，请问如何解决？

blog归档

建议增加blog按年来归档功能，不知道是不是有？

Tags and Categories pages

Hi,Rise
不知道你有没有计划美化一下标签页和分类页
现在这样显示一行文字，
如果标签分类很多的话感觉不是特别好看，而且很难找到想要的

[Feature request] more optional meta tags

It would be nice to have some more meta-tags available for better discoverability with other websites.

For example:

• optional manifest.json file
• optional og:*** tags (see https://ogp.me/)
• optional twitter:*** meta tags (see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started)
• ...

featured_image does not work with page resources

When featured_image refers to a page resource, the template does not account for it and the link it creates is wrong.

To reproduce it, add an image as a page resource and refer to it as a featured_image in the page's parameters. It should link to this image in the page and in the list, but it doesn't because the link that is generated is an absolute link that does not account for the page url.

I made a pull request #33 that fixes that while also keeping the previous behavior when it is not a page resource.

Valine 1.4.6+ is not rendered

Dear all,
Since Valine updated to 1.4.6, this theme cannot render Valine comment service.
Now I've pushed a new version, making Valine stay at 1.4.5. If you are using Valine and also sufferring this issue, please update your theme to the latest version.
If you are not using Valine, you will not be influenced.

致用户：
自从Valine更新到1.4.6，本主题已经不能正常渲染Valine评论区。
现在我再次上传了一个新版本，在这个新版本里，Valine的版本被固定在1.4.5。如果你也在用Valine，并且遇到了这个问题，请把你的主题更新到最新版本。
如果你没有用Valine，那么你将不会受到此次Valine更新带来的影响。

In the next version, this theme will be enabled to use the latest version of Valine. You can subscribe to this issue to get latest information on this.
在下一个版本，我将会让主题能够使用最新的Valine。如果想要获取最新进展，你可以subscribe这个issue。

Sorry for this.
为此造成的不便本人在此道歉。

仅显示主页，不显示任何文章内容

我仅git clone 了您的theme，然后将文件夹重命名为diary，并且在hugo 的配置文件中设置theme 为diary
然后构建站点，站点不显示任何文章，这样可以说明是hugo版本不兼容吗？因为我是vercel构建的，不清楚vercel上hugo的版本是否>0.59

Some contents conflict with Vue template grammer

Thank for your excellent theme!

Describe the bug

One of my posts contains some strings like "You can format the output string by using docker ps -f {{ .ID }}", and after starting hugo server, this page will be empty, and the console in developer tools of Chrome will report error. The screenshot is displayed below.

我的一篇文章里包含了一些用"{{"和"}}"包裹的字符，但是当我运行hugo server后，发现该文章的网页打开之后是一片空白，Chrome的开发者工具中也报了错，错误截图在下面贴出。

After debugging, I think this bug is caused by the Vue template grammer since it uses "{{ }}" as the delimiter too, which will conflict with my post's content.

经过调试，我认为这个Bug是由Vue的模板语法引起的，它会将Markdown文件内的"{{ xx }}"当做模板来处理，进而导致了Bug的产生。

I fix this bug in my project by adding an option to new Vue statement in journal.js:

我在自己的项目中做了如下的修改，修复了这个Bug，在journal.js文件中：

app = new Vue({
    el: '#app',
    delimiters: ['${{{{{{{{', ']}'],
    data: {
        scrollY: 0,
        navOpacity: 0,
        isDrawerOpen: false,
        mounted: false,
    },
    // ...

And everything works well.

然后一切都正常了。

To Reproduce

One can modify the exampleSite's content, add some strings like "{{ .XX }}". Then run the hugo server.

你可以修改exampleSite中的任意一篇文章，添加一些"{{ xx }}"类的内容，从而复现该问题。

Expected behavior

Screenshots

Environment

Hugo Static Site Generator v0.64.0/extended windows/amd64 BuildDate: unknown

And I also tried higer version, the bug still exists.

我使用的Hugo版本如上，在调试过程中，我也使用了更高版本的Hugo，但是问题依旧。

Additional context

hexo generate 生成的demo 是不可用的 index內容均為空

❯ hexo generate
INFO Start processing
INFO Files loaded in 102 ms
WARN No layout: 2019/12/16/hello-world/index.html
WARN No layout: archives/index.html
WARN No layout: archives/2019/index.html
WARN No layout: archives/2019/12/index.html
WARN No layout: index.html
INFO Generated: atom.xml
INFO Generated: index.html
INFO Generated: CNAME
INFO Generated: archives/index.html
INFO Generated: scss/journal.scss
INFO Generated: archives/2019/12/index.html
INFO Generated: archives/2019/index.html
INFO Generated: js/journal.js
INFO Generated: js/loadCSS.js
INFO Generated: css/journal.css
INFO Generated: 2019/12/16/hello-world/index.html
INFO 11 files generated in 35 ms

发现主题在面对文章内含有一段特殊代码时会崩溃

你好，我发现当我在文章里面写了

{{- if .Site.Params.valine}}
{{ partial "valine.html" . }}
{{- end }}

这样一段以后，运行hugo server进行预览时发现网页崩溃。chrome控制台显示
其它不包含这段代码块的网页显示都很正常。