我的博客排版样式模版文章

标题

为了保证和 HTML 的最大兼容性，共下设 6 个标题样式， h1 - h6 层级关系明确。

下面展示 6 个不同的标题：

一个大标题

一个二级标题

一个三级标题

一个四级标题

一个五级标题

一个六级标题

正文

我在荒岛上迎接黎明。太阳初升时，忽然有十万支金喇叭齐鸣。阳光穿过透明的空气，在喑蓝色的天空飞过。在黑暗尚未褪去的海面上燃烧着十万支蜡烛。我听见天地之间钟声响了，然后十万支金喇叭又一次齐鸣。我忽然泪下如雨，但是我心底在欢歌。有一柄有弹性的长剑从我胸中穿过，带来了剧痛似的巨大感。这是我一生最美好的时刻，我站在那一个门坎上，从此我将和永恒连结起。

标题 + 正文

那么下面再来看下标题和正文同时存在时的表现。

一个大标题

那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。

我希望自已也是一颗星星：如果我会发光，就不必害怕黑暗。如果我自己是那么美好，那么一切恐惧就可以烟消云散。于是我开始存下了一点希望——如果我能做到，那么我就战胜了寂寞的命运。

二级标题

故人西辞黄鹤楼，烟花三月下扬州。
孤帆远影碧空尽，唯见长江天际流。

三级标题

I've seen things you people wouldn't believe.Attack ships on fire off the shoulder of Orion.I've watched c-beams glitter in the dark near the Tannhauser Gate.All those ... moments will be lost in time, like tears...in rain.Time to die.

四级标题

We are rewriting the React documentation with a few differences:

All explanations are written using Hooks rather than classes.
We’ve added interactive examples and visual diagrams.
Guides include challenges (with solutions!) to check your understanding.

标题五

我知道强扭的瓜不甜，可我就喜欢糟蹋东西。

标题六

车到山前必有路，标题五六凑字数。

中英文混排

中英文混排在编程领域是一个常见的问题。比如我想介绍在 Bytedance 如何开发一个应用程序，我通常要介绍我们是 React 技术栈，会用到很多技术，举个 🌰： Mobx、Redux、Immutable.js。

或者直接使用一些英文来表达：Why is web3 marketing so hard? Well, no one knows what's working. Quantifying ROI based on on-chain events is extremely complex.

We built Blaze to help teams make data driven web3 marketing decisions. Try out our tool for free today.

行间元素

代码、粗体、斜体

有时候，一行字就可以写完一片Demo。比如这是粗体，这是代码，这是斜体。当然，我们需要用英文来演示下效果：This is strong, this is the code, and the italic.

链接

这是链接的样式：即刻·Web版。当然我们也需要演示下更加复杂的情况，比如中英文混合：We provide the building blocks: from tiny, focussed, modular utilities to plugins that combine them to perform bigger tasks. And much, much more. You can build on unified, mixing and matching building blocks together, to make all kinds of interesting new things.
当然你可能也想看看换行时链接的样式。那我们就来一个：内容很好编嘛！如果不好编你就谷歌搜索一下！你看，这不就编完了。

程序员友好——优雅的代码展示

/**
 * @param {number} n
 * @return {number}
 */
var climbStairs = function(n) {
    let dp = [1, 2];
    for(let i = 2; i < n; i++) {
        dp[i] = dp[i - 1] + dp[i-2];
    }
    return dp[n-1]
};

更复杂一些的代码展示：

import Document, {Html, Head, Main, NextScript} from 'next/document';

// 🔥 Super granular and accurate highlighting
export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {...initialProps};
  }

  render() {
    return (
      <Html>
        <Head />
        <body className="bg-zinc-800 text-zinc-200">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

列表

无序列表

列表一
列表二
列表三
With a full-featured shopping cart, automated taxes, discounts, emails and a single dashboard to manage your store, Shoprocket is the easiest way to sell, anywhere!

有序列表

下面这些内容没什么意义，我从互联网上择的。

flyctl certs list - Lists the hostnames which have been added to an application and for which certificates may have been obtained.
flyctl certs check hostname - Triggers a check on the domain validation and DNS configuration for the given host and return results in the same format as flyctl certs show.
flyctl certs delete hostname - Removes the hostname from the application, dropping the certificates in the process.

分割线

分割线开始👇

好的，分割线结束，我们继续。

图片

文章中的图片长这样 👇
至于点击后它是否需要调用图片查看器，完全由你决定。

视频呢

表格

Name	Type	Description
`name`	string	Name of the resource
`path`	string	Path to the resource

引用

一般来说，英文下的引用会是斜体，但对于中文来说这并不合适。因此，xx会选择正体，并减淡颜色。

To illustrate how to automate the certificates API, we are going to show the flyctl command line and the equivalent GraphQL request, wrapped in a compact easy-to-read Node application from our fly-examples/hostnamesapi repository.

混合样式

列表 + 链接 + 行内样式

Other Commands
Finally, we should point out the other flyctl certs commands which you will want to use.

flyctl certs list - Lists the hostnames which have been added to an application and for which certificates may have been obtained.
flyctl certs check hostname - Triggers a check on the domain validation and DNS configuration for the given host and return results in the same format as flyctl certs show.
flyctl certs delete hostname - Removes the hostname from the application, dropping the certificates in the process.

列表 + 代码

[JavaScript] slice()、splice()、split() 傻傻分不清

slice

测试一下

import Image from '@next/image'
export default () => <Image />

splice
split