Skip to content

Commit

Permalink
update to v.1.1.3
Browse files Browse the repository at this point in the history
  • Loading branch information
Vincent Hy authored and Vincent Hy committed Oct 18, 2019
1 parent aa5cee3 commit d3c46bc
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 14 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
## 1.x

### [v1.1.3](https://github.com/Veminem/vuepress-theme-oneN/releases/tag/1.1.3)

🔔 更新 [2019-10-18]

- `修复` 页脚组件图标配置信息
- `新增` 配置主题说明文档
- `调整` 首页支持嵌入 MarkDown 内容

### [v1.1.2](https://github.com/Veminem/vuepress-theme-oneN/releases/tag/1.1.2)

🔔 更新 [2019-10-17]
Expand Down
35 changes: 22 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,32 @@
>
<h1>vuepress-theme-onen</h1>
🎈<em>A VuePress Theme for oneN</em>
<p align="center">
<a href="https://www.npmjs.com/package/vuepress-theme-onen">
<img src="https://img.shields.io/npm/v/vuepress-theme-onen?color=red" alt="npm version">
</a>
<a href="https://www.npmjs.com/package/vuepress-theme-onen">
<img src="https://img.shields.io/npm/dt/vuepress-theme-one" alt="npm download">
</a>
<a href="https://github.com/Veminem/vuepress-theme-oneN/blob/master/LICENSE">
<img src="https://img.shields.io/npm/l/vuepress-theme-onen" alt="MIT license">
</a>
</p>
</div>
## Preview

🔗 [Live Demo](https://vincenthy.site)

## License

[MIT](https://github.com/Veminem/vuepress-theme-onen/blob/master/LICENSE)
[Live](https://github.com/Veminem/vuepress-theme-oneN/blob/1.x/images/6.png)

## 主题安装

oneN 主题基于 VuePress,首先你应该新建一个 VuePress 项目文件。详细请阅读 [VuePress 官方文档 - 现有项目](https://vuepress.vuejs.org/zh/guide/getting-started.html#%E7%8E%B0%E6%9C%89%E9%A1%B9%E7%9B%AE)

在现有的 VuePress 项目文件新建如下目录结构:

![目录结构](./img/1.png)
![目录结构](https://github.com/Veminem/vuepress-theme-oneN/blob/1.x/images/1.png)

接着安装 oneN 主题:

Expand Down Expand Up @@ -74,7 +83,7 @@ features:
配置完的首页效果如下:

![首页](img/2.png)
![首页](https://github.com/Veminem/vuepress-theme-oneN/blob/1.x/images/2.png)

### 侧边栏

Expand All @@ -89,7 +98,7 @@ module.exports = {
text: '',
link: '',
children: [
{ text: '', link: '' },
{ text: '', link: '' },
{ text: '', link: '' },
...
]
Expand All @@ -102,7 +111,7 @@ module.exports = {

可以看到 `themeConfig.menu` 数组中每个对象成员作为一级导航,应包含 `text``link``children` 字段,其中 `children` 字段又嵌套着二级导航。

![侧边栏](img/5.png)
![侧边栏](https://github.com/Veminem/vuepress-theme-oneN/blob/1.x/images/5.png)

如上图所示树形结构文件的侧边栏,配置内容应如下:

Expand All @@ -115,15 +124,15 @@ module.exports = {
text: 'postA',
link: '/post/postA',
children: [
{ text: 'postA1', link: '/postA-1' },
{ text: 'postA1', link: '/postA-1' },
{ text: 'postA2', link: '/postA-2' },
]
},
{
text: 'postB',
link: '/post/postB',
children: [
{ text: 'postB1', link: '/postB-1' },
{ text: 'postB1', link: '/postB-1' },
]
},
]
Expand All @@ -145,7 +154,7 @@ module.exports = {
}
```

> 注意,你应该在项目 `.vuepress/public` 目录下存放静态公共文件资源,以使 `/avatar.jpg``/logo.png` 这样的路径能够被正确读取。
> 注意,你应该在项目 `.vuepress/public` 目录下存放静态公共文件资源,以使 `/avatar.jpg``/logo.png` 这样的路径能够被正确读取。
>
> 详细请阅读 [VuePress 官方文档 - 静态资源](https://vuepress.vuejs.org/zh/guide/assets.html#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90)
Expand Down Expand Up @@ -178,7 +187,7 @@ module.exports = {

配置完的导航栏效果如下:

![导航栏](img/3.png)
![导航栏](https://github.com/Veminem/vuepress-theme-oneN/blob/1.x/images/3.png)

### 音乐控件

Expand Down Expand Up @@ -221,15 +230,15 @@ module.exports = {

配置完的页脚效果如下:

![页脚](img/4.png)
![页脚](https://github.com/Veminem/vuepress-theme-oneN/blob/1.x/images/4.png)

### 自定义图标

oneN 使用 [ant-design-vue](https://vue.ant.design/components/icon-cn/) 图标库,因此你可以自定义图标样式,如上面提到的导航栏 `navbar` 和页脚 `footer` ,只需将其对应 `title` 属性值换成图标库中其他图标的 `title` 即可。

### 自定义颜色

如果要对主题[默认预设]( https://github.com/Veminem/vuepress-theme-oneN/blob/master/styles/palette.styl )的样式应用简单的颜色替换,或者定义一些颜色变量供以后使用,你可以创建一个 `.vuepress/styles/palette.styl` 文件。
如果要对主题[默认预设]( https://github.com/Veminem/vuepress-theme-oneN/blob/master/styles/palette.styl )的样式应用简单的颜色替换,或者定义一些颜色变量供以后使用,你可以创建一个 `.vuepress/styles/palette.styl` 文件。

你可以调整一些颜色变量:

Expand Down
Binary file added images/6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vuepress-theme-onen",
"version": "1.1.2.1",
"version": "1.1.3",
"description": "A vuepress theme for oneN",
"main": "index.js",
"publishConfig": {
Expand Down

0 comments on commit d3c46bc

Please sign in to comment.