Skip to content

Commit

Permalink
优化文档代码展示
Browse files Browse the repository at this point in the history
  • Loading branch information
@Franslee
Franslee committed Jan 18, 2019
1 parent a852ebc commit ec612ff
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 65 deletions.
10 changes: 5 additions & 5 deletions docs/international.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ NutUI 2.0 以上版本支持多语言。组件默认使用中文，支持加载

### 引用整个组件库

```js
```javascript
import Vue from 'vue';
import NutUI from '@nutui/nutui';

Expand All @@ -22,7 +22,7 @@ Vue.use(NutUI, {

通过 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 插件，我们可以根据项目需要引用 NutUI 的组件，最终只打包引用的组件，减少引入代码的体积。国际化功能同样支持按需引用的方式。

```js
```javascript
import Vue from 'vue';
import {locale} from '@nutui/nutui';

Expand All @@ -47,7 +47,7 @@ locale('en-US', enUS);

## 兼容 vue-i18n

```js
```javascript
import VueI18n from 'vue-i18n';
import enUS from '@nutui/nutui/dist/locales/lang/en-US';

Expand All @@ -73,7 +73,7 @@ const app = new Vue({

使用 **vue-i18n** 时，可以通过调用 **$t** 方法来对某个位置做国际化支持的语言切换。我们也可以调用 NutUI 内置的语言切换方法 **nutTranslate** 来实现相同功能，而且还支持非常灵活的模板化传参方式。我们可以通过 **mixin** 将该语言切换方法混入到每个组件的 **methods**，方便直接调用。

```js
```javascript
import Vue from 'vue';
import {i18n} from '@nutui/nutui';

Expand All @@ -93,7 +93,7 @@ Vue.mixin({

一般来说，要实现全面的国际化，我们还需要将用户自己的语言包与组件库的语言包进行合并。

```js
```javascript
import Vue from 'vue';
import {locale} from '@nutui/nutui';
import enUS from '@nutui/nutui/dist/locales/lang/en-US';
Expand Down
2 changes: 1 addition & 1 deletion docs/theme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $dark-color: #DADADA;

修改 webpack 配置文件中 **sass-loader** 的配置。在 **options** 的 **data** 属性值中，先后 import 你自定义的 SCSS 文件（如 `custom.scss`）和 NutUI 的样式变量配置文件（路径为 **dist/styles/variable.scss**）。

```js
```javascript
{
test: /\.(sa|sc)ss$/,
use: [
Expand Down
126 changes: 78 additions & 48 deletions scripts/mdToVue.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const fs = require('fs');
var path = require('path');
let marked = require('marked');
let package =require("../package.json") ;
let package = require("../package.json");
if (!marked) {
console.log('you need npm i marked -D!');
}
Expand Down Expand Up @@ -40,33 +40,35 @@ let jsroot = `<script>export default {
}
},
mounted(){
let that = this;
let pre = document.querySelectorAll('pre');
for(let i=0,item;item = pre[i];i++){
item.classList.toggle('prettyprint');
let creatC = document.createElement('i');
creatC.setAttribute('copy','copy');
creatC.setAttribute('data-clipboard-action','copy');
creatC.setAttribute('data-clipboard-target','code');
creatC.setAttribute('class','copy')
let creatA = document.createElement('i');
creatA.setAttribute('toast','toast');
item.appendChild(creatC);
item.appendChild(creatA);
}
//let that = this;
//let pre = document.querySelectorAll('pre');
// for(let i=0,item;item = pre[i];i++){
// item.classList.toggle('prettyprint');
// let creatC = document.createElement('i');
// creatC.setAttribute('copy','copy');
// creatC.setAttribute('data-clipboard-action','copy');
// creatC.setAttribute('data-clipboard-target','code');
// creatC.setAttribute('class','copy')
// let creatA = document.createElement('i');
// creatA.setAttribute('toast','toast');
// item.appendChild(creatC);
// item.appendChild(creatA);
// }
let copy = this.copy;
new copy('.copy',{
target:res => {
return res.previousElementSibling
}
});
let demourl = 'https://nutui.jd.com/demo.html#'+that.$route.path;
this.$nextTick(()=>{
let copy = this.copy;
new copy('.copy',{
target:res => {
return res.previousElementSibling
}
});
let demourl = 'https://nutui.jd.com/demo.html#'+this.$route.path;
this.demourl = demourl;
this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
that.codeurl = url
})
this.demourl = demourl;
this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
this.codeurl = url
});
});
}
}
</script>`;
Expand All @@ -76,7 +78,7 @@ let jsroot = `<script>export default {
*/
function insert(sorce) {
var insert = sorce.indexOf('</h1>');

if (insert > -1) {
return sorce.substring(0, insert) + '<i class="qrcode"><a :href="demourl"><span>请使用手机扫码体验</span><img :src="codeurl" alt=""></a></i>' + sorce.substring(insert, sorce.length);
} else {
Expand All @@ -91,27 +93,26 @@ function insert(sorce) {
* @param {string} sorce 文件源
* @param {boole} ishasCode 是否需要二维码
*/
function createdFile(output, sorce,ishasCode) {
function createdFile(output, sorce, ishasCode) {
var pathSrc = output;
sorce = sorce.replace(/@latest/g,'@'+package.version)
if(!ishasCode){

if (!ishasCode) {
var res = insert(sorce);
} else{
var res = sorce;
} else {
var res = sorce;
}
fs.open(pathSrc, "w+", (err, fd) => {
var bufs = `<template><div @click="dsCode">
<div v-if="content" class="layer">
<span class="close-box" @click="closelayer"></span>
<div v-html="content"></div>
<pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
</div>`+ res + '</div></template>' + jsroot;
var buf = new Buffer(bufs);
if( typeof fd == 'number'){
if (typeof fd == 'number') {
fs.writeSync(fd, buf, 0, buf.length, 0);
}else{
console.log(pathSrc,' typeof fd ！= number 请改正文件')
}
} else {
console.log(pathSrc, ' typeof fd ！= number 请改正文件')
}

})
}
/**
Expand All @@ -120,8 +121,37 @@ function createdFile(output, sorce,ishasCode) {
* @param {*} outPath 输出路径
* @param {*} nohead 是否有头文件
*/
function fileDisplay(filePath,outPath,nohead) {
function fileDisplay(filePath, outPath, nohead) {
var rendererMd = new marked.Renderer();

rendererMd.code = function (code, infostring, escaped) {
var lang = (infostring || '').match(/\S*/)[0];
if (this.options.highlight) {
var out = this.options.highlight(code, lang);
if (out != null && out !== code) {
escaped = true;
code = out;
}
}

if (!lang) {
return '<pre><code>'
+ (escaped ? code : escape(code, true))
+ '</code></pre>';
}

if (lang === 'html') {
code = code.replace(/@latest/g, '@' + package.version)
}

return '<pre class="prettyprint"><span class="lang">' + lang + '</span><code class="'
+ this.options.langPrefix
+ escape(lang, true)
+ '">'
+ (escaped ? code : escape(code, true))
+ '</code><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre>\n';
};

marked.setOptions({
renderer: rendererMd,
highlight: function (code) {
Expand All @@ -140,7 +170,7 @@ function fileDisplay(filePath,outPath,nohead) {
fs.stat(filedir, (err, stats) => {
if (!err) {
if (stats.isDirectory()) {
fileDisplay(filedir,outPath,nohead)
fileDisplay(filedir, outPath, nohead)
} else {
//判断文件类型是否是md文件
if (/.md$/.test(filedir)) {
Expand All @@ -159,13 +189,13 @@ function fileDisplay(filePath,outPath,nohead) {
}
let newName = fileNames.reverse().join('').split('-');
let resName = '';
if(newName.indexOf('doc')>-1){
if (newName.indexOf('doc') > -1) {
resName = newName[newName.length - 2]
}else{
} else {
resName = newName[newName.length - 1]
}
createdFile(outPath + '/' + resName + '.vue', html,nohead)

createdFile(outPath + '/' + resName + '.vue', html, nohead)
});
//文件监听
let fsWatcher = fs.watchFile(filedir, {
Expand All @@ -177,7 +207,7 @@ function fileDisplay(filePath,outPath,nohead) {
let html = marked(data);
let filedirarry = filedir.split('/');
let fileNames = filedirarry[filedirarry.length - 2];
createdFile(outPath + '/' + fileNames + '.vue', html,nohead)
createdFile(outPath + '/' + fileNames + '.vue', html, nohead)
});
});
}
Expand All @@ -190,9 +220,9 @@ function fileDisplay(filePath,outPath,nohead) {
}
//md转 其他格式类型
function MdToHtml(commomOption) {
// commomOption = options;
// commomOption = options;
//获取所有的md 转html的结果
fileDisplay(commomOption.entry,commomOption.output,commomOption.nohead);
fileDisplay(commomOption.entry, commomOption.output, commomOption.nohead);
}
MdToHtml.prototype.apply = function (compiler) {
// console.log(compiler,'lls')
Expand Down
36 changes: 27 additions & 9 deletions sites/doc/asset/css/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,12 @@ pre {
position: relative;
max-width: 100%;
overflow: auto;
&>i {
.code-wrapper{
width:100%;
overflow:auto;
}
[toast="toast"],
[copy="copy"] {
cursor: pointer;
position: absolute;
top: 10px;
Expand Down Expand Up @@ -173,10 +178,21 @@ pre {
}
} // 代码显示
pre {
position: relative;
background: #F2F4F5;
border-radius: 4px;
border: none;
padding: 20px;
&>span {
position: absolute;
right: 5px;
bottom: 5px;
font-style: italic;
font-size: 12px;
color: #999;
text-shadow: 1px 1px #FFF;
user-select: none;
}
}

.kwd {
Expand Down Expand Up @@ -219,28 +235,30 @@ pre {
color: #fff;
font-size: 24px;
position: absolute;
top: 25px;
top: 10px;
right: 14px;
z-index: 30;
width: 28px;
height: 28px;
width: 16px;
height: 16px;
background: url(../css/i/close.png) no-repeat center;
background-size: cover;
cursor: pointer;
&:hover {
background: #D5E5FF url(../css/i/close.png) no-repeat center;
background-color: #D5E5FF;
background-image: url(../css/i/close.png);
}
}
[toast="toast"] {
display: none;
}
pre {
background: none;
padding: 50px 100px 30px 30px;
padding: 0 30px;
max-width: 100%;
max-height: 800px;
overflow: auto;
[copy="copy"] {
right: 47px;
&>i,.lang {
display: none;
}
} // .kwd{
// color:#ffb560;;
Expand Down Expand Up @@ -270,6 +288,6 @@ pre {

pre.prettyprint {
code {
font: 14px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font: 13px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
}
6 changes: 4 additions & 2 deletions sites/doc/asset/css/style-blue.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
}
p {
font-size: 14px;
line-height: 1.8;
margin: 10px 0;
}
h1+p,
Expand Down Expand Up @@ -122,9 +123,10 @@
background: #F7F7F7;
border: 1px solid #ECECEC;
border-radius: 2px;
font-size: 12px;
font-size: 13px;
line-height: 1;
color: #3F536E;
padding: 5px 5px;
padding: 3px 5px;
margin: 0 5px;
}
}
Expand Down

0 comments on commit ec612ff

Please sign in to comment.