All Projects → forecho → hugo-theme-echo

forecho / hugo-theme-echo

Licence: MIT license
A super concise theme for Hugo

Programming Languages

HTML
75241 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to hugo-theme-echo

Hugo Theme Bootstrap4 Blog
A blogging-centric Bootstrap v4 theme for the Hugo static site generator.
Stars: ✭ 191 (+92.93%)
Mutual labels:  hugo-theme
Hugo Theme Novela
Novela, the simplest way to start publishing with Hugo and Forestry.
Stars: ✭ 230 (+132.32%)
Mutual labels:  hugo-theme
restaurant-hugo
The restaurant is a creative and responsive restaurant website theme in Hugo environment. It is very well decorated theme which will make your website building easier.
Stars: ✭ 50 (-49.49%)
Mutual labels:  hugo-theme
Hugo Theme Pure
A pure theme for Hugo
Stars: ✭ 198 (+100%)
Mutual labels:  hugo-theme
Hugo Orbit Theme
Great looking resume/CV theme designed for developers.
Stars: ✭ 217 (+119.19%)
Mutual labels:  hugo-theme
distillpub
Hugo Theme for Distill
Stars: ✭ 31 (-68.69%)
Mutual labels:  hugo-theme
Hugo Serif Theme
Serif is a modern business theme for Hugo.
Stars: ✭ 168 (+69.7%)
Mutual labels:  hugo-theme
hugo-apero
Apéro is a Hugo theme for personal websites. A Hugo theme you'll want to hang out with 🌌 . This is the source for the theme files to install.
Stars: ✭ 122 (+23.23%)
Mutual labels:  hugo-theme
Hugo Future Imperfect Slim
Multilingual Blogging Theme for Hugo | Check the Wiki for Documentation
Stars: ✭ 233 (+135.35%)
Mutual labels:  hugo-theme
guides
Documentation Hugo theme Toha. https://github.com/hossainemruz/toha.
Stars: ✭ 21 (-78.79%)
Mutual labels:  hugo-theme
Bilberry Hugo Theme
Premium theme for the hugo site builder. DEMO:
Stars: ✭ 205 (+107.07%)
Mutual labels:  hugo-theme
Hugo Ink
Crisp, minimal personal website and blog theme for Hugo
Stars: ✭ 209 (+111.11%)
Mutual labels:  hugo-theme
hugo-kiera
Kiera - A Hugo Theme for writing
Stars: ✭ 61 (-38.38%)
Mutual labels:  hugo-theme
Hugo Clarity
A theme for Hugo based on VMware Clarity
Stars: ✭ 189 (+90.91%)
Mutual labels:  hugo-theme
hugo-docs
Theme for Dgraph documentation built via Hugo
Stars: ✭ 13 (-86.87%)
Mutual labels:  hugo-theme
Hugo Theme Dream
🌱 Hugo theme named Dream.
Stars: ✭ 168 (+69.7%)
Mutual labels:  hugo-theme
Hugo Eureka
Eureka is a feature-rich and highly customizable Hugo theme.
Stars: ✭ 239 (+141.41%)
Mutual labels:  hugo-theme
academia-hugo
Academia is a Hugo resume theme. You can showcase your academic resume, publications and talks using this theme.
Stars: ✭ 165 (+66.67%)
Mutual labels:  hugo-theme
hugo-theme-w3css-basic
it-gro.github.io/hugo-theme-w3css-basic.github.io/
Stars: ✭ 52 (-47.47%)
Mutual labels:  hugo-theme
hugo-artists-theme
Port of Travis Neilson's (DevTips) awesome Artists Theme to Hugo
Stars: ✭ 57 (-42.42%)
Mutual labels:  hugo-theme

hugo-theme-echo-preview

hugo-theme-echo

Echo 是一个风格简洁的 Hugo 主题。

我的博客

主要特色:

  • 风格基于 Tailwind CSS
  • 使用更快的 Chroma 代码高亮
  • 自定义 css,自定义 js,自定义 head
  • 文章支持目录
  • 支持相关阅读
  • 那年今天
  • 支持深度主题,可手动切换

谁在用 hugo-theme-echo

如何使用?

注意: 这个教程假设你 第一次 使用 HugoHugo 是一个非常流行的静态网站生成工具。 你可查看官方文档 Hugo Official Docs 获取更多帮助。

快速安装 Hugo

Hugo Releases 上直接下载安装适合你的版本。

快速创建网站

hugo new site myBlog

上面的命令将会在一个名为 myBlog 的文件夹中创建一个新的 hugo 站点。

快速使用

把这个主题克隆到 themes 文件夹

cd myBlog
git submodule add https://github.com/forecho/hugo-theme-echo.git themes/echo
cd themes/echo
npm ci # 本地开发才需要

⚠️ 在根目录添加 package.json 文件,代码如下(一些个人信息请改成你自己的):

{
    "name": "forecho-blog",
    "version": "0.0.1",
    "description": "that is forecho blog",
    "repository": "https://github.com/forecho/hugo-blog",
    "license": "MIT",
    "devDependencies": {
        "autoprefixer": "^10.2.5",
        "postcss": "^8.2.9",
        "postcss-cli": "^8.3.1",
        "tailwindcss": "^2.0.4"
    },
    "browserslist": [
        "last 1 version",
        "> 1%",
        "maintained node versions",
        "not dead"
    ]
}

站点设置示例:

baseURL = "http://localhost:1313"
languageCode = "en-us"
title = "Forecho's Blog"
theme = "echo"
DefaultContentLanguage = "cn"
# 自动检测是否包含中文/日文/韩文,该参数会影响摘要和字数统计功能,建议设置为 true
hasCJKLanguage = true
# 设置页面生成形式,将默认的网站路径/修改成.html
uglyURLs = true
googleAnalytics = ""      # UA-XXXXXXXX-X

## 评论系统
changyanAppid = "" # Changyan app id             # 畅言
changyanAppkey = "" # Changyan app key
disqusShortname = "forecho-blog" # disqus account name
livereUID = "" # LiveRe UID                  # 来必力

[markup.highlight]
codeFences = true # 高亮 markdown 的代码块
guessSyntax = true # 高亮 markdown 中没有标注语言的代码块
hl_Lines = ""
lineNoStart = 1
lineNos = true
lineNumbersInTable = true
noClasses = true
style = "manni"
tabWidth = 2

# https://gohugo.io/content-management/urls/#aliases
[permalinks]
posts = "/:filename"

[outputFormats.RSS]
mediatype = "application/rss"
baseName = "atom"

[services.rss]
limit = 20

[author]
name = "forecho"
avatar = "https://avatars0.githubusercontent.com/u/1725326?s=460&v=4"
bio = "7 年开发经验,寻求技术 Leader 工作机会。Wechat: ipzone"
homepage = "https://forecho.com/"

[params]
htmlClass = "dark" # 可选,默认是空,为 light
favicon = "https://avatars0.githubusercontent.com/u/1725326?s=460&v=4"
keywords = "Hugo, theme, echo"
description = "Hugo theme echo example site."
toc = true
navItems = [
  ["HOME", "/"],
  ["ARCHIVE", "/posts.html"],
  ["ABOUT", "/about.html"],
  ["RSS", "/atom.xml"]
]
# rss 全文输出
rssFullContent = true
uglyURLs = true
busuanzi = true # 是否使用不蒜子统计站点访问量
staticCDNPrefix = "https://cdn.bootcss.com/font-awesome/5.11.2"
extraHead = '<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxx"></script>'
postAds = ""
profileAds = '<div class="bg-white shadow"><img class=" object-cover w-auto mx-auto mt-6" src="https://blog-1251237404.cos.ap-guangzhou.myqcloud.com/20190424153337.png" alt="微信打赏"></div>'
notFoundAds = ''

# 开启版权声明,协议名字和链接都可以换
[params.cc]
name = "署名 - 非商业性使用 4.0 国际 (CC BY-NC 4.0)"
link = "https://creativecommons.org/licenses/by-nc/4.0/deed.zh"

# 文章打赏
[params.reward]
enable = true
title = "打赏"
wechat = "https://blog-1251237404.cos.ap-guangzhou.myqcloud.com/20190424153510.png" # 微信二维码
alipay = "https://blog-1251237404.cos.ap-guangzhou.myqcloud.com/20190424153431.png" # 支付宝二维码

############## 评论系统  start ##############
[params.gitment] # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
owner = "" # Your GitHub ID
repo = "" # The repo to store comments
clientId = "" # Your client ID
clientSecret = "" # Your client secret

[params.utterances] # https://utteranc.es/
owner = "" # Your GitHub ID
repo = "" # The repo to store comments
theme = "github-light"
issueterm = "pathname"

[params.gitalk] # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk
owner = "" # Your GitHub ID
repo = "" # The repo to store comments
clientId = "" # Your client ID
clientSecret = "" # Your client secret

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
[params.valine]
enable = false
appId = '你的 appId'
appKey = '你的 appKey'
notify = false # mail notifier , https://github.com/xCss/Valine/wiki
verify = false # Verification code
avatar = 'mm'
placeholder = '说点什么吧...'
visitor = false

[params.giscus] # https://giscus.app
repo = "forecho/hugo-blog" # Repo where the comments will live
repo_id = "<data-repo-id>" # Repo where the comments will live
category = "Announcements" # Repo where the comments will live
category_id = "<data-category-id>" # Repo where the comments will live
mapping = "pathname" # How Utterances will match comment to page
theme = "light" # What theme to use
reactions_enabled = "1" # Enable reactions
emit_metadata= "0" # Emit metadata
lang = "zh-CN" # Language

############ 评论系统  end ##############
## 社交链接
[social]
github = "forecho"
jsfiddle = "forecho"
codepen = "forecho"
dribbble = "forecho"
behance = "forecho"
flickr = "forecho"
instagram = "forecho"
youtube = "forecho"
vimeo = "forecho"
vine = "forecho"
medium = "forecho"
wordpress = "forecho"
tumblr = "forecho"
linkedin = "forecho"
slideshare = "forecho"
stackoverflow = "forecho"
reddit = "forecho"
pinterest = "forecho"
weibo = "forecho"
facebook = "forecho"
twitter = "caizhenghai"
douban = "ipzone"
rss = "/atom.xml"

启动 hugo server:

hugo server -D

打开 http://localhost:1313/ ,你将会看到一个示例网站。

开始你的博客

默认配置文件 config.toml 位于你的网站的根目录,请按自身需要进行定制。

默认的文章文件位于 ./content/posts 目录。

生成你的网站

直接运行 hugo ,将会自动生成你的网站到 public/ 目录。

如果你有额外的时间,并且想更多的了解 Hugo ,请查阅官方文档 Hugo Official Docs

单篇文章的设置

Front Matter : Hugo 允许你使用 yaml,toml 或者 json 语法在你每一篇文章的开头进行设置。

YAML 示例:

---
# 常用定义
title: "An Example Post"           # 标题
date: 2018-01-01T16:01:23+08:00    # 创建时间
lastmod: 2018-01-02T16:01:23+08:00 # 最后修改时间
draft: false                       # 是否是草稿?
tags: ["tag-1", "tag-2", "tag-3", "popular"]  # 标签
categories: ["index"]              # 分类
author: "forecho"                  # 作者

# 用户自定义
# 你可以选择 关闭 (false) 或者 打开 (true) 以下选项
comment: false   # 关闭评论
toc: false       # 关闭文章目录
reward: false	 # 关闭打赏
---

关于热门文章

如果标签里面含有 popular 就会自动出现再热门文章列表中,目前热门文章只会在侧边栏和 404 页面展示,热门文章列表最多展示 5 篇文章。

配合 Github Actions 自动部署

name: github pages

name: "Close stale issues"
on:
  schedule:
    - cron: '0 0 * * *'  # every day at midnight
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.82.0'
          extended: true

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '12.x'

      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm i
      - run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          cname: blog.forecho.com
          publish_dir: ./public
          user_name: "github-actions[bot]"
          user_email: "github-actions[bot]@users.noreply.github.com"

      - name: Slack Workflow Notification
        uses: Gamesight/slack-workflow-status@master
        with:
          repo_token: ${{secrets.GITHUB_TOKEN}}
          slack_webhook_url: ${{secrets.SLACK_WEBHOOK_URL}}

那年今天

效果如下:

配合 GitHub Action 每天定时编译一起使用,效果最佳。

感谢

本主题参考了以下主题的部分代码:

License

Hugo-theme-echo is licensed under the MIT license. Check the LICENSE file for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].