webpage-configuration-process.md · 杜文涛/The North Remembers

# 环境搭建

## 工具安装
- npm i docsify-cli -g
## 项目初始化
- docsify init ./Docsify-Guide
- index.html 入口文件
- README.md 会做为主页内容渲染
- .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
## 本地服务，实时预览
- docsify serve
- http://localhost:3000
- git push 后会有延时，不能实现实时预览

# 页面配置

## index.html
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Docsify-Guide</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>

<body>
    
    <div id="app">加载中...</div>
    <script>
        window.$docsify = {
            // 项目名称
            name: 'OHOS-NDK-Samples',
            // 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
            repo: 'https://gitee.com/Wentao-Du/the-north-remembers',
            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
            loadSidebar: true,
            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            maxLevel: 3,
            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
            subMaxLevel: 3,
            // 小屏设备下合并导航栏到侧边栏
            mergeNavbar: true,
        }
    </script>
    <script>
        // 搜索配置(url：https://docsify.js.org/#/zh-cn/plugins?id=%e5%85%a8%e6%96%87%e6%90%9c%e7%b4%a2-search)
        window.$docsify = {
            search: {
                maxAge: 86400000,// 过期时间，单位毫秒，默认一天
                paths: auto,// 注意：仅适用于 paths: 'auto' 模式
                placeholder: '搜索',
                // 支持本地化
                placeholder: {
                    '/zh-cn/': '搜索',
                    '/': 'Type to search'
                },
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false,
                namespace: 'Docsify-Guide',
            }
        }
    </script>
    
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
    
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
    
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
    
    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
</body>

</html>
```

## 封面配置文件
- index.html
```html

<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
```

- _coverpage.md
```

# OpenHarmony NDK Samples

[Gitee](/https://gitee.com/Wentao-Du/the-north-remembers)
[Start](/README.md)
```

## 侧边栏配置文件
- index.html
```

```
- _sidebar.md
```

* 鸿蒙工具链
  * [Docsify使用指南](/ProjectDocs/Docsify使用指南.md) 
  * [Typora+Docsify快速入门](/ProjectDocs/Typora+Docsify快速入门.md)
* NDK接口示例
  * [NDK接口示例](/ProjectDocs/Docsify部署教程.md)

* NAPI场景分析
  * [NAPI场景分析](/ProjectDocs/Docsify部署教程.md)

* Native维测与调优
  * [Native维测与调优](/ProjectDocs/Docsify部署教程.md) 
```

## 导航栏配置文件
- index.html
```

```
- _navbar.md
```

* 链接到我
  * [博客园地址](https://www.cnblogs.com/Can-daydayup/)
  * [Github地址](https://github.com/YSGStudyHards)
  * [知乎地址](https://www.zhihu.com/people/ysgdaydayup)
  * [掘金地址](https://juejin.cn/user/2770425031690333/posts)
  * [Gitee地址](https://gitee.com/ysgdaydayup)

* 友情链接
  * [Docsify](https://docsify.js.org/#/)
  * [博客园](https://www.cnblogs.com/)

```

杜文涛/The North Remembers

简介

发行版

贡献者

近期动态

杜文涛/The North Remembers .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

杜文涛/The North Remembers