fix(css): fix some css bugs

This commit is contained in:
Dillon
2020-01-31 18:46:28 +08:00
parent 7e6236361f
commit 344f0a9f41
36 changed files with 705 additions and 429 deletions

View File

@@ -1,41 +1,64 @@
baseURL = "https://example.com/"
languageCode = "en" # website language
defaultContentLanguage = "en" # [en, zh, ...] determines which i18n file to use
title = "LoveIt Theme" # website title
theme = "LoveIt" # theme
enableGitInfo = false # whether to use git commit log to generate lastmod record
hasCJKLanguage = false # whether to include chinese/japanese/korean
paginate = 12 # default amount of posts in each pages
enableEmoji = true # whether to use emoji code
enableRobotsTXT = true # whether to use robots.txt
googleAnalytics = "" # [UA-XXXXXXXX-X] google analytics code
disqusShortname = "dillonzq" # Disqus shortname to use Disqus in posts
# website language
languageCode = "en"
# [en, zh, ...] determines which i18n file to use
defaultContentLanguage = "en"
# website title
title = "LoveIt Theme"
# theme
theme = "LoveIt"
# whether to use git commit log to generate lastmod record
enableGitInfo = false
# whether to include chinese/japanese/korean
hasCJKLanguage = false
# default amount of posts in each pages
paginate = 12
# whether to use emoji code
enableEmoji = true
# whether to use robots.txt
enableRobotsTXT = true
# [UA-XXXXXXXX-X] google analytics code
googleAnalytics = ""
# copyright description used only for seo schema
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
# copyright description used only for seo schema
#### Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
pygmentsOptions = "linenos=table"
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true
# Markup related configuration in Hugo
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
# Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
[markup.highlight]
codeFences = true
guessSyntax = true
lineNoStart = 1
lineNos = true
lineNumbersInTable = true
noClasses = false
style = "monokai"
tabWidth = 4
# Goldmark is from Hugo 0.60 the default library used for Markdown
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
# Table Of Contents settings
[markup.tableOfContents]
startLevel = 2
endLevel = 6
[author] #### Author Info
name = "XXXX"
# Author Info
[author]
name = "xxxx"
[sitemap] #### Sitemap Info
# Sitemap Info
[sitemap]
changefreq = "weekly"
filename = "sitemap.xml"
priority = 0.5
[Permalinks] #### Permalinks Info (https://gohugo.io/content-management/urls/#permalinks)
# Permalinks Info (https://gohugo.io/content-management/urls/#permalinks)
[Permalinks]
posts = ":year/:month/:filename"
[menu] #### Menu Info
# Menu Info
[menu]
[[menu.main]]
identifier = "posts"
name = "Posts"
@@ -62,41 +85,56 @@ unsafe = true
[[menu.main]]
identifier = "zh"
name = '<i class="fas fa-language fa-fw"></i>'
name = '<i class="fas fa-language fa-fw" title="简体中文"></i>'
url = "https://hugo-loveit-zh.netlify.com"
weight = 5
[params]
version = "5.x" # LoveIt theme version
description = "LoveIt Theme Demo" # site description
keywords = ["XXXX", "Theme", "Hugo"] # site keywords
# LoveIt theme version
version = "0.1.X"
# site description
description = "LoveIt Theme Demo"
# site keywords
keywords = ["Theme", "Hugo"]
#### Home Page Info
home_mode = "post" # [post, other] home mode
home_paginate = 6 # special amount of posts in each home post page
avatar = "images/avatar.png" # URL of avatar shown in home page
subtitle = "A Clean, Elegant but Advanced Hugo Theme" # subtitle shown in home page
# Home Page Info
## [post, other] home mode
home_mode = "post"
## special amount of posts in each home post page
home_paginate = 6
## URL of avatar shown in home page
avatar = "images/avatar.png"
## subtitle shown in home page
subtitle = "A Clean, Elegant but Advanced Hugo Theme"
socialShare = true # whether to show social share links in post page
# whether to show social share links in post page
socialShare = true
#### Footer CopyRight Info
since = 2018 # Site creation time
icp = '' # ICP info only in China (HTML format is allowed)
# Footer CopyRight Info
## Site creation time
since = 2018
## ICP info only in China (HTML format is allowed)
icp = ""
## license info (HTML format is allowed)
license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
# license info (HTML format is allowed)
gitRepo = "" # public git repo url to link lastmod git commit only then enableGitInfo is true
linkToMarkdown = true # whether to show link to Raw Markdown content of the post
# public git repo url to link lastmod git commit only then enableGitInfo is true
gitRepo = ""
#### site verification code for Google/Bing/Yandex/Pinterest/Baidu
# whether to show link to Raw Markdown content of the post
linkToMarkdown = true
# site verification code for Google/Bing/Yandex/Pinterest/Baidu
google_verification = ""
bing_verification = ""
yandex_verification = ""
pinterest_verification = ""
baidu_verification = ""
[params.cdn] #### CSS and JS Files CDN
fontawesome_free_css = '' # for example '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
# CSS and JS Files CDN
[params.cdn]
## for example '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">'
fontawesome_free_css = ''
animate_css = ''
gitalk_css = ''
gitalk_js = ''
@@ -116,15 +154,17 @@ unsafe = true
aplayer_js = ''
meting_js = ''
[params.gravatar] # Gravatar Info for preferred avatar in home page
# Gravatar Info for preferred avatar in home page
[params.gravatar]
email = ""
[params.social] # Social Info in home page
# Social Info in home page
[params.social]
GitHub = "xxxx"
Linkedin = "xxxx"
Twitter = "xxxx"
#Instagram = "xxxx"
#Email = "xxxx"
Email = "xxxx@outlook.com"
Facebook = "xxxx"
Telegram = "xxxx"
#Medium = "xxxx"
@@ -180,7 +220,8 @@ unsafe = true
#Thingiverse = "xxxx"
#Devto = "xxxx"
[params.share] # Social Share Links in post page
# Social Share Links in post page
[params.share]
enable = true
Twitter = true
Facebook = true
@@ -193,30 +234,40 @@ unsafe = true
#VKontakte = true
#Weibo = true
[params.publisher] # Publisher Info just for SEO
name = "XXXX"
# Publisher Info just for SEO
[params.publisher]
name = "xxxx"
[params.publisher.logo]
url = "logo.png"
width = 127
height = 40
[params.logo] # Website Log Info just for SEO
# Website Log Info just for SEO
[params.logo]
url = "logo.png"
width = 127
height = 40
[params.image] # Website Image Info just for SEO
# Website Image Info just for SEO
[params.image]
url = "cover.png"
width = 800
height = 600
[params.gitalk] # Gittalk Comment Config (https://github.com/gitalk/gitalk)
# Disqus Comment Config (https://disqus.com/)
[params.disqus]
# Disqus shortname to use Disqus in posts
shortname = ""
# Gittalk Comment Config (https://github.com/gitalk/gitalk)
[params.gitalk]
owner = ""
repo = ""
clientId = ""
clientSecret = ""
[params.valine] # Valine Comment Config (https://github.com/xCss/Valine)
# Valine Comment Config (https://github.com/xCss/Valine)
[params.valine]
enable = false
appId = ""
appKey = ""
@@ -227,30 +278,35 @@ unsafe = true
visitor = true
recordIP = true
[params.facebook] # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments)
# Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments)
[params.facebook]
enable = false
width = "100%"
numPosts = 10
appId = ""
languageCode = "en_US"
[privacy] #### Privacy Info (https://gohugo.io/about/hugo-and-gdpr/)
# Privacy Info (https://gohugo.io/about/hugo-and-gdpr/)
[privacy]
[privacy.googleAnalytics]
anonymizeIP = true
[privacy.youtube]
privacyEnhanced = true
[mediaTypes] #### Options to make hugo output .md files.
# Options to make hugo output .md files.
[mediaTypes]
[mediaTypes."text/plain"]
suffixes = ["md"]
[outputFormats.MarkDown] #### Options to make hugo output .md files.
# Options to make hugo output .md files.
[outputFormats.MarkDown]
mediaType = "text/plain"
isPlainText = true
isHTML = false
[outputs] #### Options to make hugo output .md files.
# Options to make hugo output files.
[outputs]
home = ["HTML", "RSS"]
page = ["HTML", "MarkDown"]
section = ["HTML", "RSS"]

View File

@@ -6,13 +6,13 @@ draft: false
description: "This is a LoveIt theme preview and documentation page."
show_in_homepage: true
show_description: false
license: ''
license: ""
tags: ['Hugo', 'Theme']
categories: ['Documentation']
tags: ["Hugo", "Theme"]
categories: ["Documentation"]
featured_image: ''
featured_image_preview: ''
featured_image: ""
featured_image_preview: ""
comment: true
toc: true

View File

@@ -0,0 +1,169 @@
---
author: "Hugo Authors"
title: "Markdown Syntax Guide"
date: 2020-01-30T21:57:40+08:00
lastmod: 2020-01-30T21:57:40+08:00
draft: false
description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
show_in_homepage: true
show_description: false
license: ""
tags: [
"markdown",
"css",
"html",
"themes",
]
categories: [
"themes",
"syntax",
]
featured_image: /images/markdown.png
featured_image_preview: ""
comment: true
toc: true
autoCollapseToc: true
math: false
---
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
<!--more-->
## Headings
The following HTML `<h2>``<h6>` elements represent six levels of section headings. `<h2>` is the highest section level while `<h6>` is the lowest.
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum,
voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit
peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur,
offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur,
cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea
corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum
fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate
dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer
sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is
sinveli squiatum, core et que aut hariosam ex eat.
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally
with a citation which must be within a `footer` or `cite` element, and optionally with
in-line changes such as annotations and abbreviations.
### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.
### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.</p>
> — <cite>Rob Pike[^1]</cite>
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
Name | Age
--------|------
Bob | 27
Alice | 23
### Inline Markdown within tables
| Inline&nbsp;&nbsp;&nbsp; | Markdown&nbsp;&nbsp;&nbsp; | In&nbsp;&nbsp;&nbsp; | Table |
| ---------- | --------- | ----------------- | ---------- |
| *italics* | **bold** | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code` |
## Code Blocks
### Code block with backticks
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
### Code block indented with four spaces
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
### Code block with Hugo's internal highlight shortcode
{{< highlight html >}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
{{< /highlight >}}
## List Types
### Ordered List
1. First item
2. Second item
3. Third item
### Unordered List
* List item
* Another item
* And another item
### Nested list
* Item
1. First Sub-item
2. Second Sub-item
## Other Elements — abbr, sub, sup, kbd, mark
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms,
and other small creatures.
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.

View File

@@ -1,32 +0,0 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#fff" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite" />
</path>
<circle fill="#fff" cx="36" cy="18" r="1">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB