From aa05714bcc351c8cfabce3c4283a5d0ab9c01fa2 Mon Sep 17 00:00:00 2001 From: J911 Date: Thu, 19 Apr 2018 20:33:15 +0900 Subject: [PATCH] add korean guide --- docs/.vuepress/config.js | 27 +++ docs/ko/README.md | 34 +++ docs/ko/config/README.md | 216 +++++++++++++++++++ docs/ko/default-theme-config/README.md | 287 +++++++++++++++++++++++++ docs/ko/guide/README.md | 53 +++++ docs/ko/guide/assets.md | 50 +++++ docs/ko/guide/basic-config.md | 37 ++++ docs/ko/guide/custom-themes.md | 85 ++++++++ docs/ko/guide/deploy.md | 46 ++++ docs/ko/guide/getting-started.md | 66 ++++++ docs/ko/guide/i18n.md | 82 +++++++ docs/ko/guide/markdown.md | 185 ++++++++++++++++ docs/ko/guide/using-vue.md | 143 ++++++++++++ 13 files changed, 1311 insertions(+) create mode 100644 docs/ko/README.md create mode 100644 docs/ko/config/README.md create mode 100644 docs/ko/default-theme-config/README.md create mode 100644 docs/ko/guide/README.md create mode 100644 docs/ko/guide/assets.md create mode 100644 docs/ko/guide/basic-config.md create mode 100644 docs/ko/guide/custom-themes.md create mode 100644 docs/ko/guide/deploy.md create mode 100644 docs/ko/guide/getting-started.md create mode 100644 docs/ko/guide/i18n.md create mode 100644 docs/ko/guide/markdown.md create mode 100644 docs/ko/guide/using-vue.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 278669cced..863c71a3ea 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -10,6 +10,11 @@ module.exports = { lang: 'zh-CN', title: 'VuePress', description: 'Vue 驱动的静态网站生成器' + }, + '/ko/': { + lang: 'ko-KR', + title: 'VuePress', + description: 'Vue 기반 정적 웹 사이트 빌더' } }, head: [ @@ -72,6 +77,28 @@ module.exports = { sidebar: { '/zh/guide/': genSidebarConfig('指南') } + }, + '/ko/': { + label: '한국어', + selectText: '언어선택', + editLinkText: 'Edit this page on GitHub', + nav: [ + { + text: '가이드', + link: '/ko/guide/', + }, + { + text: '구성 참조', + link: '/ko/config/' + }, + { + text: '기본 테마 구성', + link: '/ko/default-theme-config/' + } + ], + sidebar: { + '/ko/guide/': genSidebarConfig('Guide') + } } } } diff --git a/docs/ko/README.md b/docs/ko/README.md new file mode 100644 index 0000000000..31607155b1 --- /dev/null +++ b/docs/ko/README.md @@ -0,0 +1,34 @@ +--- +home: true +heroImage: /hero.png +actionText: Get Started → +actionLink: /guide/ +features: +- title: Simplicity First + details: Minimal setup with markdown-centered project structure helps you focus on writing. +- title: Vue-Powered + details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. +- title: Performant + details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. +footer: MIT Licensed | Copyright © 2018-present Evan You +--- + +### As Easy as 1, 2, 3 + +``` bash +# install +yarn global add vuepress # OR npm install -g vuepress + +# create a markdown file +echo '# Hello VuePress' > README.md + +# start writing +vuepress dev + +# build to static files +vuepress build +``` + +::: warning 호환성 참고 사항 +VuePress requires Node.js >= 8. +::: diff --git a/docs/ko/config/README.md b/docs/ko/config/README.md new file mode 100644 index 0000000000..9bc25a3f43 --- /dev/null +++ b/docs/ko/config/README.md @@ -0,0 +1,216 @@ +--- +sidebar: auto +--- + +# Config Reference + +## Basic Config + +### base + +- Type: `string` +- Default: `/` + +The base URL the site will be deployed at. You will need to set this if you plan to deploy your site under a sub path, for example GitHub pages. If you plan to deploy your site to `https://foo.github.io/bar/`, then `base` should be set to `"/bar/"`. It should always start and end with a slash. + +The `base` is automatically prepended to all the URLs that start with `/` in other options, so you only need to specify it once. + +**Also see:** + +- [Base URL](../guide/assets.md#base-url) +- [Deploy Guide > Github Pages](../guide/deploy.md#github-pages) + +### title + +- Type: `string` +- Default: `undefined` + +Title for the site. This will be the prefix for all page titles, and displayed in the navbar in the default theme. + +### description + +- Type: `string` +- Default: `undefined` + +Description for the site. This will be rendered as a `` tag in the page HTML. + +### head + +- Type: `Array` +- Default: `[]` + +Extra tags to be injected to the page HTML ``. Each tag can be specified in the form of `[tagName, { attrName: attrValue }, innerHTML?]`. For example, to add a custom favicon: + +``` js +module.exports = { + head: [ + ['link', { rel: 'icon', href: `/logo.png` }] + ] +} +``` + +### host + +- Type: `string` +- Default: `'0.0.0.0'` + +Specify the host to use for the dev server. + +### port + +- Type: `number` +- Default: `8080` + +Specify the port to use for the dev server. + +### dest + +- Type: `string` +- Default: `.vuepress/dist` + +Specify the output directory for `vuepress build`. + +### ga + +- Type: `string` +- Default: `undefined` + +Provide the Google Analytics ID to enable integration. + +### serviceWorker + +- Type: `boolean` +- Default: `false` + +If set to `true`, VuePress will automatically generate and register a service worker that caches the content for offline use (only enabled in production). + +If developing a custom theme, the `Layout.vue` component will also be emitting the following events: + +- `sw-ready` +- `sw-cached` +- `sw-updated` +- `sw-offline` +- `sw-error` + +::: tip PWA NOTES +The `serviceWorker` option only handles the service worker. To make your site fully PWA-compliant, you will need to provide the Web App Manifest and icons in `.vuepress/public`. For more details, see [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest). + +Also, only enable this if you are able to deploy your site with SSL, since service worker can only be registered under HTTPs URLs. +::: + +### locales + +- Type: `{ [path: string]: Object }` +- Default: `undefined` + +Specify locales for i18n support. For more details, see the guide on [Internationalization](../guide/i18n.md). + +## Theming + +### theme + +- Type: `string` +- Default: `undefined` + +Specify this to use a custom theme. With the value of `"foo"`, VuePress will attempt to load the theme component at `node_modules/vuepress-theme-foo/Layout.vue`. + +### themeConfig + +- Type: `Object` +- Default: `{}` + +Provide config options to the used theme. The options will vary depending on the theme you are using. + +**Also see:** + +- [Default Theme Configuration](../default-theme-config/). + +## Markdown + +### markdown.slugify + +- Type: `Function` +- Default: [source](https://github.com/vuejs/vuepress/blob/master/lib/markdown/slugify.js) + +Function for transforming header texts into slugs. This affects the ids/links generated for header anchors, table of contents and sidebar links. + +### markdown.anchor + +- Type: `Object` +- Default: `{ permalink: true, permalinkBefore: true, permalinkSymbol: '#' }` + +Options for [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor). (Note: prefer `markdown.slugify` if you want to customize header ids.) + +### markdown.toc + +- Type: `Object` +- Default: `{ includeLevel: [2, 3] }` + +Options for [markdown-it-table-of-contents](https://github.com/Oktavilla/markdown-it-table-of-contents). (Note: prefer `markdown.slugify` if you want to customize header ids.) + +### markdown.config + +- Type: `Function` +- Default: `undefined` + +A function to apply additional plugins to the [markdown-it](https://github.com/markdown-it/markdown-it) instance used to render source files. Example: + +``` js +module.exports = { + markdown: { + config: md => { + md.use(require('markdown-it-xxx')) + } + } +} +``` + +## Build Pipeline + +### postcss + +- Type: `Object` +- Default: `{ plugins: [require('autoprefixer')] }` + +Options for [postcss-loader](https://github.com/postcss/postcss-loader). Note specifying this value will overwrite autoprefixer and you will need to include it yourself. + +### configureWebpack + +- Type: `Object | Function` +- Default: `undefined` + +Modify the internal webpack config. If the value is an Object, it will be merged into the final config using [webpack-merge](https://github.com/survivejs/webpack-merge); If the value is a function, it will receive the config as the 1st argument and an `isServer` flag as the 2nd argument. You can either mutate the config directly, or return an object to be merged: + +``` js +module.exports = { + configureWebpack: (config, isServer) => { + if (!isServer) { + // mutate the config for client + } + } +} +``` + +### chainWebpack + +- Type: `Function` +- Default: `undefined` + +Modify the internal webpack config with [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain). + +``` js +module.exports = { + chainWebpack: (config, isServer) => { + // config is an instance of ChainableConfig + } +} +``` + +## Browser Compatibility + +### evergreen + +- Type: `boolean` +- Default: `false` + +Set to `true` if you are only targeting evergreen browsers. This will disable ES5 transpilation and polyfills for IE, and result in faster builds and smaller files. diff --git a/docs/ko/default-theme-config/README.md b/docs/ko/default-theme-config/README.md new file mode 100644 index 0000000000..6e7056e2c2 --- /dev/null +++ b/docs/ko/default-theme-config/README.md @@ -0,0 +1,287 @@ +--- +sidebar: auto +--- + +# Default Theme Config + +::: tip +All options listed on this page apply to the default theme only. If you are using a custom theme, the options may be different. +::: + +## Homepage + +The default theme provides a homepage layout (which is used on [the homepage of this very website](/)). To use it, specify `home: true` plus some other metadata in your root `README.md`'s [YAML front matter](../guide/markdown.html#yaml-front-matter). This is the actual data used on this site: + +``` yaml +--- +home: true +heroImage: /hero.png +actionText: Get Started → +actionLink: /guide/ +features: +- title: Simplicity First + details: Minimal setup with markdown-centered project structure helps you focus on writing. +- title: Vue-Powered + details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. +- title: Performant + details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. +footer: MIT Licensed | Copyright © 2018-present Evan You +--- +``` + +Any additional content after the `YAML front matter` will be parsed as normal markdown and rendered after the features section. + +If you want to use a completely custom homepage layout, you can also use a [Custom Layout](#custom-layout-for-specific-pages). + +## Navbar Links + +You can add links to the navbar via `themeConfig.nav`: + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + nav: [ + { text: 'Home', link: '/' }, + { text: 'Guide', link: '/guide/' }, + { text: 'External', link: 'https://google.com' }, + ] + } +} +``` + +These links can also be dropdown menus if you provide an array of `items` instead of a `link`: + +```js +module.exports = { + themeConfig: { + nav: [ + { + text: 'Languages', + items: [ + { text: 'Chinese', link: '/language/chinese' }, + { text: 'Japanese', link: '/language/japanese' } + ] + } + ] + } +} +``` + +In addition, you can have sub groups inside a dropdown by having nested items: + +```js +module.exports = { + themeConfig: { + nav: [ + { + text: 'Languages', + items: [ + { text: 'Group1', items: [/* */] }, + { text: 'Group2', items: [/* */] } + ] + } + ] + } +} +``` + +## Sidebar + +To enable the sidebar, use `themeConfig.sidebar`. The basic configuration expects an Array of links: + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + sidebar: [ + '/', + '/page-a', + ['/page-b', 'Explicit link text'] + ] + } +} +``` + +You can omit the `.md` extension, and paths ending with `/` are inferred as `*/README.md`. The text for the link is automatically inferred (either from the first header in the page or explicit title in `YAML front matter`). If you wish to explicitly specify the link text, use an Array in form of `[link, text]`. + +### Nested Header Links + +The sidebar automatically displays links for headers in the current active page, nested under the link for the page itself. You can customize this behavior using `themeConfig.sidebarDepth`. The default depth is `1`, which extracts the `h2` headers. Setting it to `0` disables the header links, and the max value is `2` which extracts both `h2` and `h3` headers. + +A page can also override this value in using `YAML front matter`: + +``` md +--- +sidebarDepth: 2 +--- +``` + +### Sidebar Groups + +You can divide sidebar links into multiple groups by using objects: + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + sidebar: [ + { + title: 'Group 1', + collapsable: false, + children: [ + '/' + ] + }, + { + title: 'Group 2', + children: [ /* ... */ ] + } + ] + } +} +``` + +Sidebar groups are collapsable by default. You can force a group to be always open with `collapsable: false`. + +### Multiple Sidebars + +If you wish to display different sidebars for different group of pages, first organize your pages into directories: + +``` +. +├─ README.md +├─ foo +│  ├─ README.md +│ ├─ one.md +│ └─ two.md +└─ bar + ├─ README.md + ├─ three.md + └─ four.md +``` + +Then, with the following sidebar config: + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + sidebar: { + // sidebar for pages under /foo/ + '/foo/': [ + '', + 'one', + 'two' + ], + // sidebar for pages under /bar/ + '/bar/': [ + '', + 'three', + 'four' + ] + } + } +} +``` + +### Auto Sidebar for Single Pages + +If you wish to automatically generate a sidebar that contains only the header links for the current page, you can use `YAML front matter` on that page: + +``` yaml +--- +sidebar: auto +--- +``` + +### Disabling the Sidebar + +You can disable the sidebar on a specific page with `YAML front matter`: + +``` yaml +--- +sidebar: false +--- +``` + +## Prev / Next Links + +Prev and next links are automatically inferred based on the sidebar order of the active page. You can also explicitly overwrite or disable them using `YAML front matter`: + +``` yaml +--- +prev: ./some-other-page +next: false +--- +``` + +## GitHub Repo and Edit Links + +Providing `themeConfig.repo` auto generates a GitHub link in the navbar and "Edit this page" links at the bottom of each page. + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + // Assumes GitHub. Can also be a full GitLab url. + repo: 'vuejs/vuepress', + // if your docs are not at the root of the repo + docsDir: 'docs', + // optional, defaults to master + docsBranch: 'master', + // defaults to true, set to false to disable + editLinks: true, + // custom text for edit link. Defaults to "Edit this page" + editLinkText: 'Help us improve this page!' + } +} +``` + +## Simple CSS Override + +If you wish to apply simple overrides to the styling of the default theme, you can create an `.vuepress/override.styl` file. This is a [Stylus](http://stylus-lang.com/) file but you can use normal CSS syntax as well. + +There are a few color variables you can tweak: + +``` stylus +// showing default values +$accentColor = #3eaf7c +$textColor = #2c3e50 +$borderColor = #eaecef +$codeBgColor = #282c34 +``` + +## Custom Page Class + +Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with `pageClass` in `YAML front matter`: + +``` yaml +--- +pageClass: custom-page-class +--- +``` + +Then you can write CSS targeting that page only: + +``` css +.theme-container.custom-page-class { + /* page-specific rules */ +} +``` + +## Custom Layout for Specific Pages + +By default the content of each `*.md` file is rendered in a `
` container, along with the sidebar, auto-generated edit links and prev/next links. If you wish to use a completely custom component in place of the page (while only keeping the navbar), you can again specify the component to use using `YAML front matter`: + +``` yaml +--- +layout: SpecialLayout +--- +``` + +This will render `.vuepress/components/SpecialLayout.vue` for the given page. + +## Ejecting + +You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. Note, however, once you eject, you are on your own and won't be receiving future updates or bug fixes to the default theme even if you upgrade VuePress. diff --git a/docs/ko/guide/README.md b/docs/ko/guide/README.md new file mode 100644 index 0000000000..5c68afccc1 --- /dev/null +++ b/docs/ko/guide/README.md @@ -0,0 +1,53 @@ +# 소개 (Introduction) + +VuePress는 뷰 테마 시스템을 포함하는 최소화된 정적 사이트 빌더와 기술문서 작성에 최적화된 기본 테마 두가지를 제공합니다. +VuePress는 Vue 하위의 프로젝트의 문서의 필요성에 의해 만들어졌습니다. + +VuePress에 의해 생성 된 각 페이지는 훌륭한 로딩 성능을 제공하는 사전 렌더링 된 정적 HTML을 가지고 있으며 SEO 친화적입니다. 그러나 페이지가로드되면 Vue는 정적 컨텐츠를 가져와 단일 페이지(SPA)로 변환합니다. 추가 페이지는 사용자가 사이트를 탐색 할 때 가져옵니다. + +## 작동원리 (How It Works) + +VuePress 사이트는 [Vue](http://vuejs.org/), [Vue Router](https://github.com/vuejs/vue-router) 및 [webpack](http://webpack.js.org/)으로 만들어진 SPA입니다. 이전에 Vue를 사용했다면 사용자 정의 테마를 작성하거나 개발할 때 친숙한 개발 경험을 느낄 것입니다 (Vue DevTools를 사용하여 사용자 정의 테마를 디버깅 할 수도 있습니다). + +빌드하는 동안 우리는 서버 렌더링 버전의 앱을 만들고 가상으로 각 경로를 방문하여 해당 HTML을 렌더링합니다. 이 접근법은 [Nuxt](https://nuxtjs.org/)의 `nuxt generate` 명령과 [Gatsby](https://www.gatsbyjs.org/)와 같은 다른 프로젝트에서 영감을 얻었습니다. + +각 마크다운 파일은 [markdown-it](https://github.com/markdown-it/markdown-it)을 사용하여 HTML로 컴파일 된 다음 Vue 구성 요소의 템플릿으로 처리됩니다. 이렇게하면 마크다운 파일에서 Vue를 직접 사용할 수 있으며 동적 내용을 포함해야 할 때 유용합니다. + +## 특징 (Features) + +- 기술 문서에 최적화 된 [내장된 마크다운 익스텐션](./markdown.md) +- [마크다운 파일 내부에서 Vue를 활용할 수있는 능력](./ using-vue.md) +- [Vue에서 제공하는 커스텀 테마 시스템](./custom-themes.md) +- 자동 서비스 작업자 생성 +- Google 애널리틱스 통합 +- 다국어 지원 +- 기본 테마는 다음과 같습니다. + - 반응 형 레이아웃 + - 옵션 홈페이지 + - 간편한 out-of-the-box 헤더 기반 검색 + - 사용자 정의 할 수있는 탐색 표시 줄 및 사이드 바 + - 자동 생성 된 GitHub 링크 및 페이지 편집 링크 + +## 할 것 (Todo) + +VuePress는 아직 진행 중입니다. 현재 지원하지 않지만, 계획되고있는 것이 몇 가지 있습니다. + +- Algolia DocSearch 통합 +- 블로그 지원 + +Contributions을 환영합니다! + + +## Why Not ...? + +### Nuxt + +Nuxt는 VuePress의 기능을 수행 할 수 있지만 응용 프로그램을 작성하기 위해 설계되었습니다. VuePress는 컨텐츠 중심 정적 사이트에 중점을두고 있으며 기술 문서에 맞는 기능을 즉시 제공합니다. + +### Docsify / Docute + +둘 다 훌륭한 프로젝트이며 Vue 지원을 받았습니다. 그들은 둘 다 완벽하게 런타임 구동 및 따라서 SEO 친화적입니다. SEO에 신경 쓰지 않고 의존성 설치를 망설이지 않으려면 여전히 훌륭한 선택입니다. + +### Hexo + +Hexo는 Vue 문서를 잘 서비스하고 있습니다. 사실, 우리의 주요 사이트를 마이그레이션 하는 길은 아직도 깁니다. 가장 큰 문제는 테마 시스템이 매우 정적 문자열 기반 인 것입니다. 레이아웃과 상호 작용 모두에 Vue를 활용하고 싶다고 생각합니다. 또한 Hexo 마크다운 렌더링을 설정하는 것은 유연하지 않습니다. \ No newline at end of file diff --git a/docs/ko/guide/assets.md b/docs/ko/guide/assets.md new file mode 100644 index 0000000000..85c078aa97 --- /dev/null +++ b/docs/ko/guide/assets.md @@ -0,0 +1,50 @@ +# Asset 핸들링 (Asset Handling) + +## 상대 주소 (Relative URLs) + +모든 마크 다운 파일은 Vue 구성 요소로 컴파일되고 webpack에 의해 처리되므로 상대 주소를 사용하여 모든 참조를 이용할 수 있고 선호해야합니다. + +``` md +![An image](./image.png) +``` + +이것은 `*.vue`파일 템플릿과 같은 방식으로 작동됩니다. 이 이미지는 `url-loader` 와 `file-loader` 로 처리되어 생성된 정적 구조의 적절한 위치에 복사됩니다. + +또한'~'접두사를 사용하여 이 모듈이 웹 페이지 모듈 요청임을 명시적으로 나타낼 수 있으므로 웹 페이지 별칭 또는 npm 종속성을 가진 파일로 참조할 수 있습니다: + +``` md +![Image from alias](~@alias/image.png) +![Image from dependency](~some-dependency/image.png) +``` + +webpack 별칭은 `.vuepress / config.js`에서 [configureWebpack](/config/#configurewebpack)을 통해 설정할 수 있습니다: + +``` js +module.exports = { + configureWebpack: { + resolve: { + alias: { + '@alias': 'path/to/some/dir' + } + } + } +} +``` + +## 공용 파일 (Public Files) + +경우에 따라 파비콘이나 PWA 아이콘과 같은 요소는 구성 요소에서 직접 참조되지 않는 정적 파일을 제공해야 할 수도 있습니다. 이 경우 `.vuepress/public` 파일에 넣으면 생성 된 디렉토리의 루트에 복사됩니다. + +## 기반 주소 (Base URL) + +사이트가 루트가 아닌 URL에 배포 된 경우 `.vuepress/config.js`에 `base` 옵션을 설정해야합니다. 예를 들어, 사이트를 `https://foo.github.io/bar/`에 배포하고자 한다면,`base`는 `"/bar/"`로 설정되어야합니다. + +기본 URL을 사용하여 `.vuepress/public` 이미지를 참조하려면 `/bar/image.png`와 같은 URL을 사용해야합니다. 그러나 나중에 `base`를 변경하는 것은 현재로서는 어렵습니다. 이를 돕기 위해 VuePress는 올바른 경로를 생성하는 내장 도우미 `$withBase`를 제공합니다: + +``` vue +foo +``` + +테마 구성 요소뿐만 아니라 귀하의 마크 다운 파일에서도 위의 구문을 사용할 수 있습니다. + +또한`base`가 설정되면 `.vuepress/config.js` 옵션으로 모든 asset URL에 자동으로 추가됩니다. diff --git a/docs/ko/guide/basic-config.md b/docs/ko/guide/basic-config.md new file mode 100644 index 0000000000..0ad75ebfe1 --- /dev/null +++ b/docs/ko/guide/basic-config.md @@ -0,0 +1,37 @@ +# 구성 (Configuration) + +## 설정 파일 (Config File) + +설정을 하지 않으면 페이지가 거의 표시되지 않으며 사용자는 사이트를 탐색할 방법이 없습니다. 사이트를 사용자 커스터마이징 하려면 먼저 docs 디렉토리에`.vuepress` 디렉토리를 만듭니다. 여기에 모든 VuePress 관련 파일이 저장됩니다. + +VuePress 사이트를 구성하는 데 필요한 필수 파일은 `.vuepress/ config.js`이며 JavaScript 객체를 export 해야합니다: + +``` js +module.exports = { + title: 'Hello VuePress', + description: 'Just playing around' +} +``` +개발 서버를 실행 중인 경우 이제 해당 페이지에 제목과 검색 상자가 있는 머리 글이 표시됩니다. VuePress에는 제목, `h2`와 `h3`머리 글에 있는 간단한 검색 색인을 모든 페이지에 자동으로 작성하는 머리 글 기반 검색 기능이 내장되어 있습니다. + +옵션의 전체 목록은 [ConfigReference](../config/)를 참조하십시오. + +## 테마 설정 (Theme Configuration) + +VuePress는 사이트를 위해 사용자에게 권한을 부여할 수 있는 숫자입니다. VuePress 베이스로 전달됩니다 + +[사용자 지정 테마]를 개발하려면 [Custom](./custom-themes.md)을 참조하십시오. + +## 애플리케이션 수준 향상 (App Level Enhancements) + +VuePress 응용 프로그램은 표준 Vue 응용 프로그램이므로 `.vuepress/enhanceApp.js` 파일을 만들어 응용 프로그램 수준 향상을 할 수 있습니다. 파일은 일부 기본 앱 수준 값을 포함하는 객체를 받는 후크(hook) 함수를 `export default`해야합니다. 이 후크를 사용하여 추가 Vue 플러그인을 설치하거나, 전역 설정 요소를 등록하거나, router 후크를 추가 할 수 있습니다: + +``` js +export default ({ + Vue, // the version of Vue being used in the VuePress app + options, // the options for the root Vue instance + router // the router instance for the app +}) => { + // ...apply enhancements to the app +} +``` diff --git a/docs/ko/guide/custom-themes.md b/docs/ko/guide/custom-themes.md new file mode 100644 index 0000000000..c2f75cec45 --- /dev/null +++ b/docs/ko/guide/custom-themes.md @@ -0,0 +1,85 @@ +# Custom Themes + +::: tip +Theme components are subject to the same [browser API access restrictions](./using-vue.md#browser-api-access-restrictions). +::: + +VuePress uses Vue single file components for custom themes. To use a custom layout, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file: + +``` +. +└─ .vuepress +   └─ theme +    └─ Layout.vue +``` + +From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme. + +## Site and Page Metadata + +The `Layout` component will be invoked once for every `.md` file in `docs`, and the metadata for the entire site and that specific page will be exposed respectively as `this.$site` and `this.$page` properties which are injected into every component in the app. + +This is the value of `$site` of this very website: + +``` json +{ + "title": "VuePress", + "description": "Vue-powered Static Site Generator", + "base": "/", + "pages": [ + { + "path": "/", + "title": "VuePress", + "frontmatter": {} + }, + ... + ] +} +``` + +`title`, `description` and `base` are copied from respective fields in `.vuepress/config.js`. `pages` contains an array of metadata objects for each page, including its path, page title (explicitly specified in [YAML front matter](./markdown.html#yaml-front-matter) or inferred from the first header on the page), and any YAML front matter data in that file. + +This is the `$page` object for this page you are looking at: + +``` json +{ + "path": "/custom-themes.html", + "title": "Custom Themes", + "headers": [/* ... */], + "frontmatter": {} +} +``` + +If the user provided `themeConfig` in `.vuepress/config.js`, it will also be available as `$site.themeConfig`. You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with `$site.pages` to dynamically construct navigation links. + +Finally, don't forget that `this.$route` and `this.$router` are also available as part of Vue Router's API. + +## Content Outlet + +The compiled content of the current `.md` file being rendered will be available as a special `` global component. You will need to render it somewhere in your layout in order to display the content of the page. The simplest theme can be just a single `Layout.vue` component with the following content: + +``` html + +``` + +## Using Theme from a Dependency + +Themes can be published on npm in raw Vue SFC format as `vuepress-theme-xxx`. + +To use a theme from an npm dependency, provide a `theme` option in `.vuepress/config.js`: + +``` js +module.exports = { + theme: 'awesome' +} +``` + +VuePress will attempt to locate and use `node_modules/vuepress-theme-awesome/Layout.vue`. + +## Customizing the Default Theme + +The `vuepress eject [targetDir]` command will copy the default theme source code into `.vuepress/theme` to allow complete customization. Note, however, once you eject, you are on your own and won't be receiving future updates or bug fixes to the default theme even if you upgrade VuePress. diff --git a/docs/ko/guide/deploy.md b/docs/ko/guide/deploy.md new file mode 100644 index 0000000000..7b087b4fff --- /dev/null +++ b/docs/ko/guide/deploy.md @@ -0,0 +1,46 @@ +# Deploying + +The following guides assumes you are placing your docs inside the `docs` directory of your project and using the default build output location. + +## GitHub Pages + +1. Set `base` in `.vuepress/config.js` to your repository's name. For example, if your repository is `https://github.com/foo/bar`, the deployed pages will be available at `https://foo.github.io/bar`. In this case, you should set `base` to `"/bar/"`. + +2. Inside your project, run: + +``` bash +# build +vuepress build docs + +# navigate into the build output directory +cd docs/.vuepress/dist + +git init +git add -A +git commit -m 'deploy' + +# push to the gh-pages branch of your repo. +# replace / with your info +git push -f git@github.com:/.git master:gh-pages +``` + +You can run this script in your CI setup to enable automatic deployment on each push. + +## Netlify + +1. Make sure you have npm scripts for building your docs: + +``` json +{ + "scripts": { + "docs:build": "vuepress build docs" + } +} +``` + +2. On Netlify, setup up a new project from GitHub with the following settings: + + - **Build Command:** `npm run docs:build` or `yarn docs:build` + - **Publish directory:** `docs/.vuepress/dist` + +3. Hit the deploy button! diff --git a/docs/ko/guide/getting-started.md b/docs/ko/guide/getting-started.md new file mode 100644 index 0000000000..506c570076 --- /dev/null +++ b/docs/ko/guide/getting-started.md @@ -0,0 +1,66 @@ +# 시작하기 (Getting Started) + +::: warning 호환성 참고 사항 +VuePress requires Node.js >= 8. +::: + +## 전역 설치 (Global Installation) + +VuePress를 가지고 놀고 싶다면 전역 모듈로 설치할 수 있습니다 : + +``` bash +# install globally +yarn global add vuepress # OR npm install -g vuepress + +# create a markdown file +echo '# Hello VuePress' > README.md + +# start writing +vuepress dev + +# build +vuepress build +``` + +## 기존 프로젝트에 설치 (Inside an Existing Project) + +기존 프로젝트가 있고 프로젝트 내에 문서를 보관하려면 VuePress를 로컬 종속성으로 설치해야합니다. 또한 이 설정을 사용하면 설정을 추가하여 Netlify와 같은 서비스나 CI를 사용할 수 있습니다. + +``` bash +# install as a local dependency +yarn add -D vuepress # OR npm install -D vuepress + +# create a docs directory +mkdir docs +# create a markdown file +echo '# Hello VuePress' > docs/README.md +``` + +::: warning +현재 webpack 3.x가 종속되어있는 기존 프로젝트에 VuePress를 설치할 때 npm 대신 [Yarn](https://yarnpkg.com/en/)을 사용하는 것이 좋습니다. 이 경우 Npm은 올바른 종속성 구조를 생성하지 못합니다. +::: + +그리고 `package.json`을 추가합니다: + +``` json +{ + "scripts": { + "docs:dev": "vuepress dev docs", + "docs:build": "vuepress build docs" + } +} +``` + +설정 완료시 아래와 같이 동작시킬 수 있습니다: + +``` bash +yarn docs:dev # OR npm run docs:dev +``` + +정적 문서를 생성하려면 다음을 실행하시면 됩니다: + +``` bash +yarn docs:build # Or npm run docs:build +``` + +기본적으로 빌드 된 파일은`.vuepress / dist`에 있으며`.vuepress / config.js` '의 `dest` 필드를 통해 설정할 수 있습니다. 빌드 된 파일은 모든 정적 파일 서버에 배포 할 수 있습니다. 널리 사용되는 서비스에 대한 지침은 [배포 가이드](./deploy.md)를 참조하십시오. \ No newline at end of file diff --git a/docs/ko/guide/i18n.md b/docs/ko/guide/i18n.md new file mode 100644 index 0000000000..eb6ac4a8cc --- /dev/null +++ b/docs/ko/guide/i18n.md @@ -0,0 +1,82 @@ +# Internationalization + +## Site Level i18n Config + +To leverage multi-language support in VuePress, you first need to use the following file structure: + +``` +/ +├─ README.md +├─ foo.md +├─ /nested/ +│  └─ README.md +└─ /zh/ + ├─ README.md + ├─ foo.md + └─ /zh/nested/ +    └─ README.md +``` + +Then, specify the `locales` option in `.vuepress/config.js`: + +``` js +module.exports = { + locales: { + // The key is the path for the locale to be nested under. + // As a special case, the default locale can use '/' as its path. + '/': { + lang: 'en-US', // this will be set as the lang attribute on + title: 'VuePress', + description: 'Vue-powered Static Site Generator' + }, + '/zh/': { + lang: 'zh-CN', + title: 'VuePress', + description: 'Vue 驱动的静态网站生成器' + } + } +} +``` + +If a locale does not have `title` or `description` VuePress will fallback to the root level values. You can omit the root level `title` and `description` as long as they are provided in each locale. + +## Default Theme i18n Config + +The default theme also has built-in i18n support via `themeConfig.locales`, using the same `{ path: config }` format. Each locale can have its own [nav](../default-theme-config/#navbar-links) and [sidebar](../default-theme-config/#sidebar) config, in addition to a few other text values used across the site: + +``` js +module.exports = { + locales: { /* ... */ }, + themeConfig: { + locales: { + '/': { + // text for the language dropdown + selectText: 'Languages', + // label for this locale in the language dropdown + label: 'English', + // text for the edit-on-github link + editLinkText: 'Edit this page on GitHub', + nav: [ + { text: 'Nested', link: '/nested/' } + ], + sidebar: { + '/': [/* ... */], + '/nested/': [/* ... */] + } + }, + '/zh/': { + selectText: '选择语言', + label: '简体中文', + editLinkText: '在 GitHub 上编辑此页', + nav: [ + { text: '嵌套', link: '/zh/nested/' } + ], + sidebar: { + '/zh/': [/* ... */], + '/zh/nested/': [/* ... */] + } + } + } + } +} +``` diff --git a/docs/ko/guide/markdown.md b/docs/ko/guide/markdown.md new file mode 100644 index 0000000000..aacf601b41 --- /dev/null +++ b/docs/ko/guide/markdown.md @@ -0,0 +1,185 @@ +--- +meta: +- name: keywords + content: static docs generator vue +--- + +# 마크다운 확장 (Markdown Extensions) + +## 헤더 앵커 (Header Anchors) + +헤더는 자동으로 앵커 링크가 적용되도록합니다. 앵커의 렌더링은 [`markdown.anchor`](../config/ #markdownanchor) 옵션을 사용하여 구성됩니다. + +## 링크 (Links) + +- `.md` 또는`.html`로 끝나는 내부 링크는 SPA 탐색을 위해``로 변환됩니다. + + - [Home](/) + - [Configuring Markdown](../config/#markdown) + +- 외부 링크는 자동으로 `target = "_ blank"` 속성을 얻습니다: + + - [vuejs.org](https://vuejs.org) + - [VuePress on GitHub](https://github.com/vuejs/vuepress) + +## YAML Front Matter + +[YAML front matter](https://jekyllrb.com/docs/frontmatter/)는 기본적으로 지원됩니다: + +``` yaml +--- +title: Blogging Like a Hacker +lang: en-US +--- +``` + +데이터는 나머지 페이지와 모든 사용자 정의 및 테마 구성 요소에서 `$page`로 사용할 수 있습니다. + +`title`과 `lang`은 자동으로 현재 페이지에 설정됩니다. 또한 삽입 할 추가 메타 태그를 지정할 수 있습니다: + +``` yaml +--- +meta: + - name: description + content: hello + - name: keywords + content: super duper SEO +--- +``` + +## 깃허브 테이블 스타일 (GitHub-Style Tables) + +**Input** + +``` +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | +``` + +**Output** + +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +## 이모지 (Emoji) + +**Input** + +``` +:tada: :100: +``` + +**Output** + +:tada: :100: + +## 컨텐츠 테이블 (Table of Contents) + +**Input** + +``` +[[toc]] +``` + +**Output** + +[[toc]] + +Rendering of TOC can be configured using the [`markdown.toc`](../config/#markdowntoc) option. + +## 커스텀 컨테이너 (Custom Containers) + +**Input** + +``` +::: tip +This is a tip +::: + +::: warning +This is a warning +::: + +::: danger +This is a dangerous warning +::: +``` + +**Output** + +::: tip +This is a tip +::: + +::: warning +This is a warning +::: + +::: danger +This is a dangerous thing +::: + +You can also customize the title of the block: + +``` +::: danger STOP +Danger zone, do not proceed +::: +``` + +::: danger STOP +Danger zone, do not proceed +::: + +## 코드 블록 하이라이트 (Line Highlighting in Code Blocks) + +**Input** + +```` +``` js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` +```` + +**Output** + +``` js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` + +## 고급 설정 (Advanced Configuration) + +VuePress는 [markdown-it](https://github.com/markdown-it/markdown-it)을 마크 다운 렌더러로 사용합니다. 위의 많은 확장 기능은 맞춤 플러그인을 통해 구현됩니다. `.vuepress/config.js`의 `markdown` 옵션을 사용하여 `markdown-it` 인스턴스를 더 커스터마이징 할 수 있습니다: + +``` js +module.exports = { + markdown: { + // options for markdown-it-anchor + anchor: { permalink: false }, + // options for markdown-it-toc + toc: { includeLevel: [1, 2] }, + config: md => { + // use more markdown-it plugins! + md.use(require('markdown-it-xxx')) + } + } +} +``` diff --git a/docs/ko/guide/using-vue.md b/docs/ko/guide/using-vue.md new file mode 100644 index 0000000000..72137c0a60 --- /dev/null +++ b/docs/ko/guide/using-vue.md @@ -0,0 +1,143 @@ +# Markdown에서 Vue 사용 (Using Vue in Markdown) + +## 브라우저 API액세스 제한 (Browser API Access Restrictions) + +VuePress 응용 프로그램은 정적 빌드를 생성 할 때 Node.js에서 서버 렌더링되므로 Vue 사용은 [범용 코드 요구 사항](https://ssr.vuejs.org/en/universal.html)을 준수해야합니다. 요컨대, `beforeMounted` 또는`mounted` hooks으로 Browser/DOM API에 액세스해야합니다. + +SSR에 친숙하지 않은 구성 요소 (예 : 사용자 지정 지시문 포함)를 사용하거나 데모하는 경우 내장 된 `` 구성 요소에 포함할 수 있습니다: + +``` md + + + +``` + +**가져 오기시** 브라우저 API에 액세스하는 구성 요소 또는 라이브러리가 수정되지 않습니다. 가져 오기시 브라우저 환경을 사용하는 코드를 사용하려면 적절한 라이프 사이클 hooks로 동적으로 가져와야합니다: + +``` vue + +``` + +## 템플릿 (Templating) + +### Interpolation + +각 마크 다운 파일은 먼저 HTML로 컴파일 된 다음 Vue 구성 요소로 `vue-loader`로 전달됩니다. 즉, 텍스트에서 Vue 스타일 Interpolation을 사용할 수 있습니다. + +**Input** + +``` md +{{ 1 + 1 }} +``` + +**Output** + +
{{ 1 + 1 }}
+ +### 지시문 (Directives) + +또한 지시문은 아래와 같이 동작할 수 있습니다: + +**Input** + +``` md +{{ i }} +``` + +**Output** + +
{{ i }} 
+ +### 사이트로 접근 & 페이지 데이터 (Access to Site & Page Data) + +컴파일 된 구성 요소에는 private 데이터가 없지만 [사이트 메타 데이터](./custom-themes.md#site-and-page-metadata)에 대한 액세스 권한은 있습니다. 예 : + +**Input** + +``` md +{{ $page }} +``` + +**Output** + +``` json +{ + "path": "/using-vue.html", + "title": "Using Vue in Markdown", + "frontmatter": {} +} +``` + +## Escaping + +기본적으로 분리 된 코드 블록은`v-pre`로 자동 래핑됩니다. 인라인 코드 스 니펫 또는 일반 텍스트 내에 원시 mustaches 또는 Vue 특정 구문을 표시하려면 `v-pre` 사용자 정의 컨테이너로 단락을 래핑해야합니다: + +**Input** + +``` md +::: v-pre +`{{ This will be displayed as-is }}` +::: +``` + +**Output** + +::: v-pre +`{{ This will be displayed as-is }}` +::: + +## 컴포넌트 사용 (Using Components) + +`.vuepress/components`에있는 `* .vue` 파일은 자동으로 [글로벌](https://vuejs.org/v2/guide/components-registration.html#Global-Registration) [비동기](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) 구성 요소로 등록됩니다. 예 : + +``` +. +└─ .vuepress +   └─ components + ├─ demo-1.vue +     └─ OtherComponent.vue +``` + +모든 markdown 파일에서 구성 요소를 직접 사용할 수 있습니다: + +``` md + + +``` + + + + + +::: warning IMPORTANT +사용자 정의 컴포넌트의 이름이 하이픈을 포함하거나 PascalCase에 있는지 확인하십시오. 그렇지 않으면 인라인 요소로 취급되어`

`태그 안에 싸이게됩니다. +::: + +## 스크립트 & 스타일 Hoisting (Script & Style Hoisting) + +JavaScript 또는 CSS를 현재 페이지에만 적용해야하는 경우가 있습니다. 이 경우 마크 업 파일에 root-level로 `