js提取指定网站内容(国内最好TypeScript4官方文档Hanbook的翻译，一共本地)

　　js提取指定网站内容(国内最好TypeScript4官方文档Hanbook的翻译，一共本地)

　　前言

　　最近完成了TypeScript最新官方文档Hanbook的翻译，共14篇，算是国内最好的TypeScript4入门教程之一。为了方便大家阅读，我使用VuePress + Github Pages搭建了一个博客，博客效果如下：

　　

　　

　　博客地址如下：

　　0. VuePress

　　不用说，VuePress 是一个基于 Vue 的静态 网站 *敏*感*词*，风格简洁，配置简单。我不使用 VitePress 的原因是因为我想使用现有的主题，而 VitePress 与当前的 VuePress 生态系统不兼容。至于为什么不选择 VuePress@next，考虑到它还处于 Beta 阶段，在开始迁移之前它会很稳定。

　　1. 本地构建

　　VuePress官网快速入门：

　　创建并进入一个新目录

　　// 文件名自定义

mkdir vuepress-starter && cd vuepress-starter

复制代码

　　使用您最喜欢的包管理器进行初始化

　　yarn init # npm init

复制代码

　　将 VuePress 安装为本地依赖项

　　yarn add -D vuepress # npm install -D vuepress

复制代码

　　创建你的第一个文档，VuePress 会使用 docs 作为文档根目录，所以这个 README.md 相当于主页：

　　mkdir docs && echo '# Hello VuePress' > docs/README.md

复制代码

　　将一些脚本添加到 package.json

　　{

"scripts": {

"docs:dev": "vuepress dev docs",

"docs:build": "vuepress build docs"

}

}

复制代码

　　本地启动服务器

　　yarn docs:dev # npm run docs:dev

复制代码

　　VuePress 将在 :8080 (opens new window) 启动一个热重载的开发服务器。

　　2. 基本配置

　　在文档目录下创建一个 .vuepress 目录，所有 VuePress 相关文件都将放置在其中。此时您的项目结构可能如下所示：

　　.

├─ docs

│ ├─ README.md

│ └─ .vuepress

│ └─ config.js

└─ package.json

复制代码

　　在.vuepress文件夹中添加config.js，并配置网站的标题和描述，方便SEO：

　　module.exports = {

title: 'TypeScript4 文档',

description: 'TypeScript4 最新官方文档翻译'

}

复制代码

　　此时界面类似于：

　　

　　3. 添加导航栏

　　我们现在在页眉右上角添加导航栏，修改config.js：

　　module.exports = {

title: '...',

description: '...',

themeConfig: {

nav: [

{ text: '首页', link: '/' },

{

text: '冴羽的 JavaScript 博客',

items: [

{ text: 'Github', link: 'https://github.com/mqyqingfeng' },

{ text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }

]

}

]

}

}

复制代码

　　效果如下：

　　

　　有关更多配置，请参阅 VuePress 导航栏。

　　4. 添加侧边栏

　　现在我们添加一些md文件，当前文件目录如下：

　　.

├─ docs

│ ├─ README.md

│ └─ .vuepress

│ └─ config.js

| └─ handbook

| └─ ConditionalTypes.md

| └─ Generics.md

└─ package.json

复制代码

　　我们在 config.js 中配置如下：

　　module.exports = {

themeConfig: {

nav: [...],

sidebar: [

{

title: '欢迎学习',

path: '/',

collapsable: false, // 不折叠

children: [

{ title: "学前必读", path: "/" }

]

},

{

title: "基础学习",

path: '/handbook/ConditionalTypes',

collapsable: false, // 不折叠

children: [

{ title: "条件类型", path: "/handbook/ConditionalTypes" },

{ title: "泛型", path: "/handbook/Generics" }

],

}

]

}

}

复制代码

　　对应的效果如下：

　　

　　5. 改变主题

　　现在基本的目录和导航功能已经实现了，但是如果我还要加载加载、切换*敏*感*词*、模式切换（暗模式）、返回顶部、评论等功能，为了简化开发成本，我们可以直接使用主题，这里使用的主题是vuepress-theme-rec：

　　现在我们安装 vuepress-theme-reco：

　　npm install vuepress-theme-reco --save-dev

# or

yarn add vuepress-theme-reco

复制代码

　　然后在 config.js 中引用主题：

　　module.exports = {

// ...

theme: 'reco'

// ...

}

复制代码

　　刷新页面，我们会发现一些细节上的变化，比如加载时的加载*敏*感*词*，以及支持切换深色模式：

　　

　　6. 添加 文章 信息

　　但是我们也会发现条件类型（Conditional Types）在文章文章中出现了两次，这是因为本主题自动提取了第一个大标题作为本文的标题，我们可以在文章中添加一些信息修改每个 文章 的 md 文件：

　　---

title: 条件类型

author: 冴羽

date: '2021-12-12'

---

复制代码

　　此时文章的效果如下：

　　

　　但是如果你不想要标题、作者、时间信息，我们可以将其隐藏在样式中，这将在后面讨论。

　　7. 设置语言

　　注意上图中的文章时间，我们把格式写成2021-12-12，但是显示的是12/12/2021，这是因为VuePress的默认lang是en-US，我们修改一下配置.js：

　　module.exports = {

// ...

locales: {

'/': {

lang: 'zh-CN'

}

},

// ...

}

复制代码

　　可以发现，时间已经以不同的方式显示了：

　　

　　8. 打开目录结构

　　在原来的主题中，我们发现每个文章的目录结构出现在左边：

　　

　　并且 vuepress-theme-reco 把原来侧边栏中的多级页眉去掉，生成一个子侧边栏，放在页面右侧。如果要全局启用，可以在页面 config.js 中设置为启用：

　　module.exports = {

//...

themeConfig: {

subSidebar: 'auto'

}

//...

}

复制代码

　　此时效果如下：

　　

　　9. 修改主题颜色

　　VuePress 是基于 Vue 的，所以主题颜色是 Vue 的绿色，而 TypeScript 的官方颜色是蓝色，那么如何修改 VuePress 的主题颜色呢？

　　您可以使用以下代码创建 .vuepress/styles/palette.styl 文件：

　　$accentColor = #3178c6

复制代码

　　此时，可以发现主题颜色发生了变化：

　　

　　更多颜色修改参考 VuePress 的palette.styl。

　　10. 自定义修改样式

　　如果你想自定义一些 DOM 元素的样式怎么办？例如在暗模式下：

　　

　　我们发现用于强调的文字颜色比较暗淡，在深色模式下看不清楚。我想更改此文本的颜色和背景颜色？

　　VuePress 提供了一种添加额外样式的简单方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但您也可以使用普通的 CSS 语法。

　　我们在 .vupress 文件夹下创建这个目录，然后使用以下代码创建 index.styl 文件：

　　// 通过检查，查看元素样式声明

.dark .content__default code {

background-color: rgba(58,58,92,0.7);

color: #fff;

}

复制代码

　　至此，文字就清晰多了：

　　

　　然后我们提到隐藏每篇文章文章的标题、作者和时间，其实也是类似的方式：

　　.page .page-title {

display: none;

}

复制代码

　　最终效果如下：

　　

　　11. 部署

　　即使我们的博客正式完成，我们也会将其部署到免费的 Github Pages。我们在 Github 上新建了一个仓库，这里我得到了仓库名称：learn-typescript。

　　

　　相应地，我们需要在 config.js 中添加一个基本路径配置：

　　module.exports = {

// 路径名为 "//"

base: '/learn-typescript/',

//...

}

复制代码

　　最终的 config.js 文件内容为：

　　module.exports = {

title: 'TypeScript4 文档',

description: 'TypeScript4 最新官方文档翻译',

base: '/learn-typescript/',

theme: 'reco',

locales: {

'/': {

lang: 'zh-CN'

}

},

themeConfig: {

// lastUpdated: '上次更新',

subSidebar: 'auto',

nav: [

{ text: '首页', link: '/' },

{

text: '冴羽的 JavaScript 博客',

items: [

{ text: 'Github', link: 'https://github.com/mqyqingfeng' },

{ text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }

]

}

],

sidebar: [

{

title: '欢迎学习',

path: '/',

collapsable: false,

children: [

{ title: "学前必读", path: "/" }

]

},

{

title: "基础学习",

path: '/handbook/ConditionalTypes',

collapsable: false,

children: [

{ title: "条件类型", path: "/handbook/ConditionalTypes" },

{ title: "泛型", path: "/handbook/Generics" }

],

}

]

}

}

复制代码

　　然后我们在项目vuepress-starter目录下创建一个脚本文件：deploy.sh，注意修改对应的用户名和仓库名：

　　#!/usr/bin/env sh

# 确保脚本抛出遇到的错误

set -e

# 生成静态文件

npm run docs:build

# 进入生成的文件夹

cd docs/.vuepress/dist

git init

git add -A

git commit -m 'deploy'

# 如果发布到 https://.github.io/

git push -f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pages

cd -

复制代码

　　然后将命令行切换到vuepress-starter目录，执行sh deploy.sh，就会开始构建，然后提交到远程仓库。请注意，它被提交到 gh-pages 分支。我们查看对应仓库分支的代码：

　　

　　我们可以在存储库的 Settings -> Pages 中看到最终地址：

　　

　　比如我上次生成的地址是mqyqingfeng.github.io/learn-types...

　　至此，我们已经完成了 VuePress 和 Github Pages 的部署。