Spoon

Article display controls

noneback@example.com (NoneBack) — Tue, 16 Jan 2024 10:00:00 +0800

This page demonstrates page-level display controls.

No table of contents

Although this article has headings, it deliberately hides the table of contents.

No reading progress

The reading progress indicator, related posts, comments, and image zooming are also disabled for this page.

数学公式与流程图测试

noneback@example.com (NoneBack) — Mon, 15 Jan 2024 10:00:00 +0800

这篇文章测试数学公式和流程图的渲染功能。

数学公式 (KaTeX)

行内公式

质能方程 $E = mc^2$ 是物理学中最著名的公式之一。

欧拉公式 $e^{i\pi} + 1 = 0$ 将五个最重要的数学常数联系在一起。

块级公式

高斯积分：

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

麦克斯韦方程组（微分形式）：

$$ \nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0} $$

$$ \nabla \cdot \mathbf{B} = 0 $$

$$ \nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t} $$

$$ \nabla \times \mathbf{B} = \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} $$

矩阵表示：

$$ \begin{pmatrix} a_{11} & a_{12} & a_{13} \ a_{21} & a_{22} & a_{23} \ a_{31} & a_{32} & a_{33} \end{pmatrix} $$

流程图 (Mermaid)

基本流程图

mermaid

graph TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作1]
B -->|否| D[执行操作2]
C --> E[结束]
D --> E

序列图

mermaid

sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户->>前端: 点击登录
前端->>后端: 发送请求
后端->>数据库: 查询用户
数据库-->>后端: 返回结果
后端-->>前端: 返回Token
前端-->>用户: 登录成功

类图

mermaid

classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+String color
+meow()
}
Animal <|-- Dog
Animal <|-- Cat

甘特图

mermaid

gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :a1, 2024-01-01, 7d
UI设计 :a2, after a1, 5d
section 开发阶段
前端开发 :b1, after a2, 14d
后端开发 :b2, after a2, 14d
section 测试阶段
集成测试 :c1, after b1, 7d

代码示例

python


def fibonacci(n: int) -> int:
 """计算斐波那契数列第n项"""
 if n <= 1:
 return n
 a, b = 0, 1
 for _ in range(2, n + 1):
 a, b = b, a + b
 return b

How to integrate umami to your website for free

noneback@example.com (NoneBack) — Sun, 14 Aug 2022 21:34:36 +0800

This article is about how to integrate umami website analytics to your website for free. The database use postgres with 500M storage limit provided by supabase.

The umami service is hosted with vercel. Thanks to the excellent service capabilities of cloud vendors, you can integrate umami in less than 10 minutes. You can see the umami dashboard by clicking the Dashboard.

Create a database

The database use postgres with 500M storage limit provided by supabase. You can create a supabase account, click new project, and enter the database passowrd to create an ProgresSQL database service.

It will take a few minutes to create the database service, and you can get the DATABASE_URL after it’s done.

Hosting umami

The umami service is hosted with vercel, Once you have created the database instance, you can deploy the umami service with click deploy button in the Running on Vercel document.

Fork the https://github.com/mikecao/umami project to your GitHub account.
Create an account on Vercel.
From the dashboard page click Import Project then specify the URL to your fork of the project on GitHub.
Add the required environment variables to your Vercel project. These values are defined in the Configure umami step from Install.
1. DATABASE_URL: Connection string for your database. This is the only required variable.
2. TRACKER_SCRIPT_NAME: Allows you to assign a custom name to the tracker script different from the default umami. This is to help you avoid some ad-blockers. I used hugo-ladder on this project.
Enter yarn build && yarn update-db to the BUILD COMMAND, which will migrate the tables of umami to database automatically.
Deploy and visit your application at .vercel.app.
Follow the Getting started guide starting from the Login step and be sure to change the default password.

Of course, if you want to import tables yourself, you can also get the tables from here https://github.com/umami-software/umami/blob/master/sql/schema.postgresql.sql.

umami configuration

After deploying umami in vercel you will get a <deploy-id>.vercel.app address which login with the default account: admin and password: umami.

You can change the default password and Add webiste, enter the Name and Domain, and click enable share URL so that anyone can access the dashboard.

Then you can get data-website-id and src values by click Get tracking code，enter the value to the hugo-ladder configuration params.analytics.umami.website_id , params.analytics.umami.url.

In the end, you can get the website statistics analytics dashboard.🎉🎉🎉

Link to original article: https://guangzhengli.com/en/blog/en/how-to-integrate-umami-for-free-to-blog-site/

How to create your blog by hugo ladder in 30min

noneback@example.com (NoneBack) — Sun, 14 Aug 2022 16:47:12 +0800

This article is the second in a series on how to create you blog by hugo ladder for free, including using the hugo ladder configuration and integrate comments and analytics features, etc.

Hugo

why choose hugo

Most websites today fall into two categories - dynamic websites and static websites. Dynamic websites are server-based(or serverless), which can return different content depending on the user. They rely on a content management system (CMS) or database for rendering. So you need to pay for server costs.

Static sites generally display the same content to all users. They use server-side rendering to serve HTML, CSS, and Javascript files, which use static site generators (SSG) technology to display the same content to all users. The advantages of a static site include speed, security and SEO. it is also easy to maintain and highly scalable. Since Static Site Generators (SSG) store an already compiled page on a CDN, they load much faster.

We can choose to host to CDNs or platforms for free Netlify, Heroku, GoDaddy, DreamHost, GitHub Pages, GitLab Pages, Surge, Firebase, Google Cloud Storage, Amazon S3, Rackspace, Azure, CloudFront.

These are among the common SSG solutions: Hexo, Jekyll, Hugo or Next. js.

Hexo is Node.js based with support for multiple templating engines, integrations with NPM packages, and one command deployment. But it lacks detailed documentation when develop custom themes.
Jekyll is a static site generator written in Ruby and uses the Liquid templating language, has a vast plugin ecosystem, and is known to be beginner-friendly. One of the challenges when working with Jekyll can be the requirement of having a whole Ruby development environment to build your site.
Next.js is a awesome technology but I found that Next.js is not perfect in the plugin ecosystem of development blogs at the moment.

After comparing these technologies, I finally choose Hugo. Hugo is a fast, modern static website generator written in golang. It renders 5000 articles a second in benchmark tests and has a vast plugin ecosystem.

Installation

To install Hugo you can follow the documentation step by step hugo install. You can also follow the command below to install it quickly.

MacOS / Linux

shell

brew install hugo

Window

shell

choco install hugo -confirm

You can ensure the installation is successful by using hugo version.

Install the theme Ladder

The theme of this blog is called ladder, which means reading as input and writing as output, both are ladders to gain knowledge.

Hugo Ladder repository URL：https://github.com/guangzhengli/hugo-theme-ladder

An already configured repository URL is: https://github.com/guangzhengli/hugo-ladder-exampleSite

If you want to practice with the hugo command or develop this theme, you can start with #configuration initialization step by step.

If you don’t want to use hugo command, you can just clone already repository and then hugo server -D, and open http://localhost:1313/ in your browser. then you can jump directly to #Custom Configuration. No need to do configuration initialization.

shell

git clone https://github.com/guangzhengli/hugo-ladder-exampleSite.git
hugo server -D

configuration initialization

Hugo provides a new command to create a new website:

shell


hugo new site my_website
cd my_website

create an empty git repository and make this repository a submodule of your site directory:

shell

git init
git submodule add https://github.com/guangzhengli/hugo-theme-ladder themes/ladder

Because of my personal preference for yml format reading, this theme uses yml instead of the default toml format type to configure, so you can go to transform.tool to convert according to your preference.

Here is all configuration in the config.yml, you can delete the default config.toml file in the root directory and create a new config.yml file instead.

click here to show config.yml file

yml


baseURL: 'https://hugo-ladder.pages.dev'
title: LADDER
theme: hugo-theme-ladder
license: MIT
licenselink: 'https://github.com/guangzhengli/hugo-theme-ladder/blob/master/LICENSE'
description: 'A fast, clean Hugo theme'
homepage: 'https://hugo-ladder.pages.dev'
defaultContentLanguage: 'en'
googleAnalytics: G-xxx
paginate: 10
params:
 brand: HOME
 avatarURL: /images/avatar.png
 author: Hugo Ladder
 authorDescription: A clean, fast hugo theme focused on Reading
 info: Build a free and beautiful blog site to record your thoughts and increase your influence
 favicon: /images/avatar.png
 options:
 showDarkMode: true
 enableImgZooming: true
 enableMultiLang: true
 darkModeTheme: data-dark-mode
 #darkModeTheme: icy-dark-mode
 comments:
 giscus:
 enable: true
 repo: username/repo
 repo_id: xxx
 category: Announcements
 category_id: xxx
 mapping: pathname
 position: top
 lang: en # pick a language from https://github.com/giscus/giscus/tree/main/locales
 utteranc:
 enable: false
 repo: username/xxx
 issueTerm: pathname
 analytics:
 google:
 SiteVerificationTag: xxx
 umami:
 enable: true
 website_id: xxx
 url: https://xxx
 guestbook:
 title: Guestbook
 description: Leave a comment below. It could be anything –- question, appreciation, information, or even humor.
 social:
 - name: GitHub
 pre: >-
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
 url: 'https://github.com/username/xxx'
 - name: Dashboard
 pre: >-
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
 url: 'https://xxx'
languages:
 en:
 languageName: EN
 menu:
 main:
 - name: Blog
 url: /blog
 weight: 1
 - name: Tags
 url: /tags
 weight: 2
 - name: Archive
 url: /archives
 weight: 3
 - name: Guestbook
 url: /guestbook
 weight: 4
 - name: Dashboard
 url: https://xxx
 weight: 5
taxonomies:
 series: series
 tag: tags

build and run

First we find the default.md file in the archetypes folder in the root directory and replace its contents with the following file.

markdown


---
title:
date: {{ .Date }}
tags: []
series: []
featured: true
---
Here is summary.

<!--more-->

here is your content.

Copy themes/ladder/exampleSite/content file to content in the root directory.

Create a new blog post named my-first-blog

shell

hugo new blog/my-first-blog.md

Once created, you can use hugo server -D to build and run the blog and open http://localhost:1313/ in your browser to see your blog site.

Custom Configuration

multi language support

First, we need to determine which language is the default language of the blog website. Is it multi-language support? For example, defaultContentLanguage needs to be set to en if the default language is English. If the default language is Chinese it is zh.

In addition, if you don’t need multi-language support, set params.options.enableMultiLang to false, and delete the other language configuration which below the languages.

modify the basic configuration

yml


baseURL: 'https://hugo-ladder.pages.dev' #change to your https://username.github.io
homepage: 'https://hugo-ladder.pages.dev' #change to your https://username.github.io
params:
 brand: HOME # change to your brand of blog site
 avatarURL: /images/avatar.png # change /static/images/ file
 author: Hugo Ladder # your name
 authorDescription: # your desc
 info: # website info
 favicon: /images/avatar.png # website favicon
 options:
 showDarkMode: true # dark mode support

You can open http://localhost:1313/ in your browser to see the result in real time while you modify it.

Currently this blog supports 4 default pages, blogs list, tags, history archives and guestbook.

You can adjust the name by modifying menu.main, if you want to add a new page in the navigation bar, remember to add the corresponding markdown file under content in the root directory.

Dark mode

Here are to dark mode theme currently, one is the default data-dark-mode theme, and the other is icy-dark-mode dark theme. Which can be replaced by modifying the value of params.darkModeTheme.

New social icons can be added by modifying the configuration file, the params.social field specifies name, icon, custom address and the icon can be found at this website feathericons.com.

Content management

posts management

If you create a new posts, it is recommended to fill the configuration which means:

markdown


title:
date: {{ .Date }}
tags: []
series: []
featured: true

title post title
date published date
tags tags
series series, it will be show related post below the content.
featured it will be show in home page featured post, true or false

Rich content

This theme integrates Toggle and Tab group by default, The Toggle can hide code or content in #Configuration initialization, and the Tab group can toggle tabs to write content in #Install Hugo for example.

In addition, there are rich content such as youtube, twitter and site page jump integration. You can check rich content for details.

I also created a new repository https://github.com/guangzhengli/awesome-hugo-shortcodes to collect hugo shortcodes, you can go see if there are any you need, you can add them yourself.

GuestBook and comment integration

The guestbook and comments feature supports based on GitHub Issues for utteranc, and other based on GitHub Discussions for giscus

The steps to integrate both are simple, just follow the tutorials of utteranc and giscus, generate the configuration values and fill in the value of giscus in params.comments. This theme used giscus, and set false to utteranc.enbale.

Web analytics

The theme ladder can be integrated with Google analytics and umami for two kinds of web analytics.

For Google analytics you can get the MEASUREMENT ID which start with G-xxx to the googleAnalytics parameters from the document.

The integration of Google analytics is simple and free, but the disadvantage is that it is not privacy-protected (the data will upload to Google), and the analytics pages are slow.

So if you have the need to build umami to do the privacy-protected analytics, the process and steps I put in another blog How to build umami for free-to-use.

SEO

The theme has been optimized for SEO, including perfect meta tag information, etc. In addition, the default support Google Search Console, you can generate the google-site-verification to the params. analytics.google.SiteVerificationTag according to the document.

Deploy

There are also many ways to deploy, with the option of hosting to a CDN or platform Netlify、Heroku、GoDaddy、DreamHost、GitHub Pages、GitLab Pages、Surge、Firebase、Google Cloud Storage、Amazon S3、Rackspace、Azure and CloudFront 。

In this article, we have chosen the GitHub Pages for the tutorial.

Create GitHub account

Before building our blog site, we need to register a GitHub account. The account username is very important, which is the domain address of our blog site.

For example, if we create an account with the username guangzhengli, we will get our blog site which address is https://guangzhengli.github.io.

Create repository for GitHub Pages

You can find the full tutorial in the GitHub Pages Doc. It just need create a new repository with the repository name username.github.io.

Actions

There two ways to deploy blog used GitHub pages, one is to push directly to GitHub Pages, and the other is to generate static page code on the gh-pages branch. The code is available at https://github.com/guangzhengli/hugo-ladder-exampleSite/tree/master/.github/workflows.

If you did not clone the configured repository: https://github.com/guangzhengli/hugo-ladder-exampleSite. You need to create a new folder .github/workflows and add the new file gh-pages.yml file.

Click to show the code

yml


name: generate github pages to gh-pages branch

on:
 push:
 branches:
 - main ## Set a branch name to trigger deployment

jobs:
 deploy:
 runs-on: ubuntu-20.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: 'latest'
 extended: true

 - name: Build
 run: hugo --minify

 - name: Deploy
 uses: peaceiris/actions-gh-pages@v3
 # If you're changing the branch from main, 
 # also change the `main` in `refs/heads/main` 
 # below accordingly.
 if: github.ref == 'refs/heads/main'
 with:
 github_token: ${{ secrets.GITHUB_TOKEN }}
 publish_dir: ./public

Deploy GitHub Pages

Enter the following command in the root directory of your project.

shell

git remote add origin https://github.com/username/username.github.io.git

git add .

git commit -m "feat: init blog site"

git push origin main

Once we’ve made sure our push is successful. It’ll automatically build the code into the files needed for GitHub Pages in Actions, so you can go to this address to check if workflow is running successfully. Be sure to replace username in the address with your account name. https://github.com/username/username.github.io/actions.

If Actions workflow successfully, we will have a new branch called gh-pages. Then go to the repository’s settings center Settings, select Pages, and then Build and deployment -> Source and select Deploy from a branch. After that Branch select gh-pages to configure successfully.

Then you can select Visit site to https://username.github.io for successful access! 🎉🎉🎉🎉

If you have any questions when deploying, you can leave a comment below.

Link to original article: https://guangzhengli.com/en/blog/en/how-to-create-your-blog-for-free-by-hugo-ladder-in-30min/

How to create your blog for free in 10min

noneback@example.com (NoneBack) — Mon, 01 Aug 2022 00:00:00 +0000

This article is the first in a series on how to build a free independent blog, and will also teach you how to quickly use the features of GitHub Pages to build your blog.

It will help you build and deploy a blog site quickly. For more on hugo-ladder, we recommend following this article to build how to create your blog for free by hugo ladder theme in 30min.

Preparation

Create GitHub Account

Before building our blog site, we need to register a GitHub account. The account username is very important, which is the domain address of our blog site.

For example, if we create an account with the username guangzhengli, we will get our blog site which address is https://guangzhengli.github.io.

Create repository for GitHub Pages

You can find the full tutorial in the GitHub Pages Doc. It just need create a new repository with the repository name username.github.io.

Build blog

You can clone the repository, which is ready for build and deploy hugo-ladder-exampleSite.

shell

git clone https://github.com/guangzhengli/hugo-ladder-exampleSite.git

After pulling the repository code, we need to modify the configuration, which in the config.yml file at the root directory, we need to change all default configs to our custom configs.

modify configration file

Open the config.yml file in the root directory with an editor and change the configuration as follows:

yml


baseURL: 'https://hugo-ladder.pages.dev' # set https://username.github.io
homepage: 'https://hugo-ladder.pages.dev' # set https://username.github.io
defaultContentLanguage: 'en' #default language
params:
 brand: HOME # set the brand of your site
 avatarURL: /images/avatar.png # avatar, replace your avatar in the /static/images/
 author: Hugo Ladder # name
 authorDescription: # description
 info: this is a info # information of your blog site
 favicon: /images/avatar.png # blog site icon，replace your avatar in the /static/images/
 options:
 showDarkMode: true # is show dark mode button
 enableMultiLang: true # is show multi language button

The repository hugo-ladder-exampleSite just for quickly start. Suppose we all use the same comment configurations. In that case, it will bring some trouble to the subsequent visitor use, so annotating comment-related functions will be better.

change the configuration as follows:

yml


comments:
 giscus:
 enable: true

yml


comments:
 giscus:
 enable: false

How to create or update posts

You can find the ExampleSite demo article in the content/blog at the root directory. You can create a new markdown file to add a new article.

Currently in the article header, these tags need to be added to configure the display of the article:

title: article title
date: published date
tags: tags for articles to search or show
series: series of articles, it will be show related article in the bottom of article
featured: true or false, article will be show in the featured posts in home page if set true.

And you may add the summary divider where you want to split the article.

Deploy blog

push your code to username.github.io

In the first step, we create a repository named username.github.io, so you can use the following command to remove the remote URL of the repository hugo-ladder-exampleSite, and then add your username.github.io address to git configuration. replace username with your account username in the following command.

Finally, you can push your change to the remote repository.

shell

git remote remove origin

git remote add origin https://github.com/username/username.github.io.git

git add .

git commit -m "feat: init blog site"

git push origin main

Deploy GitHub Pages

Once we’ve made sure our push is successful, it will automatically build the code in the Actions. So you can go to this address to check if workflow is running successfully. replace username with https://github.com/username/username.github.io/actions

If Actions runs successfully, we will have a new branch called gh-pages. We go to the repository’s settings center Settings, select Pages, and then Build and deployment -> Source and selects Deploy from a branch. After that Branch select gh-pages to configure successfully.

Select Visit site above or manually enter https://username.github.io for successful access! 🎉🎉🎉🎉

If you have any questions when deploying, you can leave a comment below.

Link to original article: https://guangzhengli.com/en/blog/en/how-to-create-your-blog-for-free-in-10min/

Rich Content

noneback@example.com (NoneBack) — Mon, 18 Jul 2022 20:29:08 +0000

figure

ref in posts

Neat Who

hide toggle

summary

shell

hide value

without summary

Toggle

shell

hide value

tab group code

Hello

shell

Hello World!

Goodbye

shell

Goodbye Everybody!

tab group

MacOS

brew install hugo

Linux

apt install hugo

Window

window install hugo

Code Highlight Style test

noneback@example.com (NoneBack) — Thu, 25 Jul 2019 16:43:00 +0000

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

Code block controls

The code block header can show a source filename, language, and copy action. Hugo attributes also enable line numbers and focused lines.

internal/server/config.go
go




1
2
3
4
5
6
7


func LoadConfig() error {
 port := os.Getenv("PORT")
 if port == "" {
 port = "1313"
 }
 return nil
}

This shortcode reads a range from a real source file and keeps the original line numbers:

exampleSite/snippets/config.go
go




 5
 6
 7
 8
 9
10
11


// LoadPort reads the optional HTTP port and falls back to the local default.
func LoadPort() string {
 if port := os.Getenv("PORT"); port != "" {
 return port
 }

 return "1313"

plain

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

rust


#[derive(Debug)]
pub enum State {
 Start,
 Transient,
 Closed,
}

impl From<&'a str> for State {
 fn from(s: &'a str) -> Self {
 match s {
 "start" => State::Start,
 "closed" => State::Closed,
 _ => unreachable!(),
 }
 }
}

json


[
 {
 "title": "apples",
 "count": [12000, 20000],
 "description": {"text": "...", "sensitive": false}
 },
 {
 "title": "oranges",
 "count": [17500, null],
 "description": {"text": "...", "sensitive": false}
 }
]

python


@requires_authorization
def somefunc(param1='', param2=0):
 r'''A docstring'''
 if param1 > param2: # interesting
 print 'Gre\'ater'
 return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
 pass

>>> message = '''interpreter
... prompt'''

html


<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
 function $init() {return true;}
</script>

<body>
 <p checked class="title" id='title'>Title</p>
 <!-- here goes the rest of the page -->
</body>

javascript


function $initHighlight(block, cls) {
 try {
 if (cls.search(/\bno\-highlight\b/) != -1)
 return process(block, true, 0x0F) +
 ` class="${cls}"`;
 } catch (e) {
 /* handle exception */
 }
 for (var i = 0 / 2; i < classes.length; i++) {
 if (checkCondition(classes[i]) === undefined)
 console.log('undefined');
 }

 return (
 <div>
 <web-component>{block}</web-component>
 </div>
 )
}

export $initHighlight;

cpp


#include <iostream>

int main(int argc, char *argv[]) {

 /* An annoying "Hello World" example */
 for (auto i = 0; i < 0xFFFF; i++)
 cout << "Hello, World!" << endl;

 char c = '\n';
 unordered_map <string, vector<string> > m;
 m["key"] = "\\\\"; // this is an error

 return -2e3 + 12l;
}

sql


CREATE TABLE "topic" (
 "id" serial NOT NULL PRIMARY KEY,
 "forum_id" integer NOT NULL,
 "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');

objectivec


#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString*)worldName;
@required
- (BOOL)allowsToLive;
@end

@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end

java


/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
 public static final Short ERROR = 0x0001;

 public void moveTo(int x, int y, int z) {
 _ai = null;
 log("Should not be called");
 if (1 > 5) { // wtf!?
 return;
 }
 }
}

swift


import Foundation

@objc class Person: Entity {
 var name: String!
 var age: Int!

 init(name: String, age: Int) {
 /* /* ... */ */
 }

 // Return a descriptive string for this person
 func description(offset: Int = 0) -> String {
 return "\(name) is \(age + offset) years old"
 }
}

css


@font-face {
 font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
 color: #F0F0F0; background: #600;
 font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
 a[href^=http]::after {
 content: attr(href)
 }
}

ruby


# The Greeter class
class Greeter
 def initialize(name)
 @name = name.capitalize
 end

 def salute
 puts "Hello #{@name}!"
 end
end

g = Greeter.new("world")
g.salute

makefile


# Makefile

BUILDDIR = _build
EXTRAS ?= $(BUILDDIR)/extras

.PHONY: main clean

main:
 @echo "Building main facility..."
 build_main $(BUILDDIR)

clean:
 rm -rf $(BUILDDIR)/*

go


package main

import "fmt"

func main() {
 ch := make(chan float64)
 ch <- 1.0e10 // magic number
 x, ok := <- ch
 defer fmt.Println(`exitting now\`)
 go println(len("hello world!"))
 return
}

bash


#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
 echo "Superuser rights required"
 exit 2
fi

genApacheConf(){
 echo -e "# Host ${HOME_DIR}$1/$2 :"
}

ini


; boilerplate
[package]
name = "some_name"
authors = ["Author"]
description = "This is \
a description"

[[lib]]
name = ${NAME}
default = True
auto = no
counter = 1_000

Markdown Style test

noneback@example.com (NoneBack) — Tue, 24 Jul 2018 23:31:06 +0000

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

Headers

markdown


# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis

markdown

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

Lists

markdown


1. First ordered list item
2. Another item
 * Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
 1. Ordered sub-list
4. And another item.

 You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

 To have a line break without a paragraph, you will need to use two trailing spaces.
 Note that this line is separate, but within the same paragraph.
 (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
- Paragraph In unordered list

 For example like this.

Common Paragraph with some text.
And more text.

First ordered list item
Another item

Unordered sub-list.

Actual numbers don’t matter, just that it’s a number
Ordered sub-list
And another item.

You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

To have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

Unordered list can use asterisks

Or minuses

Or pluses

Paragraph In unordered list

For example like this.

Common Paragraph with some text. And more text.

Inline HTML

markdown

<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

To reboot your computer, press ctrl+alt+del.

markdown


<dl>
 <dt>Definition list</dt>
 <dd>Is something people use sometimes.</dd>

 <dt>Markdown in HTML</dt>
 <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

Definition list: Is something people use sometimes.

Links

markdown

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://hexo.io
[1]: https://hexo.io/docs/
[link text itself]: https://hexo.io/api/

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

Images

markdown

hover to see the title text:

Inline-style:

![alt text](https://hexo.io/icon/favicon-196x196.png "Logo Title Text 1")

Reference-style:
![alt text][logo]

[logo]: https://hexo.io/icon/favicon-196x196.png "Logo Title Text 2"

hover to see the title text:

Inline-style:

Reference-style:

Code and Syntax Highlighting

Inline code has back-ticks around it.

javascript


var s = "JavaScript syntax highlighting";
alert(s);

python


s = "Python syntax highlighting"
print s

text

No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

Tables

markdown


| |ASCII |HTML |
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'` |'Isn't this fun?' |
|Quotes |`"Isn't this fun?"` |"Isn't this fun?" |
|Dashes |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|

	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

Colons can be used to align columns.

markdown


| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | |
| col 2 is | centered | |
| zebra stripes | are neat | 

Tables	Are	Cool
col 3 is	right-aligned
col 2 is	centered
zebra stripes	are neat

The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

markdown


Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

You can find more information about LaTeX mathematical expressions here.

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal Rule

Three or more…

markdown

---

Hyphens

***

Asterisks

___

Underscores

Hyphens

Asterisks

Underscores

Line Breaks

markdown

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph.

markdown


This is a regular paragraph.

<table>
 <tr>
 <td>Foo</td>
 </tr>
</table>

This is another regular paragraph.

This is a regular paragraph.

Foo

This is another regular paragraph.

Youtube videos

markdown


<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)

Pure markdown version:

Videos

noneback@example.com (NoneBack) — Wed, 25 Dec 2013 00:19:15 +0000

This is a video test post.

YouTube Privacy Enhanced Shortcode

Twitter Simple Shortcode

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

Vimeo Simple Shortcode

日本語テスト

noneback@example.com (NoneBack) — Tue, 24 Dec 2013 23:33:26 +0000

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

中文測試

noneback@example.com (NoneBack) — Tue, 24 Dec 2013 23:31:30 +0000

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

Elements

noneback@example.com (NoneBack) — Tue, 24 Dec 2013 23:29:08 +0000

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. ~~Deleted text~~ tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title: This is a definition list division.

Ordered List (ol)

List Item 1
List Item 2
List Item 3

Unordered List (ul)

List Item 1
List Item 2
List Item 3

Checkbox List (ul)

List Item 1 unchecked
List Item 2 checked
List Item 3 checked

Table

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Spoon

Article display controls

No table of contents

No reading progress

数学公式与流程图测试

数学公式 (KaTeX)

行内公式

块级公式

流程图 (Mermaid)

基本流程图

序列图

类图

甘特图

代码示例

How to integrate umami to your website for free

Create a database

Hosting umami

umami configuration

How to create your blog by hugo ladder in 30min

Hugo

why choose hugo

Installation

Install the theme Ladder

configuration initialization

build and run

Custom Configuration

multi language support

modify the basic configuration

navigation

Dark mode

Social Icon

Content management

posts management

Rich content

GuestBook and comment integration

Web analytics

SEO

Deploy

Create GitHub account

Create repository for GitHub Pages

Actions

Deploy GitHub Pages

How to create your blog for free in 10min

Preparation

Create GitHub Account

Create repository for GitHub Pages

Build blog

modify configration file

Annotate comment-related functions

How to create or update posts

Deploy blog

push your code to username.github.io

Deploy GitHub Pages

Rich Content

figure

ref in posts

hide toggle

without summary

tab group code

tab group

Code Highlight Style test

Code block controls

Markdown Style test

Headers

H1

H2

H3

H4

H5

H6

Alt-H1

Alt-H2

Emphasis

Lists

Inline HTML

Links

Images

Code and Syntax Highlighting

Tables

Blockquotes