css 显示的所有对象都是盒模型。因此，了解 css 方框模型的工作原理是 css 的核心基础。

css - 盒模型


在上一篇文章[【New Tab】](/blog/translate/build-chrome-extensions/new-tab)学习了创建第一个标签。

这篇文章学习集成[tailwind](https://tailwindcss.com/docs/installation)

## 安装依赖

```bash
#初始化node项目
npm init -y

#安装parcel和tailwind
npm i parcel tailwindcss

#安装Parcel静态资源复制和postcss
npm i -D parcel-reporter-static-files-copy postcss-cli
```

## 迁移静态资源

在根目录创建`static`文件夹，移动`manifest.json`和`icons`文件到`static`

创建`.parcelrc`

```json
{
  "extends": ["@parcel/config-default"],
  "reporters": ["parcel-reporter-static-files-copy"]
}
```

## 集成 tailwind

在根目录创建`.postcssrc.json`

```json
{
  "plugins": {
    "tailwindcss": {}
  }
}
```

执行`npx tailwind init`，tailwind 将会自动创建`taiwind.config.js`

```js
module.exports = {
  content: ['*.html'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}
```

打开`css/style.css`替换所有

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 修改 package.json

```json
{
  "scripts": {
    "prebuild": "rm -rf dist .parcel-cache",
    "watch": "parcel watch new-tab.html",
    "build": "parcel build new-tab.html"
  }
}
```

执行`npm run build`，与之前不同的是，chrome 插件加载已解压文件的时候选择`dist`

[【Source Code】](https://github.com/rebelchris/new-tab-extension/tree/tailwind)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - 集成tailwind


Next.js 已经成为 React 应用程序最重要的框架之一。它可以帮助开发人员在没有模板的情况下构建更好的服务器端渲染 React 应用程序。

Next.js 之所以能成为目前最好的 React 框架之一，与其很多特性离不开，比如打包构建、路由预取、TypeScript、SEO 等。

对于那些想要拥有一个简单但功能强大的博客的人来说，使用 Next.js 创建博客是当今的最佳选择。

SEO（搜索引擎优化）是改进应用程序在搜索引擎排名的过程。对于任何想要在搜索引擎上获得更好排名并带来更多流量的博客来说，这都是非常重要的。

我们将在本文中使用 Next.js 来构建博客。我们将介绍 SSG（静态站点生成）的工作原理，并完成 SEO 友好的博客。

## 入门

使用官方推荐的`Create Next App`创建项目

```bash
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
```

为什么要使用`Create Next App`

- 交互式体验：不带任何参数运行`npx create-next-app@latest`，将会开启交互模式，引导创建项目
- 零依赖：`Create Next App`没有依赖，毫秒级创建项目
- 离线支持：`Create Next App`侦测网络状态，无网状态将使用本地依赖缓存
- 支持模板：通过加入`--example`参数，可以拉取官方仓库任何模板
- 集成测试：集成测试功能

创建完成后项目目录构造如下：

```bash
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── pnpm-lock.yaml
├── public
├── styles
└── tsconfig.json
```

## 安装依赖

```bash
pnpm install globby gray-matter dayjs @chakra-ui/react prismjs @emotion/react @emotion/styled framer-motion next-mdx-remote remark-gfm
```

## 创建文章

根目录新增`_posts`目录，在`_posts`目录下创建两个`mdx`文件(\_posts/js/helloWorld.mdx,\_posts/demo.mdx)，为什么是`mdx`文件呢？`mdx`支持渲染组件，支持引入导出组件，详细文档参考[MDX](https://mdxjs.com/)

## 创建公共函数目录

根目录新增`utils`目录，在`utils`目录下创建`getAllPosts.js`并写入如下函数

```js
import fs from 'fs'
import {globby} from 'globby'
import matter from 'gray-matter'
const dayjs = require('dayjs')
const relativeTime = require('dayjs/plugin/relativeTime')

dayjs.extend(relativeTime)

//获取所有文章
const GetAllPosts = async () => {
  const posts = await globby(['_posts'])
  return posts
    .reduce((prev, next) => {
      const fileContents = fs.readFileSync(next, 'utf8')
      const {data, content} = matter(fileContents)
      const postData = {
        ...data,
        group: dayjs(data.date).format('MMM/YYYY'),
        date: dayjs(data.date).format('MMM DD, YYYY'),
        fromNow: dayjs(data.date).fromNow(),
        modified: dayjs(data.modified).format('MMM DD, YYYY'),
        content,
        slug: next.replace(/^_posts\//, '').replace(/\.mdx$/, '')
      }
      !data.draft && prev.push(postData)
      return prev
    }, [])
    .sort((a, b) => dayjs(b.date) - dayjs(a.date))
}

// 根据slug导出文章
const GetPostBySlug = (slug) => {
  // eslint-disable-next-line no-undef
  return new Promise((resolve, reject) => {
    GetAllPosts()
      .then((posts) => {
        const post = posts.find((post) =>
          post.slug.includes(`${slug.join('/')}`)
        )
        resolve(post)
      })
      .catch(() => {
        reject({})
      })
  })
}

export {GetAllPosts, GetPostBySlug}
```

## 创建组件

根目录新增`components`目录

1. 创建`PostPage.tsx`组件，内容如下：

```tsx
import React, {useEffect} from 'react'
import Prism from 'prismjs'
import {Box} from '@chakra-ui/react'

// 以下按需引入
require('prismjs/components/prism-go')
require('prismjs/components/prism-python')
require('prismjs/components/prism-javascript')
require('prismjs/components/prism-css')
require('prismjs/components/prism-bash')
require('prismjs/components/prism-swift')
require('prismjs/components/prism-tsx')
require('prismjs/components/prism-jsx')
require('prismjs/components/prism-typescript')
require('prismjs/components/prism-sql')
require('prismjs/themes/prism-okaidia.min.css')

const PostPage = ({children}) => {
  useEffect(() => {
    const highlight = async () => {
      await Prism.highlightAll()
    }
    highlight().then(() => {})
  }, [children])
  return (
    <Box position="relative" w="2/3" fontSize="text.sm">
      {children}
    </Box>
  )
}
export default PostPage
```

2. 创建`pages/index.tsx`

```tsx
import NextLink from 'next/link'
import {Fragment} from 'react'
import {
  List,
  LinkOverlay,
  ListItem,
  Container,
  Heading,
  Image
} from '@chakra-ui/react'

const IndexPage = ({groupByMonthPosts}) => {
  return (
    <Container>
      {Object.keys(groupByMonthPosts).map((group) => {
        return (
          <Fragment key={group}>
            <Heading as="h3" mt={12} mb={4}>
              {group}
            </Heading>
            <List spacing={3}>
              {groupByMonthPosts[group].map((post) => {
                return (
                  <ListItem
                    position="relative"
                    display="flex"
                    gap={2}
                    alignItems="center"
                    key={post.title}
                  >
                    <NextLink legacyBehavior href={`/${post.slug}`} passHref>
                      <LinkOverlay>{post.title}</LinkOverlay>
                    </NextLink>
                    {post.tags.map((tag) => {
                      return (
                        <Image
                          key={tag}
                          boxSize={4}
                          objectFit="cover"
                          alt={tag}
                          src={`https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/icons/${tag}.svg`}
                        />
                      )
                    })}
                  </ListItem>
                )
              })}
            </List>
          </Fragment>
        )
      })}
    </Container>
  )
}

export default IndexPage

export async function getStaticProps() {
  const {GetAllPosts} = await import('utils/getAllPosts')
  const posts = await GetAllPosts()
  const groupByMonthPosts = posts.reduce((prev, next) => {
    if (Array.isArray(prev[next.group])) {
      prev[next.group].push(next)
    } else {
      prev[next.group] = []
      prev[next.group].push(next)
    }
    return prev
  }, {})
  return {
    props: {
      groupByMonthPosts
    }
  }
}
```

3. 创建`pages/[...slug].tsx`

```tsx
import {MDXRemote} from 'next-mdx-remote'
import {serialize} from 'next-mdx-remote/serialize'
import dynamic from 'next/dynamic'
import ErrorPage from 'next/error'
import NextLink from 'next/link'
import {useRouter} from 'next/router'
import React from 'react'
import remarkGfm from 'remark-gfm'
import components from 'utils/components'
import {
  Container,
  Box,
  Heading,
  Text,
  Link,
  Image,
  Center
} from '@chakra-ui/react'

const PostPage = dynamic(() => import('components/PostPage'), {ssr: false})

const Post = ({title, description, date, originalUrl, mdxSource, cover}) => {
  const router = useRouter()
  if (!router.isFallback && !mdxSource) {
    return <ErrorPage statusCode={404} />
  }
  return (
    <Container
      mt={20}
      maxW={{
        sm: 'container.sm',
        md: 'container.md',
        lg: 'container.2xl',
        xl: 'container.xl'
      }}
      className="post"
    >
      <NextSeo
        title={title}
        description={description}
        openGraph={{title, description}}
      />
      <Box as="hgroup">
        <Text textAlign="center" color="gray.500" fontSize="xs" as="p">
          Published {date}
        </Text>
        <Heading textAlign="center" as="h1" mt={4} mb={2}>
          {title}
        </Heading>
        {originalUrl && (
          <Center color="gray.500" fontSize="sm" mb={8}>
            本文翻译自：
            <NextLink legacyBehavior href={originalUrl} passHref>
              <Link>{originalUrl}</Link>
            </NextLink>
          </Center>
        )}
      </Box>
      <Image
        boxSize="100%"
        src={
          cover ??
          'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/NhSU3O.jpg'
        }
        alt={title}
      />

      <PostPage>
        <MDXRemote {...mdxSource} components={components} />
      </PostPage>
    </Container>
  )
}

export const getStaticPaths = async () => {
  const {GetAllPosts} = await import('utils/getAllPosts')
  const allPosts = await GetAllPosts()
  const paths = allPosts.map((post) => ({
    params: {
      slug: post.slug.split('/')
    }
  }))

  return {
    paths,
    fallback: false
  }
}

export const getStaticProps = async ({params}) => {
  const {GetPostBySlug} = await import('utils/getAllPosts')
  const {content, ...data} = await GetPostBySlug(params.slug)
  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [[remarkGfm]],
      rehypePlugins: []
    },
    scope: data
  })
  return {
    props: {
      ...data,
      mdxSource
    }
  }
}

export default Post
```

至此，基本框架搭建完成，接下来调整样式及组件的引入，以及 mdx 渲染修正。

4. 调整样式

**可选**

引入`tailwind.css`，执行`pnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p`

修改`tailwind.config.js`,如下：

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}
```

修改全局样式`styles/globals.scss`

```scss
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**必须**

修改`pages/_app.tsx`，引入`chakra-ui`的配置

```tsx
// pages/_app.js
import {ChakraProvider} from '@chakra-ui/react'

function MyApp({Component, pageProps}) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp
```

到这里，不出意外，你的界面应该是长这样

![QeISvi](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/QeISvi.png)

点击链接，应该会报错，未引入`utils/components`，这个是配置 mdx 内元素渲染的组件，参考[MDX Components](https://mdxjs.com/table-of-components/)，mdx 提供默认的渲染组件，所以，这个是非必须的，不需要删除即可

个人比较喜欢 chakra-ui，所以将组件都转成了 chakra-ui 提供的组件，配置如下：

```js
import CanIUse from 'components/CanIUse'
import {Heading, Link, Box} from '@chakra-ui/react'
import {FiExternalLink} from 'react-icons/fi'

const components = {
  CanIUse,
  h2: (props) => (
    <Heading as="h2" mb={4}>
      {props.children}
    </Heading>
  ),
  h3: (props) => (
    <Heading as="h3" mb={4}>
      {props.children}
    </Heading>
  ),
  h4: (props) => (
    <Heading as="h4" mb={4}>
      {props.children}
    </Heading>
  ),
  h5: (props) => (
    <Heading as="h5" mb={4}>
      {props.children}
    </Heading>
  ),
  p: (props) => (
    <Box as="div" mb={4}>
      {props.children}
    </Box>
  ),
  div: (props) => <Box mb={4}>{props.children}</Box>,
  a: (props) => {
    return (
      <Link
        display="inline-flex"
        alignItems="center"
        href={props.href}
        gap={2}
        isExternal
      >
        {props.children}
        <FiExternalLink />
      </Link>
    )
  }
}

export default components
```

好了，到这里基本完成了基于 Next.js 的博客搭建。

## 部署到 Vercel

Next.js 部署到 Vercel 无需更改和配置，无缝衔接。

![LKxyVc](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/LKxyVc.png)

![lwjB1p](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/lwjB1p.png)

![XR6YO0](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/XR6YO0.png)

![aUOfQO](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/aUOfQO.png)

[【Source Code】](https://github.com/Manonicu/blog-demo)

也可以参考我的个人网站[Manon.icu](https://manon.icu/)[Github Source Code](https://github.com/Manonicu/site)


从性能、打包大小、SEO来看，Next.js可能是最适合写blog的React框架。

Next.js - Building a blog


## 输入值数字化

```js
const checkMyValueType = (event) => {
  console.log(typeof event.target.value) // string
  console.log(typeof event.target.valueAsNumber) // number
}
;<input type="number" onkeyup="checkMyValueType(event)" />
```

## 复制输入框值到粘贴板

```js
function copyToClipboard(inputID) {
  navigator.clipboard.writeText(document.querySelector(inputID).value)
}
```

## 检查窗口是否可见

```js
const isBrowserTabInView = () => document.hidden
isBrowserTabInView() // returns true or false depending if tab is in view / focus
```

## 布尔值取反

```js
let myBool = false
myBool = !myBool
console.log(myBool) // true
myBool = !myBool
console.log(myBool) // false
```

## 检查值是否是偶数

```js
const isEven = (num) => num % 2 === 0
console.log(isEven(2)) // true
console.log(isEven(3)) // false
```

## 检查日期是否是工作日

```js
const isWeekday = (d) => d.getDay() % 6 !== 0
console.log(isWeekday(new Date(2021, 0, 11))) // true (Monday)
console.log(isWeekday(new Date(2021, 0, 10))) // false (Sunday)
```

## 日期加减

```js
const addDaysToDate = (date, n) => {
  date.setDate(date.getDate() + n)
  return date.toISOString().split('T')[0]
}
addDaysToDate('2021-0-10', 10) // "2021-01-20"
addDaysToDate('2021-0-10', -10) // '2020-12-31'
```

## 获取时分秒

```js
const timeFromDate = (date) => date.toTimeString().slice(0, 8)
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)))
// "17:30:00"
console.log(timeFromDate(new Date(2021, 0, 10, 5, 56, 44)))
// "05:56:44"
```

## 计算两个日期之间的工作日数

```js
const countWeekDaysBetween = (startDate, endDate) =>
  Array.from({length: (endDate - startDate) / (1000 * 3600 * 24)}).reduce(
    (count) => {
      if (startDate.getDay() % 6 !== 0) {
        count++
      }
      startDate = new Date(startDate.setDate(startDate.getDate() + 1))
      return count
    },
    0
  )
countWeekDaysBetween(new Date(2021, 0, 10), new Date(2021, 0, 20)) // 7
countWeekDaysBetween(new Date(2021, 1, 10), new Date(2021, 2, 18)) // 26
```

## 检查 localstorage 是否可用

```javascript
const isLocalStorageEnabled = () => {
  try {
    const key = `__storage__test`
    window.localStorage.setItem(key, null)
    window.localStorage.removeItem(key)
    return true
  } catch (e) {
    return false
  }
}
isLocalStorageEnabled() // true, if localStorage is accessible
```

## 计算函数等花费时间

```js
startTime = performance.now()
anyMethodOrCode()
const endTime = performance.now()
console.log(endTime - startTime + ' milliseconds.') // (Time in milliseconds)
```

## 捕获右键点击

```js
window.oncontextmenu = () => {
  console.log('right click')
}
```

## 只触发一次事件

```js
const myButton = document.getElementById('myBtn')
const myClickFunction = () => {
  console.log('this click will only get called once')
}
myButton.addEventListener('click', myClickHandler, {
  once: true
})
```

## 滚动到顶部

```js
const scrollToTopOfDocument = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}
scrollToTopOfDocument()
```

## 检查字符串是否大写

```js
const isUpperCase = (str) => str === str.toUpperCase()
console.log(isUpperCase('string')) // false
console.log(isUpperCase('STRING')) // true
console.log(isUpperCase('5TR1NG')) // true
```

## 检查元素是否处于 focus 状态

```js
const elementIsInFocus = (el) => el === document.activeElement
elementIsInFocus(anyElement) // returns true if in focus, false if not in focus
```

## 查找数组间不同元素

```js
const differenceInArrays = (array1, array2) => {
  const set = new Set(array2)
  return array1.filter((x) => !set.has(x))
}
differenceInArrays(['apple', 'orange', 'banana'], ['apple', 'orange', 'mango']) // ["banana"]
differenceInArrays([10, 12, 5], [66, 10, 6]) // [12, 5]
```

## 移除事件监听

```js
const removeEventOffElement = (el, evt, fn, opts = false) =>
  el.removeEventListener(evt, fn, opts)
const testFunction = () => console.log('My function has been called')
document.body.addEventListener('click', testFunction)
// Call remove method
removeEventOffElement(document.body, 'click', fn)
```

## 随机生成 HEX 值

```js
const generateRandomColour = () =>
  '#' + Math.floor(Math.random() * 16777215).toString(16)
//EXAMPLE
document.getElementsByTagName('body')[0].style.color = generateRandomColour()
```

## 查找第一个定义的非空参数

```js
const getFirstValidValue = (...values) => values.find(v => ![undefined, null].includes(v));
console.log(getFirstValidValue(null, undefined, 'Hey', null); // 'Hey'
```

## 元素外部监听事件

```js
const onClickOutsideElement = (element, callback) => {
  document.addEventListener('click', (e) => {
    if (!element.contains(e.target)) callback()
  })
}
onClickOutside('#some-element', () => console.log('Hey you missed'))
// Will log "Hey you missed" everytime a click that was not "some-element" was clicked
```

## 总结

有时开发人员会发现自己在一次又一次地创建相同的东西，希望上面的一些代码片段可以在在开发中重用。最新的 JavaScript 特性和浏览器 api 是很重要的。


21个用于日常开发的有用JavaScript片段


## Numbers 类型

> python 有 4 种数字类型

- Boolean
- Integer
- Float
- Complex

### Boolean

布尔值，只有 True 和 False 两个值，可以用来表示真假。

```python
a=True
b=False
```

在数学运算种，布尔值的值只有 0 和 1，0 表示 False，1 表示 True。

```python
c=4+True #5
d=False
if d==0:
    print('d is zero')
else:
    print('d is not zero')
```

### Integer

```python
a = 37
b = -299392993727716627377128481812241231
c = 0x7fa8      # Hexadecimal
d = 0o253       # Octal
e = 0b10001111  # Binary
```

### Float

```python
>>> a = 2.1 + 4.2
>>> a == 6.3
False
>>> a
6.300000000000001
>>>
```

### 比较 Comparisons

python 有如下比较运算符：

```python
x < y      Less than
x <= y     Less than or equal
x > y      Greater than
x >= y     Greater than or equal
x == y     Equal to
x != y     Not equal to

#布尔值操作
if b >= a and b <= c:
    print('b is between a and c')

if not (b < a or b > c):
    print('b is still between a and c')
```

### 数字转换

使用类型名转换数字，如下：

```python
a = int(3.14)
b = float(3)
```


Numbers - 数字类型


`Next.js` 的响应有着类似于 `express.js` 的方法，方便开发

- res.status(code)：设置响应状态码
- res.json(data)：设置响应数据，并设置响应类型为 `json`
- res.send(body)：设置响应数据，响应类型可以是`string`、`object`、`buffer`

创建`/api/user`接口

```jsx
export default (req, res) => {
  res.status(200).json({
    message: 'Hello World'
  })
}
```

访问`/api/user`接口

```bash
npm run dev

curl http://localhost:3000/api/user

#{message:'Hello World'}
```


Next.js的响应有着类似于express.js的方法，方便开发

Next.js - Response Helpers


在 Node.js 应用程序中，事件和回调概念用于提供并发性。由于 Node.js 应用程序是单线程的，Node js 的每个 API 都是异步的。

因此，它使用异步函数来保持并发性。节点使用观察者模式。节点线程保持事件循环，在任何任务完成后，它会触发相应的事件，向事件侦听器函数发出执行信号。

## Node.js 中的事件

```js
var fs = require('fs')
var rs = fs.createReadStream('./demofile.txt')
rs.on('open', function () {
  console.log('The file is open')
})
```

## 事件模型

Node.js 有一个内置的模块，名为“ Events”，在这个模块中，可以创建、监听、销毁等事件。

使用 require ()方法引入`events`模块。此外，所有事件属性和方法都是 `EventEmitter` 对象的实例。

```js
var events = require('events')
var eventEmitter = new events.EventEmitter()
```

## 事件对象

可以使用 `EventEmitter` 对象将事件处理程序分配给自己的事件。

在下面的示例中，我们创建了一个函数，该函数将在`scream`事件被触发时执行。

```js
var events = require('events')
var eventEmitter = new events.EventEmitter()

//Create an event handler:
var myEventHandler = function () {
  console.log('I hear a scream!')
}

//Assign the event handler to an event:
eventEmitter.on('scream', myEventHandler)

//Fire the 'scream' event:
eventEmitter.emit('scream')
```


buffer是Node.js提供用来存放二进制数据的缓存区