├── .babelrc ├── .env.development ├── .env.production ├── .gitignore ├── README.md ├── babel.config.js ├── console.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── api │ └── boutique │ │ └── index.js ├── assets │ ├── css │ │ ├── common.css │ │ └── fontAwesome.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── img │ │ ├── boutique │ │ │ ├── chartList │ │ │ │ ├── Canvas.jpg │ │ │ │ ├── D3.png │ │ │ │ ├── HighCharts.svg │ │ │ │ ├── Threejs.png │ │ │ │ ├── awesomes.png │ │ │ │ ├── echarts.jpeg │ │ │ │ ├── vcharts.png │ │ │ │ └── vueCharts.png │ │ │ ├── uiList │ │ │ │ ├── AntDesignUI.svg │ │ │ │ ├── BootstrapUi.jpg │ │ │ │ ├── ElementUi.svg │ │ │ │ ├── MUi.png │ │ │ │ ├── MintUI.svg │ │ │ │ ├── UniAppUi.png │ │ │ │ ├── VantUI.png │ │ │ │ ├── WeUI.jpg │ │ │ │ ├── iViewUi.png │ │ │ │ └── viewUi.png │ │ │ └── websiteList │ │ │ │ ├── awesomes.png │ │ │ │ ├── juejin.png │ │ │ │ ├── kancloud.png │ │ │ │ ├── runoob.png │ │ │ │ ├── w3cplus.png │ │ │ │ └── w3school.png │ │ └── logo │ │ │ ├── github.png │ │ │ ├── max-logo.png │ │ │ └── min-logo.png │ ├── less │ │ ├── common │ │ │ ├── index.less │ │ │ └── layerIndex.less │ │ ├── index.less │ │ └── mixins │ │ │ ├── color.less │ │ │ └── index.less │ └── sounds │ │ └── ping.mp3 ├── components │ ├── article │ │ ├── article-comment.vue │ │ ├── article-detail.vue │ │ ├── article-list.vue │ │ └── article-typetag.vue │ ├── booklet │ │ ├── booklet-detail.vue │ │ └── booklet-list.vue │ ├── boutique │ │ └── boutique-list.vue │ ├── frame │ │ ├── child.vue │ │ ├── home.vue │ │ ├── index.vue │ │ └── mixins.js │ ├── header │ │ ├── header-bar.vue │ │ ├── header-editor.vue │ │ ├── header-logo.vue │ │ ├── header-nav.vue │ │ ├── header-search.vue │ │ ├── header-user.vue │ │ ├── index.vue │ │ └── mixins.js │ ├── icon │ │ └── icon-fa.vue │ ├── markdown │ │ ├── components │ │ │ ├── mdAutoTextarea.vue │ │ │ ├── mdToolbarLeft.vue │ │ │ └── mdToolbarRight.vue │ │ ├── lib │ │ │ ├── config.js │ │ │ ├── core │ │ │ │ ├── extra-function.js │ │ │ │ ├── highlight.js │ │ │ │ ├── hljs │ │ │ │ │ ├── lang.hljs.css.js │ │ │ │ │ └── lang.hljs.js │ │ │ │ ├── keydown-listen.js │ │ │ │ ├── markdown.js │ │ │ │ ├── onecolumn-event.js │ │ │ │ └── to-markdown.js │ │ │ ├── css │ │ │ │ ├── markdown.css │ │ │ │ ├── mavon-editor.styl │ │ │ │ ├── md.css │ │ │ │ └── scroll.styl │ │ │ ├── lang │ │ │ │ ├── en │ │ │ │ │ ├── help_en.md │ │ │ │ │ └── words_en.json │ │ │ │ ├── zh-CN │ │ │ │ │ ├── help_zh-CN.md │ │ │ │ │ └── words_zh-CN.json │ │ │ │ └── zh-TW │ │ │ │ │ ├── help_zh-TW.md │ │ │ │ │ └── words_zh-TW.json │ │ │ ├── mixins │ │ │ │ ├── markdown.js │ │ │ │ └── mdMixins.js │ │ │ ├── toolbar_left_click.js │ │ │ ├── toolbar_right_click.js │ │ │ └── util.js │ │ ├── markdown-editor.vue │ │ └── markdown-preview.vue │ ├── navbar │ │ ├── nav-article.vue │ │ ├── nav-button.vue │ │ └── nav-child.vue │ ├── sidebar │ │ ├── sidebar-article.vue │ │ ├── sidebar-booklet.vue │ │ ├── sidebar-box.vue │ │ ├── sidebar-tags.vue │ │ ├── sidebar-topics.vue │ │ ├── sidebar-user.vue │ │ └── sidebar-userlist.vue │ ├── topics │ │ ├── topics-detail.vue │ │ └── topics-list.vue │ └── user │ │ └── user-logo.vue ├── dictionary │ ├── boutique │ │ ├── chartsList.js │ │ ├── uiList.js │ │ └── websiteList.js │ └── navData.js ├── libs │ ├── test.js │ └── viewScroll.js ├── main.js ├── markdownFile │ └── test.md ├── router │ ├── getRouter.js │ ├── index.js │ └── routers.js ├── store │ ├── index.js │ └── modules │ │ └── nav.js └── views │ ├── article │ ├── articleDetails.vue │ ├── articleEditor.vue │ ├── articlerDafts.vue │ └── index.vue │ ├── booklet │ ├── bookDetail.vue │ └── index.vue │ ├── boutique │ └── index.vue │ ├── topics │ ├── index.vue │ └── topicsDetails.vue │ └── use │ └── index.vue └── vue.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | [ 4 | "import", 5 | { 6 | "libraryName": "view-design", 7 | "libraryDirectory": "src/components" 8 | } 9 | ] 10 | ] 11 | } -------------------------------------------------------------------------------- /.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'development' 2 | VUE_APP_CURRENTMODE = 'joint' 3 | VUE_APP_CURRENTMODE_NAME = 'jointDev' 4 | VUE_APP_CURRENTMODE_CHNAME = '运行环境--->>>【线上】联调环境' 5 | outputDir = './dist/joint-dev' 6 | -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' 2 | VUE_APP_CURRENTMODE = 'onLine' 3 | VUE_APP_CURRENTMODE_NAME = 'onLineBuild' 4 | VUE_APP_CURRENTMODE_CHNAME = '打包环境--->>>【线上】环境打包' 5 | outputDir = './dist/onLine-build' 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

8 | vue-blog 9 |

一个模仿掘金的博客,自适应Pc端+手机端，基于vue-cli3+搭建，喜欢的话，欢迎star

10 | 11 | 12 | ## 相关链接 13 | - [gitHub地址-Vue版本](https://github.com/maxiaoqu/vue-blog) 14 | - [gitHub地址-React版本](https://github.com/maxiaoqu/react-blog) 15 | - [案例地址](http://github.maxiaoqu.com/vue-blog/) 16 | 17 | ## 主要维护人员 18 | |人员|github账号|头像|作者博客|作者网站|联系邮箱| 19 | |---|---|---|---|---|---| 20 | |码小趣|[maxiaoqu](https://github.com/maxiaoqu) | ![](https://avatars1.githubusercontent.com/u/25891598?s=60&v=4)|http://blog.maxiaoqu.com|http://www.maxiaoqu.com|maxiaoqu@gmail.com 21 | 22 | ## 使用技术 23 | - vue 24 | - vuex 25 | - vue-router 26 | - vue-cli3 27 | - TypeScript 28 | - ES5\ES6 29 | - scss\sass 30 | - Oidc 31 | 32 | 33 | ## 安装 34 | ``` 35 | npm install 36 | ``` 37 | 38 | ## 运行 39 | ``` 40 | npm run serve 41 | ``` 42 | 43 | ## 打包 44 | ``` 45 | npm run build 46 | ``` 47 | 48 | ## 检查 49 | ``` 50 | npm run lint 51 | ``` 52 | 53 | ## 文件结构 54 | ```shell 55 | ├── public...........................打包所需静态资源 56 | └── src..............................存放文件的相关目录 57 | ├── assets.......................项目静态资源 58 | ├── components...................模板组件 59 | ├── dictionary...................字典匹配库 60 | ├── libs.........................公用的方法库 61 | ├── router.......................路由文件 62 | ├── store........................vuex状态管理 63 | ├── view.........................vue页面文件 64 | ├── APP.vue......................app.vue文件 65 | └── main.js......................vue相关配置 66 | ``` -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /console.js: -------------------------------------------------------------------------------- 1 | const packages = require('./package.json'); 2 | const currentModeCHName = process.env.VUE_APP_CURRENTMODE_CHNAME; 3 | 4 | const processCHNmae = currentModeCHName; 5 | const consoleInfo = { 6 | mxq: ` 7 | ************************************************************************ 8 | ************************************************************************ 9 | mmmmmmm mmmmmmm xxxxxxx xxxxxxx qqqqqqqqq qqqqq 10 | mm:::::::m m:::::::mm x:::::x x:::::x q:::::::::qqq::::q 11 | m::::::::::mm::::::::::m x:::::x x:::::x q:::::::::::::::::q 12 | m::::::::::::::::::::::m x:::::xx:::::x q::::::qqqqq::::::qq 13 | m:::::mmm::::::mmm:::::m x::::::::::x q:::::q q:::::q 14 | m::::m m::::m m::::m x::::::::x q:::::q q:::::q 15 | m::::m m::::m m::::m x::::::::x q:::::q q:::::q 16 | m::::m m::::m m::::m x::::::::::x q::::::q q:::::q 17 | m::::m m::::m m::::m x:::::xx:::::x q:::::::qqqqq:::::q 18 | m::::m m::::m m::::m x:::::x x:::::x q::::::::::::::::q 19 | m::::m m::::m m::::m x:::::x x:::::x qq::::::::::::::q 20 | mmmmmm mmmmmm mmmmmmxxxxxxx xxxxxxx qqqqqqqq::::::q 21 | q:::::q 22 | q:::::q 23 | q:::::::q 24 | q:::::::q 25 | q:::::::q 26 | qqqqqqqqq 27 | ............................................. 28 | ${packages.projectName} V${packages.version} 29 | 30 | 目前您处于：${processCHNmae} 31 | 32 | 开开心心敲代码 高高兴兴改BUG 33 | 34 | ************************************************************************ 35 | ************************************************************************`, 36 | fozu: ` 37 | ************************************************************************ 38 | ************************************************************************ 39 | _ooOoo_ 40 | o8888888o 41 | 88" . "88 42 | (| -_- |) 43 | O\\ = /O 44 | ____/\`---'\\____ 45 | . ' \\\\| |// \`. 46 | / \\\\||| : |||// \\ 47 | / _||||| -:- |||||- \\ 48 | | | \\\\\\ - /// | | 49 | | \\_| ''\\---/'' | | 50 | \\ .-\\__ \`-\` ___/-. / 51 | ___\`. .' /--.--\\ \`. . __ 52 | ."" '< \`.___\\_<|>_/___.' >'"". 53 | | | : \`- \\\`.;\`\\ _ /\`;.\`/ - \` : | | 54 | \\ \\ \`-. \\_ __\\ /__ _/ .-\` / / 55 | ======\`-.____\`-.___\\_____/___.-\`____.-'====== 56 | \`=---=' 57 | ............................................. 58 | ${packages.projectName} V${packages.version} 59 | 60 | 目前您处于：${processCHNmae} 61 | 62 | 佛祖保佑 永无BUG 63 | ************************************************************************ 64 | ************************************************************************`, 65 | jianpan: ` 66 | ************************************************************************ 67 | ************************************************************************ 68 | ┌─────────────────────────────────────────────────────────────┐ 69 | │┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐│ 70 | ││Esc│!1 │@2 │#3 │$4 │%5 │^6 │&7 │*8 │(9 │)0 │_- │+= │|\\ │\`~ ││ 71 | │├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───┤│ 72 | ││ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{[ │}] │ BS ││ 73 | │├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤│ 74 | ││ Ctrl │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter ││ 75 | │├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────┬───┤│ 76 | ││ Shift │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│Shift │Fn ││ 77 | │└─────┬──┴┬──┴──┬┴───┴───┴───┴───┴───┴──┬┴───┴┬──┴┬─────┴───┘│ 78 | │ │Fn │ Alt │ Space │ Alt │Win│ HHKB │ 79 | │ └───┴─────┴───────────────────────┴─────┴───┘ │ 80 | └─────────────────────────────────────────────────────────────┘ 81 | ............................................. 82 | ${packages.projectName} V${packages.version} 83 | 84 | 目前您处于：${processCHNmae} 85 | 86 | Happy Hacking auto coding 87 | ************************************************************************ 88 | ************************************************************************`, 89 | girl: ` 90 | ************************************************************************ 91 | ************************************************************************ 92 | .ヘヽ.　　　　/　,ー､ 〉 93 | 　　　　　＼ ', !-─‐-i　/　/´ 94 | 　　　 　 ／｀ｰ'　　　 L/／｀ヽ､ 95 | 　　 　 /　 ／,　 /|　 ,　 ,　　　 ', 96 | 　　　ｲ 　/ /-‐/　ｉ　L_ ﾊ ヽ!　 i 97 | 　　　 ﾚ ﾍ 7ｲ｀ﾄ　 ﾚ'ｧ-ﾄ､!ハ|　 | 98 | 　　　　 !,/7 '0'　　 ´0iソ| 　 |　　　 99 | 　　　　 |.从"　　_　　 ,,,, / |./ 　 | 100 | 　　　　 ﾚ'| i＞.､,,__　_,.イ / 　.i 　| 101 | 　　　　　 ﾚ'| | / k_７_/ﾚ'ヽ,　ﾊ.　| 102 | 　　　　　　 | |/i 〈|/　 i　,.ﾍ |　i　| 103 | 　　　　　　.|/ /　ｉ： 　 ﾍ!　　＼　| 104 | 　　　 　 　 kヽ>､ﾊ 　 _,.ﾍ､ 　 /､! 105 | 　　　　　　 !'〈//｀Ｔ´', ＼ ｀'7'ｰr' 106 | 　　　　　　 ﾚ'ヽL__|___i,___,ンﾚ|ノ 107 | 　　　　　 　　　ﾄ-,/　|___./ 108 | 　　　　　 　　　'ｰ'　　!_,.: 109 | ............................................. 110 | ${packages.projectName} V${packages.version} 111 | 112 | 目前您处于：${processCHNmae} 113 | 114 | Happy Hacking auto coding 115 | ************************************************************************ 116 | ************************************************************************` 117 | }; 118 | console.info(consoleInfo.girl); 119 | 120 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog.maxiaoqu.com", 3 | "projectName": "码小趣-博客", 4 | "version": "1.0.0", 5 | "private": true, 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "markdown-it": "^10.0.0", 13 | "markdown-it-abbr": "^1.0.4", 14 | "markdown-it-container": "^2.0.0", 15 | "markdown-it-deflist": "^2.0.3", 16 | "markdown-it-emoji": "^1.4.0", 17 | "markdown-it-footnote": "^3.0.2", 18 | "markdown-it-highlightjs-external": "^1.0.1", 19 | "markdown-it-images-preview": "^1.0.1", 20 | "markdown-it-ins": "^3.0.0", 21 | "markdown-it-katex-external": "^1.0.0", 22 | "markdown-it-mark": "^3.0.0", 23 | "markdown-it-sub": "^1.0.0", 24 | "markdown-it-sup": "^1.0.0", 25 | "markdown-it-task-lists": "^2.1.1", 26 | "markdown-it-toc": "^1.1.0", 27 | "view-design": "^4.1.3", 28 | "vue": "^2.6.10", 29 | "vue-router": "^3.1.3", 30 | "vuex": "^3.1.2", 31 | "xss": "^1.0.6" 32 | }, 33 | "devDependencies": { 34 | "@vue/cli-plugin-babel": "^4.1.0", 35 | "@vue/cli-plugin-eslint": "^4.1.0", 36 | "@vue/cli-service": "^4.1.0", 37 | "babel-eslint": "^10.0.3", 38 | "babel-plugin-import": "^1.13.0", 39 | "css-loader": "^3.5.2", 40 | "eslint": "^5.16.0", 41 | "eslint-plugin-vue": "^5.0.0", 42 | "less": "^3.10.3", 43 | "less-loader": "^5.0.0", 44 | "raw-loader": "^4.0.1", 45 | "style-loader": "^1.0.1", 46 | "stylus": "^0.54.7", 47 | "stylus-loader": "^3.0.2", 48 | "vue-template-compiler": "^2.6.10" 49 | }, 50 | "eslintConfig": { 51 | "root": true, 52 | "env": { 53 | "node": true 54 | }, 55 | "extends": [ 56 | "plugin:vue/essential", 57 | "eslint:recommended" 58 | ], 59 | "rules": {}, 60 | "parserOptions": { 61 | "parser": "babel-eslint" 62 | } 63 | }, 64 | "browserslist": [ 65 | "> 1%", 66 | "last 2 versions" 67 | ] 68 | } 69 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 码小趣-博客首页 10 | 11 | 12 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 54 | 55 | 83 | -------------------------------------------------------------------------------- /src/api/boutique/index.js: -------------------------------------------------------------------------------- 1 | import {uiList} from "../../dictionary/boutique/uiList"; 2 | import {chartsList} from "../../dictionary/boutique/chartsList"; 3 | import {websiteList} from "../../dictionary/boutique/websiteList"; 4 | 5 | // 获取精品推荐列表数据 6 | export const getBoutiqueList = (classify) => { 7 | if(classify == 'ui'){ 8 | return uiList(); 9 | }else if(classify == 'charts'){ 10 | return chartsList(); 11 | }else if(classify == 'website'){ 12 | return websiteList(); 13 | }else{ 14 | return []; 15 | } 16 | } -------------------------------------------------------------------------------- /src/assets/css/common.css: -------------------------------------------------------------------------------- 1 | * {margin: 0;padding: 0;cursor: pointer;} 2 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form,fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 3 | body, button, input, select, textarea { font-size: 14px; } 4 | h1, h2, h3, h4, h5, h6{ font-size:100%; } 5 | address, cite, dfn, em, var { font-style:normal; } 6 | code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 7 | small{ font-size:12px; } 8 | ul, ol { list-style:none; } 9 | a { text-decoration:none; } 10 | a:hover { text-decoration:underline; } 11 | sup { vertical-align:text-top; } 12 | sub{ vertical-align:text-bottom; } 13 | legend { color:#000; } 14 | fieldset, img { border:0; } 15 | button, input, select, textarea { font-size:100%; } 16 | table { border-collapse:collapse; border-spacing:0; } 17 | -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/Canvas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/Canvas.jpg -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/D3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/D3.png -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/HighCharts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/Threejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/Threejs.png -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/awesomes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/awesomes.png -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/echarts.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/echarts.jpeg -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/vcharts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/vcharts.png -------------------------------------------------------------------------------- /src/assets/img/boutique/chartList/vueCharts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/chartList/vueCharts.png -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/AntDesignUI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 28 Copy 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 42 | 43 | -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/BootstrapUi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/BootstrapUi.jpg -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/ElementUi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape Copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/MUi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/MUi.png -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/MintUI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 绿叶@1x 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/UniAppUi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/UniAppUi.png -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/VantUI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/VantUI.png -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/WeUI.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/WeUI.jpg -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/iViewUi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/iViewUi.png -------------------------------------------------------------------------------- /src/assets/img/boutique/uiList/viewUi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/uiList/viewUi.png -------------------------------------------------------------------------------- /src/assets/img/boutique/websiteList/awesomes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/websiteList/awesomes.png -------------------------------------------------------------------------------- /src/assets/img/boutique/websiteList/juejin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/websiteList/juejin.png -------------------------------------------------------------------------------- /src/assets/img/boutique/websiteList/kancloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/websiteList/kancloud.png -------------------------------------------------------------------------------- /src/assets/img/boutique/websiteList/runoob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/websiteList/runoob.png -------------------------------------------------------------------------------- /src/assets/img/boutique/websiteList/w3cplus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/websiteList/w3cplus.png -------------------------------------------------------------------------------- /src/assets/img/boutique/websiteList/w3school.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/boutique/websiteList/w3school.png -------------------------------------------------------------------------------- /src/assets/img/logo/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/logo/github.png -------------------------------------------------------------------------------- /src/assets/img/logo/max-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/logo/max-logo.png -------------------------------------------------------------------------------- /src/assets/img/logo/min-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/img/logo/min-logo.png -------------------------------------------------------------------------------- /src/assets/less/common/index.less: -------------------------------------------------------------------------------- 1 | @import "layerIndex"; 2 | -------------------------------------------------------------------------------- /src/assets/less/common/layerIndex.less: -------------------------------------------------------------------------------- 1 | .frame-pege { 2 | max-width: 960px; 3 | min-height: 100%; 4 | position: relative; 5 | margin: 0 auto; 6 | padding-bottom: 60px; 7 | 8 | &-box { 9 | width: 100%; 10 | margin-top: 20px; 11 | } 12 | 13 | &-boxi { 14 | width: 100%; 15 | margin-top: 60px; 16 | } 17 | } 18 | 19 | .page { 20 | width: 100%; 21 | height: 100%; 22 | background: transparent; 23 | 24 | &-list { 25 | width: 700px; 26 | background: #ffffff; 27 | margin-right: 260px; 28 | border-radius: 2px; 29 | } 30 | 31 | &-sidebar { 32 | margin-left: 20px; 33 | width: 240px; 34 | position: absolute; 35 | top: 120px; 36 | right: 0; 37 | padding-bottom: 60px; 38 | } 39 | 40 | &-sidebarx { 41 | margin-left: 20px; 42 | width: 240px; 43 | position: absolute; 44 | top: 80px; 45 | right: 0; 46 | padding-bottom: 60px; 47 | } 48 | 49 | &-recommend { 50 | width: 700px; 51 | background: #ffffff; 52 | } 53 | } 54 | 55 | @media (max-width: 960px) { 56 | .page { 57 | &-list, &-recommend { 58 | width: 100%; 59 | } 60 | 61 | &-sidebar, &-sidebarx { 62 | display: none; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /src/assets/less/index.less: -------------------------------------------------------------------------------- 1 | @import "./mixins/index"; 2 | @import "./common/index"; -------------------------------------------------------------------------------- /src/assets/less/mixins/color.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/less/mixins/color.less -------------------------------------------------------------------------------- /src/assets/less/mixins/index.less: -------------------------------------------------------------------------------- 1 | @import "color"; 2 | -------------------------------------------------------------------------------- /src/assets/sounds/ping.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxiaoqu/vue-blog/eff21e8a4522ac3429f966ac04d85231de190875/src/assets/sounds/ping.mp3 -------------------------------------------------------------------------------- /src/components/article/article-detail.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/article/article-typetag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/booklet/booklet-detail.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 56 | 57 | -------------------------------------------------------------------------------- /src/components/booklet/booklet-list.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/boutique/boutique-list.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/frame/child.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 32 | -------------------------------------------------------------------------------- /src/components/frame/home.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | -------------------------------------------------------------------------------- /src/components/frame/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/frame/mixins.js: -------------------------------------------------------------------------------- 1 | import {mapActions} from "vuex"; 2 | import {getAttriHeight, scrollTopNum, scrollToTop} from "../../libs/viewScroll"; 3 | import {getNavClassifyData} from "../../dictionary/navData"; 4 | 5 | export const frameMixins = { 6 | data() { 7 | return { 8 | startNum: 0, 9 | iScroll: 0, 10 | isUpRoll: false, 11 | isScrolling: false, 12 | sidebarHeight: 0, 13 | classifyData: [] 14 | } 15 | }, 16 | mounted() { 17 | let _this = this; 18 | this.$nextTick(() => { 19 | window.addEventListener('scroll', _this.handleScroll, true); 20 | scrollToTop(); 21 | this.getCategoryClassify(); 22 | }) 23 | }, 24 | methods: { 25 | ...mapActions([ 26 | 'setNavClassify' 27 | ]), 28 | // 监听（绑定）滚轮 滚动事件 29 | handleScroll() { 30 | // 页面滚动距顶部距离 31 | let scrollTop = scrollTopNum(), 32 | scrollDiffere = scrollTop - this.iScroll; 33 | this.iScroll = scrollTop; 34 | this.isScrolling = true; 35 | let sidebar = document.getElementById('sidebar'); 36 | this.sidebarHeight = getAttriHeight(sidebar); 37 | if (this.startNum == 0) { 38 | this.isUpRoll = false; 39 | this.startNum++; 40 | } else { 41 | if (scrollDiffere < -20) { 42 | this.isUpRoll = false; // 向上滚动 43 | } else if (scrollDiffere > 20) { 44 | this.isUpRoll = true; // 向下滚动 45 | } 46 | } 47 | // 计划滚动是右侧的显示问题 48 | // if (scrollTop * 1 > this.sidebarHeight + 50) { 49 | // console.log(909090); 50 | // } else { 51 | // console.log(808080); 52 | // } 53 | }, 54 | // 获取当前类别下的分类 55 | getCategoryClassify() { 56 | let route = this.$route; 57 | let routeName = route.name == 'index' ? 'article' : route.name, 58 | routeParams = route.params; 59 | let classifyData = getNavClassifyData(routeName); 60 | this.setNavClassify(classifyData); 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /src/components/header/header-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/header/header-editor.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/header/header-logo.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/header/header-nav.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/header/header-search.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/header/header-user.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/header/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/header/mixins.js: -------------------------------------------------------------------------------- 1 | import {mapGetters, mapActions} from "vuex"; 2 | import {getNavClassifyData} from "../../dictionary/navData"; 3 | 4 | export const headerNav = { 5 | data() { 6 | return { 7 | navData: [], 8 | activeNav: 'article', 9 | activeClassify: 'recommend' 10 | } 11 | }, 12 | mounted() { 13 | this.getNavDataArr(); 14 | this.getActiveNav(); 15 | }, 16 | methods: { 17 | ...mapGetters([ 18 | 'getNavData' 19 | ]), 20 | ...mapActions([ 21 | 'setNavClassify' 22 | ]), 23 | // 获取当前路由 24 | getActiveNav() { 25 | let name = this.$route.name == 'index' ? 'article' : this.$route.fullPath, 26 | classify = this.$route.name == 'index' ? 'recommend' : this.$route.params.classify; 27 | this.activeNav = name; 28 | this.activeClassify = classify; 29 | }, 30 | // 点击跳转 31 | gotoLink(route) { 32 | let path = '/' + route.path, classify = []; 33 | this.activeNav = route.path; 34 | if (route.classify != '') { 35 | path = '/nettext/' + route.path + '/' + route.classify 36 | classify = getNavClassifyData(route.path); 37 | } 38 | this.setNavClassify(classify); 39 | this.$router.push({ 40 | path: path 41 | }) 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/components/icon/icon-fa.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/markdown/components/mdAutoTextarea.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 94 | -------------------------------------------------------------------------------- /src/components/markdown/components/mdToolbarRight.vue: -------------------------------------------------------------------------------- 1 | 74 | 117 | -------------------------------------------------------------------------------- /src/components/markdown/lib/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @Author: HuaChao Chen 3 | * @Date: 2017-05-06T21:40:39+08:00 4 | * @Email: chenhuachaoxyz@gmail.com 5 | * @Filename: config.js 6 | * @Last modified by: CHC 7 | * @Last modified time: 2017-05-06T22:12:49+08:00 8 | * @License: MIT 9 | * @Copyright: 2017 10 | * @desc 初始化配置项 11 | */ 12 | 13 | import help_zh_CN from './lang/zh-CN/help_zh-CN.md' 14 | import help_zh_TW from './lang/zh-TW/help_zh-TW.md' 15 | import help_en from './lang/en/help_en.md' 16 | 17 | import words_zh_CN from './lang/zh-CN/words_zh-CN.json' 18 | import words_zh_TW from './lang/zh-TW/words_zh-TW.json' 19 | import words_en from './lang/en/words_en.json' 20 | export const CONFIG = { 21 | 'help_zh-CN': help_zh_CN, 22 | 'help_zh-TW': help_zh_TW, 23 | 'help_en': help_en, 24 | 'words_zh-CN': words_zh_CN, 25 | 'words_zh-TW': words_zh_TW, 26 | 'words_en': words_en, 27 | 'langList': ['en', 'zh-CN', 'zh-TW'], 28 | 'toolbars': { 29 | 'bold': true, 30 | 'italic': true, 31 | 'header': true, 32 | 'underline': true, 33 | 'strikethrough': true, 34 | 'mark': true, 35 | 'superscript': true, 36 | 'subscript': true, 37 | 'quote': true, 38 | 'ol': true, 39 | 'ul': true, 40 | 'link': true, 41 | 'imagelink': true, 42 | 'code': true, 43 | 'table': true, 44 | 'undo': true, 45 | 'redo': true, 46 | 'trash': true, 47 | 'save': true, 48 | 'alignleft': true, 49 | 'aligncenter': true, 50 | 'alignright': true, 51 | 'navigation': true, 52 | 'subfield': true, 53 | 'fullscreen': true, 54 | 'readmodel': true, 55 | 'htmlcode': true, 56 | 'help': true, 57 | 'preview': true 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /src/components/markdown/lib/core/highlight.js: -------------------------------------------------------------------------------- 1 | // import hljs from 'highlight.js-async-webpack' 2 | import { 3 | loadScript 4 | } from './extra-function.js' 5 | function highLightCode(str, callback, hljsLangFuc, hljsFuc) { 6 | var hljs = window.hljs; 7 | if (!hljs) { 8 | if (typeof hljsFuc !== 'function') { 9 | console.warn('external_link.hljs_js is not a function, hljs can not load by mavon-editor, if you want to disabled this log, set external_link.hljs_js to function'); 10 | callback(str); 11 | return; 12 | } 13 | var url = hljsFuc(); 14 | console.warn('hljs parsing file is missing. mavon-editor will autoload', url); 15 | loadScript(url, function() { 16 | _highLightCode(str, callback, hljsLangFuc); 17 | }); 18 | } else { 19 | if (typeof hljsLangFuc === 'function') { 20 | _highLightCode(str, callback, hljsLangFuc); 21 | } else { 22 | console.warn('external_link.hljs_lang is not a function, hljs will not to work'); 23 | callback(str); 24 | } 25 | } 26 | } 27 | function _highLightCode(str, callback, hljsLangFuc) { 28 | var dom = document.createElement('div'); 29 | var hljs = window.hljs; 30 | dom.innerHTML = str; 31 | var pre_code = dom.querySelectorAll('pre > div.hljs > code'); 32 | if (pre_code && hljs && (typeof hljsLangFuc === 'function')) { 33 | var flag = 0; 34 | var i = 0; 35 | var deal = 0; 36 | var not_include_lang = {}; // these lang parse file need to be include. 37 | var url = ''; 38 | for (i = 0; i < pre_code.length; i++) { 39 | var lang = pre_code[i].className.toLowerCase(); 40 | if (lang.length > 0) { 41 | // if this lang parse file missing 42 | url = hljsLangFuc(lang); 43 | if (!hljs.getLanguage(lang) && !not_include_lang.hasOwnProperty(lang) && url.length > 0) { 44 | not_include_lang[lang] = url; 45 | } 46 | } 47 | } 48 | // we need to include these lang parse file manually 49 | var need_langs = []; 50 | for (var key in not_include_lang) { 51 | if (not_include_lang.hasOwnProperty(key)) { 52 | need_langs.push(key); 53 | } 54 | } 55 | for (i = 0; i < need_langs.length; i++) { 56 | url = not_include_lang[need_langs[i]]; 57 | loadScript(url, function() { 58 | deal = deal + 1; 59 | if (deal === need_langs.length) { 60 | for (var i = 0; i < pre_code.length; i++) { 61 | var lang = pre_code[i].className; 62 | // if lang is valid. 63 | if (lang.length > 0 && hljs.getLanguage(lang)) { 64 | hljs.highlightBlock(pre_code[i]) 65 | } 66 | } 67 | callback(dom.innerHTML); 68 | } 69 | }); 70 | } 71 | if (need_langs.length === 0) { 72 | for (i = 0; i < pre_code.length; i++) { 73 | lang = pre_code[i].className; 74 | // if lang is valid. 75 | if (lang.length > 0 && hljs.getLanguage(lang)) { 76 | hljs.highlightBlock(pre_code[i]) 77 | } 78 | } 79 | callback(dom.innerHTML); 80 | } 81 | } else { 82 | callback(dom.innerHTML); 83 | } 84 | } 85 | export default highLightCode; 86 | -------------------------------------------------------------------------------- /src/components/markdown/lib/core/hljs/lang.hljs.css.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'agate': 1, 3 | 'androidstudio': 1, 4 | 'arduino-light': 1, 5 | 'arta': 1, 6 | 'ascetic': 1, 7 | 'atelier-cave-dark': 1, 8 | 'atelier-cave-light': 1, 9 | 'atelier-dune-dark': 1, 10 | 'atelier-dune-light': 1, 11 | 'atelier-estuary-dark': 1, 12 | 'atelier-estuary-light': 1, 13 | 'atelier-forest-dark': 1, 14 | 'atelier-forest-light': 1, 15 | 'atelier-heath-dark': 1, 16 | 'atelier-heath-light': 1, 17 | 'atelier-lakeside-dark': 1, 18 | 'atelier-lakeside-light': 1, 19 | 'atelier-plateau-dark': 1, 20 | 'atelier-plateau-light': 1, 21 | 'atelier-savanna-dark': 1, 22 | 'atelier-savanna-light': 1, 23 | 'atelier-seaside-dark': 1, 24 | 'atelier-seaside-light': 1, 25 | 'atelier-sulphurpool-dark': 1, 26 | 'atelier-sulphurpool-light': 1, 27 | 'atom-one-dark': 1, 28 | 'atom-one-light': 1, 29 | 'brown-paper': 1, 30 | 'codepen-embed': 1, 31 | 'color-brewer': 1, 32 | 'darcula': 1, 33 | 'dark': 1, 34 | 'darkula': 1, 35 | 'default': 1, 36 | 'docco': 1, 37 | 'dracula': 1, 38 | 'far': 1, 39 | 'foundation': 1, 40 | 'github-gist': 1, 41 | 'github': 1, 42 | 'googlecode': 1, 43 | 'grayscale': 1, 44 | 'gruvbox-dark': 1, 45 | 'gruvbox-light': 1, 46 | 'hopscotch': 1, 47 | 'hybrid': 1, 48 | 'idea': 1, 49 | 'ir-black': 1, 50 | 'kimbie.dark': 1, 51 | 'kimbie.light': 1, 52 | 'magula': 1, 53 | 'mono-blue': 1, 54 | 'monokai-sublime': 1, 55 | 'monokai': 1, 56 | 'obsidian': 1, 57 | 'ocean': 1, 58 | 'paraiso-dark': 1, 59 | 'paraiso-light': 1, 60 | 'pojoaque': 1, 61 | 'purebasic': 1, 62 | 'qtcreator_dark': 1, 63 | 'qtcreator_light': 1, 64 | 'railscasts': 1, 65 | 'rainbow': 1, 66 | 'routeros': 1, 67 | 'school-book': 1, 68 | 'solarized-dark': 1, 69 | 'solarized-light': 1, 70 | 'sunburst': 1, 71 | 'tomorrow-night-blue': 1, 72 | 'tomorrow-night-bright': 1, 73 | 'tomorrow-night-eighties': 1, 74 | 'tomorrow-night': 1, 75 | 'tomorrow': 1, 76 | 'vs': 1, 77 | 'vs2015': 1, 78 | 'xcode': 1, 79 | 'xt256': 1, 80 | 'zenburn': 1 81 | }; 82 | -------------------------------------------------------------------------------- /src/components/markdown/lib/core/markdown.js: -------------------------------------------------------------------------------- 1 | import hljsLangs from './hljs/lang.hljs.js' 2 | 3 | /** 4 | * Created by zhy on 2017/3/30. 5 | */ 6 | // default mode 7 | var markdown_config = { 8 | html: true, // Enable HTML tags in source 9 | xhtmlOut: true, // Use '/' to close single tags (
). 10 | breaks: true, // Convert '\n' in paragraphs into
11 | langPrefix: 'language-', // CSS language prefix for fenced blocks. Can be 12 | linkify: false, // 自动识别url 13 | typographer: true, 14 | quotes: '“”‘’', 15 | highlight: function (str, lang) { 16 | if (lang && hljsLangs[lang]) { 17 | return '
' + markdown.utils.escapeHtml(str) + '
'; 18 | } 19 | return '
' + markdown.utils.escapeHtml(str) + '
'; 20 | } 21 | } 22 | var markdown = require('markdown-it')(markdown_config); 23 | // 表情 24 | var emoji = require('markdown-it-emoji'); 25 | // 下标 26 | var sub = require('markdown-it-sub') 27 | // 上标 28 | var sup = require('markdown-it-sup') 29 | //
30 | var deflist = require('markdown-it-deflist') 31 | // 32 | var abbr = require('markdown-it-abbr') 33 | // footnote 34 | var footnote = require('markdown-it-footnote') 35 | // insert 带有下划线 样式 ++ ++ 36 | var insert = require('markdown-it-ins') 37 | // mark 38 | var mark = require('markdown-it-mark') 39 | // taskLists 40 | var taskLists = require('markdown-it-task-lists') 41 | // 42 | var container = require('markdown-it-container') 43 | // add target="_blank" to all link 44 | var defaultRender = markdown.renderer.rules.link_open || function(tokens, idx, options, env, self) { 45 | return self.renderToken(tokens, idx, options); 46 | }; 47 | markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) { 48 | // If you are sure other plugins can't add `target` - drop check below 49 | var aIndex = tokens[idx].attrIndex('target'); 50 | 51 | if (aIndex < 0) { 52 | tokens[idx].attrPush(['target', '_blank']); // add new attribute 53 | } else { 54 | tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr 55 | } 56 | 57 | // pass token to default renderer. 58 | return defaultRender(tokens, idx, options, env, self); 59 | }; 60 | // math katex 61 | var katex = require('markdown-it-katex-external'); 62 | var miip = require('markdown-it-images-preview'); 63 | markdown.use(emoji) 64 | .use(taskLists) 65 | .use(sup) 66 | .use(sub) 67 | .use(container) 68 | .use(container, 'hljs-left') /* align left */ 69 | .use(container, 'hljs-center')/* align center */ 70 | .use(container, 'hljs-right')/* align right */ 71 | .use(deflist) 72 | .use(abbr) 73 | .use(footnote) 74 | .use(insert) 75 | .use(mark) 76 | .use(container) 77 | .use(miip) 78 | .use(katex) 79 | export default markdown 80 | -------------------------------------------------------------------------------- /src/components/markdown/lib/core/onecolumn-event.js: -------------------------------------------------------------------------------- 1 | /** 2 | * keydown enter 3 | */ 4 | export const onecolumnKeyDownEnter = ($event , $vm , tomarkdown) => { 5 | let element = $event.srcElement ? $event.srcElement : $event.target 6 | let sel = window.getSelection(); 7 | let range = sel.getRangeAt(0); 8 | // code中回车处理 9 | if (range.startContainer.tagName === 'CODE' || range.startContainer.tagName === 'PRE') { 10 | $event.preventDefault() 11 | onecolumnInsert(range.startContainer , '\n') 12 | } else if (range.startContainer.parentElement.tagName === 'CODE' || range.startContainer.parentElement.tagName === 'PRE') { 13 | $event.preventDefault() 14 | onecolumnInsert(range.startContainer.parentElement , '\n') 15 | } else if (!blockQuoteDoubleEnter(range.startContainer , $event , range.startContainer)) { 16 | $vm.s_table_enter = false 17 | judgeRender(range.startContainer , $event , range.startContainer , range.startContainer , $vm) 18 | /* if (result) { 19 | range = range.cloneRange(); 20 | // code的渲染 21 | if (result.children !== null && result.children.length > 0 && result.children[0].tagName === 'PRE') { 22 | result.children[0].children[0].innerHTML = '\n' 23 | result.innerHTML += '

' 24 | range.setStartAfter(result.children[0].children[0]); 25 | } else if (result.lastChild) { 26 | range.setStartAfter(result.lastChild); 27 | } else { 28 | range.setStartAfter(result); 29 | } 30 | range.collapse(true); 31 | sel.removeAllRanges(); 32 | sel.addRange(range); 33 | } */ 34 | } 35 | $vm.d_value = tomarkdown(element.innerHTML) 36 | } 37 | /** 38 | * insert 39 | */ 40 | export const onecolumnInsert = (dom , html) => { 41 | dom.focus() 42 | var sel 43 | var range 44 | if (window.getSelection) { 45 | // IE9 and non-IE 46 | sel = window.getSelection(); 47 | if (sel.getRangeAt && sel.rangeCount) { 48 | range = sel.getRangeAt(0); 49 | range.deleteContents(); 50 | // Range.createContextualFragment() would be useful here but is 51 | // non-standard and not supported in all browsers (IE9, for one) 52 | var el = document.createElement('div'); 53 | el.innerHTML = html; 54 | var frag = document.createDocumentFragment() 55 | var node 56 | var lastNode 57 | while ((node = el.firstChild)) { 58 | lastNode = frag.appendChild(node); 59 | } 60 | range.insertNode(frag); 61 | // Preserve the selection 62 | if (lastNode) { 63 | range = range.cloneRange(); 64 | range.setStartAfter(lastNode); 65 | range.collapse(true); 66 | sel.removeAllRanges(); 67 | sel.addRange(range); 68 | } 69 | } 70 | } else if (document.selection && document.selection.type !== 'Control') { 71 | // IE < 9 72 | document.selection.createRange().pasteHTML(html); 73 | } 74 | } 75 | /** 76 | * 连续两次在段落中换行 跳出段落 77 | */ 78 | export const blockQuoteDoubleEnter = (dom , $event , self) => { 79 | if (dom.tagName) { 80 | if (dom.getAttribute('class') === 'content-div content-div-edit') { 81 | return false 82 | } else if (dom.tagName === 'BLOCKQUOTE') { 83 | if (!self.innerText || self.innerText === '\n' || self.innerText === '') { 84 | $event.preventDefault() 85 | let sel = window.getSelection(); 86 | let range = sel.getRangeAt(0); 87 | let next = dom.nextSibling 88 | self.outerHTML = '' 89 | dom.outerHTML += '

' 90 | range = range.cloneRange() 91 | range.setStartAfter(next.previousSibling.lastChild); 92 | range.collapse(true); 93 | sel.removeAllRanges(); 94 | sel.addRange(range); 95 | } 96 | return true 97 | } 98 | return blockQuoteDoubleEnter(dom.parentElement, $event , dom) 99 | } else { 100 | return blockQuoteDoubleEnter(dom.parentElement, $event , dom) 101 | } 102 | } 103 | /** 104 | * 在表格中回车特殊处理(暂时只做表格回车 , 后续可能拓展) 105 | */ 106 | export const judgeRender = (dom , $event , self , pre , $vm) => { 107 | if (dom.tagName) { 108 | if (dom.tagName === 'TABLE') { 109 | $vm.s_table_enter = true 110 | self = dom 111 | } 112 | if (dom.getAttribute('class') === 'content-div content-div-edit') { 113 | // 在表格中回车 在表格后换行 114 | if ($vm.s_table_enter) { 115 | let sel = window.getSelection(); 116 | let range = sel.getRangeAt(0); 117 | range = range.cloneRange() 118 | $event.preventDefault() 119 | let next = self.nextSibling 120 | self.outerHTML += '

' 121 | range.setStartAfter(next.previousSibling.lastChild); 122 | range.collapse(true); 123 | sel.removeAllRanges(); 124 | sel.addRange(range); 125 | } 126 | return; 127 | } 128 | judgeRender(dom.parentElement , $event , self , dom , $vm) 129 | /* let obj = document.createElement('div') 130 | obj.innerHTML = markdown.render(dom.innerHTML.replace('>' , '>')) 131 | var objText = obj.innerText 132 | var domText = dom.innerText 133 | var objTextNoSpaceEnter = objText.replace(/\s+/g, '').replace(/[\r\n]/g, '') 134 | var domTextNoSpaceEnter = domText.replace(/\s+/g, '').replace(/[\r\n]/g, '') 135 | if (obj.children.length > 0) { 136 | if (obj.children[0].innerText.replace(/\s+/g, '').replace(/[\r\n]/g, '') === domTextNoSpaceEnter || obj.children[0].innerText === domText || objText === domText || domTextNoSpaceEnter === objTextNoSpaceEnter) { 137 | return judgeRender(dom.parentElement , $event , self ,dom , $vm) 138 | } else { 139 | // 有变化 140 | $event.preventDefault() 141 | dom.innerHTML = markdown.render(tomarkdown(dom.innerHTML)) 142 | return dom 143 | } 144 | } else { 145 | if (objText === domText || objTextNoSpaceEnter === domTextNoSpaceEnter) { 146 | return judgeRender(dom.parentElement , $event , self , dom , $vm) 147 | } else { 148 | // 有变化 149 | dom.innerHTML = markdown.render(tomarkdown(obj.innerHTML)) 150 | return dom 151 | } 152 | } */ 153 | } else { 154 | judgeRender(dom.parentElement , $event , self , dom , $vm) 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /src/components/markdown/lib/core/to-markdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhy on 2017/4/9. 3 | */ 4 | var toMarkdown = require('to-markdown'); 5 | // 6 | const coverterP = { 7 | filter: 'P', 8 | replacement: function (content) { 9 | return '\n' + content 10 | } 11 | } 12 | const coverterp = { 13 | filter: 'p', 14 | replacement: function (content) { 15 | return '\n' + content 16 | } 17 | } 18 | const coverterDiv = { 19 | filter: 'DIV', 20 | replacement: function (content) { 21 | return '\n' + content 22 | } 23 | } 24 | const coverterdiv = { 25 | filter: 'div', 26 | replacement: function (content) { 27 | return '\n' + content 28 | } 29 | } 30 | // 解析代码块 31 | const coverterCode = { 32 | filter: 'pre', 33 | replacement: function (content) { 34 | let objE = document.createElement('div'); 35 | objE.innerHTML = content; 36 | let codes = objE.getElementsByTagName('code') 37 | if (codes !== null && codes.length > 0) { 38 | let code = codes[0] 39 | let codeType = code.getAttribute('class') === null ? '' : code.getAttribute('class') 40 | let codeContent = code.innerText 41 | return '\n```' + codeType + '\n' + codeContent + '\n```\n'; 42 | } 43 | return '\n```\n' + content + '\n```\n'; 44 | } 45 | } 46 | // 解析表格 47 | const coverterTable = { 48 | filter: 'table', 49 | replacement: function (content) { 50 | let table = document.createElement('table'); 51 | table.innerHTML = content; 52 | let dom = '\n'; 53 | let tableMark = ''; 54 | let thead = table.getElementsByTagName('thead')[0]; 55 | let thead_tr = thead.getElementsByTagName('tr')[0]; 56 | let thead_th = thead_tr.getElementsByTagName('th') 57 | for (let i = 0; i < thead_th.length; i++) { 58 | dom += '| ' + thead_th[i].innerText + ' ' 59 | let text_align = thead_th[i].style.textAlign 60 | if (text_align === 'left') { 61 | tableMark += '| :- ' 62 | } else if (text_align === 'center') { 63 | tableMark += '| :-: ' 64 | } else if (text_align === 'right') { 65 | tableMark += '| -: ' 66 | } else { 67 | tableMark += '| - ' 68 | } 69 | if (i === thead_th.length - 1) { 70 | dom += '|\n' + tableMark + ' |\n' 71 | } 72 | } 73 | let tbody 74 | if (table.getElementsByTagName('tbody')) { 75 | tbody = table.getElementsByTagName('tbody')[0]; 76 | let tbody_tr = tbody.getElementsByTagName('tr') 77 | if (tbody_tr.length > 0) { 78 | for (let i = 0; i < tbody_tr.length; i++) { 79 | let tbody_td = tbody_tr[i].getElementsByTagName('td') 80 | for (let j = 0; j < tbody_td.length; j++) { 81 | dom += '| ' + tbody_td[j].innerText + ' '; 82 | if (j === tbody_td.length - 1) { 83 | dom += '|\n'; 84 | } 85 | } 86 | } 87 | } 88 | } 89 | return dom 90 | } 91 | } 92 | // 上角标 93 | const coverterSup = { 94 | filter: 'sup', 95 | replacement: function (content) { 96 | return '^' + content + '^'; 97 | } 98 | } 99 | // 下角标 100 | const coverterSub = { 101 | filter: 'sub', 102 | replacement: function (content) { 103 | return '~' + content + '~'; 104 | } 105 | } 106 | // 下划线 107 | const coverterUnderline = { 108 | filter: 'ins', 109 | replacement: function (content) { 110 | return '++' + content + '++'; 111 | } 112 | } 113 | // 中画线 114 | const coverterStrikethrough = { 115 | filter: 's', 116 | replacement: function (content) { 117 | return '~~' + content + '~~'; 118 | } 119 | } 120 | // 标记 121 | const coverterMark = { 122 | filter: 'mark', 123 | replacement: function (content) { 124 | return '==' + content + '=='; 125 | } 126 | } 127 | // 图片 128 | const converterImg = { 129 | filter: 'img', 130 | replacement: function (content, tag) { 131 | var rel = tag.getAttribute('rel'); 132 | var alt = tag.getAttribute('alt'); 133 | if (rel && alt) { 134 | return '![' + alt + ']' + '(' + rel + ')' 135 | } else { 136 | var src = tag.getAttribute('src'); 137 | return '![' + alt + ']' + '(' + src + ')' 138 | } 139 | } 140 | } 141 | var tomarkdown = function (str) { 142 | return toMarkdown(str, { 143 | converters: [ 144 | coverterCode, 145 | coverterTable, 146 | coverterSup, 147 | coverterSub, 148 | coverterUnderline, 149 | coverterStrikethrough, 150 | coverterMark, 151 | coverterP, 152 | coverterp, 153 | coverterDiv, 154 | coverterdiv, 155 | converterImg 156 | ] 157 | }); 158 | } 159 | export default tomarkdown 160 | -------------------------------------------------------------------------------- /src/components/markdown/lib/css/md.css: -------------------------------------------------------------------------------- 1 | .markdown-body strong{ 2 | font-weight: bolder; 3 | } 4 | 5 | .markdown-body .hljs-center { 6 | text-align: center; 7 | } 8 | .markdown-body .hljs-right { 9 | text-align: right; 10 | } 11 | .markdown-body .hljs-left { 12 | text-align: left; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/markdown/lib/css/scroll.styl: -------------------------------------------------------------------------------- 1 | scrollbar() 2 | &.scroll-style::-webkit-scrollbar 3 | width 6px 4 | background-color #e5e5e5 5 | &.scroll-style::-webkit-scrollbar-thumb 6 | background-color #b7b7b7 7 | border-radius 4px 8 | &.scroll-style::-webkit-scrollbar-thumb:hover 9 | background-color #a1a1a1 10 | &.scroll-style::-webkit-scrollbar-thumb:active 11 | background-color #a1a1a1 12 | &.scroll-style::-webkit-scrollbar-track 13 | -webkit-box-shadow 0 0 0px gray inset 14 | &.scroll-style-border-radius::-webkit-scrollbar 15 | border-bottom-right-radius 4px -------------------------------------------------------------------------------- /src/components/markdown/lib/lang/en/help_en.md: -------------------------------------------------------------------------------- 1 | @[toc](Catalog) 2 | 3 | Markdown Guide 4 | === 5 | > Detailed: [http://commonmark.org/help/](http://commonmark.org/help/) 6 | 7 | ## **Bold** 8 | ``` 9 | **bold** 10 | __bold__ 11 | ``` 12 | ## *Italic* 13 | ``` 14 | *italic* 15 | _italic_ 16 | ``` 17 | ## Header 18 | ``` 19 | # h1 # 20 | h1 21 | ==== 22 | ## h2 ## 23 | h2 24 | ---- 25 | ### h3 ### 26 | #### h4 #### 27 | ##### h5 ##### 28 | ###### h6 ###### 29 | ``` 30 | ## Dividing line 31 | ``` 32 | *** 33 | --- 34 | ``` 35 | **** 36 | ## ^Super^script & ~Sub~script 37 | ``` 38 | super x^2^ 39 | sub H~2~0 40 | ``` 41 | ## ++Underline++ & ~~Strikethrough~~ 42 | ``` 43 | ++underline++ 44 | ~~strikethrough~~ 45 | ``` 46 | ## ==Mark== 47 | ``` 48 | ==mark== 49 | ``` 50 | ## Quote 51 | 52 | ``` 53 | > quote 1 54 | >> quote 2 55 | >>> quote 3 56 | ... 57 | ``` 58 | 59 | ## List 60 | ``` 61 | ol 62 | 1. 63 | 2. 64 | 3. 65 | ... 66 | 67 | ul 68 | - 69 | - 70 | ... 71 | ``` 72 | 73 | ## Todo List 74 | 75 | - [x] task 1 76 | - [ ] task 2 77 | 78 | ``` 79 | - [x] task 1 80 | - [ ] task 2 81 | ``` 82 | 83 | ## Link 84 | ``` 85 | Text Link 86 | [Text](www.baidu.com) 87 | 88 | Image Link 89 | ![Text](http://www.image.com) 90 | ``` 91 | ## Code 92 | \``` type 93 | 94 | code block 95 | 96 | \``` 97 | 98 | \` code \` 99 | 100 | ```c++ 101 | int main() 102 | { 103 | printf("hello world!"); 104 | } 105 | ``` 106 | `code` 107 | 108 | ## Table 109 | ``` 110 | | th1 | th2 | th3 | 111 | | :-- | :--: | ----: | 112 | | left | center | right | 113 | ``` 114 | | th1 | th2 | th3 | 115 | | :-- | :--: | ----: | 116 | | left | center | right | 117 | | ---------------------- | ------------- | ----------------- | 118 | ## Footnote 119 | ``` 120 | hello[^hello] 121 | ``` 122 | 123 | Look at the bottom[^hello] 124 | 125 | [^hello]: footnote 126 | 127 | ## Emojis 128 | Detailed: [https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/) 129 | ``` 130 | :laughing: 131 | :blush: 132 | :smiley: 133 | :) 134 | ... 135 | ``` 136 | :laughing::blush::smiley::) 137 | 138 | ## $\KaTeX$ Mathematics 139 | 140 | We can render formulas for example：$x_i + y_i = z_i$ and $\sum_{i=1}^n a_i=0$ 141 | We can also single-line rendering 142 | $$\sum_{i=1}^n a_i=0$$ 143 | Detailed: [katex](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex function](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 144 | 145 | ## Layout 146 | 147 | ::: hljs-left 148 | `::: hljs-left` 149 | `left` 150 | `:::` 151 | ::: 152 | 153 | ::: hljs-center 154 | `::: hljs-center` 155 | `center` 156 | `:::` 157 | ::: 158 | 159 | ::: hljs-right 160 | `::: hljs-right` 161 | `right` 162 | `:::` 163 | ::: 164 | 165 | ## deflist 166 | 167 | Term 1 168 | 169 | : Definition 1 170 | 171 | Term 2 with *inline markup* 172 | 173 | : Definition 2 174 | 175 | { some code, part of Definition 2 } 176 | 177 | Third paragraph of definition 2. 178 | 179 | ``` 180 | Term 1 181 | 182 | : Definition 1 183 | 184 | Term 2 with *inline markup* 185 | 186 | : Definition 2 187 | 188 | { some code, part of Definition 2 } 189 | 190 | Third paragraph of definition 2. 191 | 192 | ``` 193 | 194 | ## abbr 195 | *[HTML]: Hyper Text Markup Language 196 | *[W3C]: World Wide Web Consortium 197 | The HTML specification 198 | is maintained by the W3C. 199 | ``` 200 | *[HTML]: Hyper Text Markup Language 201 | *[W3C]: World Wide Web Consortium 202 | The HTML specification 203 | is maintained by the W3C. 204 | ``` 205 | -------------------------------------------------------------------------------- /src/components/markdown/lib/lang/en/words_en.json: -------------------------------------------------------------------------------- 1 | { 2 | "start_editor": "Begin editing...", 3 | "navigation_title": "Navigation", 4 | "tl_bold": "Bold", 5 | "tl_italic": "Italic", 6 | "tl_header": "Header", 7 | "tl_header_one": "Header 1", 8 | "tl_header_two": "Header 2", 9 | "tl_header_three": "Header 3", 10 | "tl_header_four": "Header 4", 11 | "tl_header_five": "Header 5", 12 | "tl_header_six": "Header 6", 13 | "tl_underline": "Underline", 14 | "tl_strikethrough": "Strikethrough", 15 | "tl_mark": "Mark", 16 | "tl_superscript": "Superscript", 17 | "tl_subscript": "Subscript", 18 | "tl_quote": "Quote", 19 | "tl_ol": "Ol", 20 | "tl_ul": "Ul", 21 | "tl_link": "Link", 22 | "tl_image": "Image Link", 23 | "tl_code": "Code", 24 | "tl_table": "Table", 25 | "tl_undo": "Undo", 26 | "tl_redo": "Redo", 27 | "tl_trash": "Trash", 28 | "tl_save": "Save", 29 | "tl_navigation_on": "Navigation ON", 30 | "tl_navigation_off": "Navigation OFF", 31 | "tl_preview": "Preview", 32 | "tl_aligncenter": "Center text", 33 | "tl_alignleft": "Clamp text to the left", 34 | "tl_alignright": "Clamp text to the right", 35 | "tl_edit": "Edit", 36 | "tl_single_column": "Single Column", 37 | "tl_double_column": "Double Columns", 38 | "tl_fullscreen_on": "FullScreen ON", 39 | "tl_fullscreen_off": "FullScreen OFF", 40 | "tl_read": "Read Model", 41 | "tl_html_on": "HTML ON", 42 | "tl_html_off": "HTML OFF", 43 | "tl_help": "Markdown Guide", 44 | "tl_upload": "Upload Images", 45 | "tl_upload_remove": "Remove", 46 | "tl_popup_link_title": "Add Link", 47 | "tl_popup_link_text": "Link text", 48 | "tl_popup_link_addr": "Link address", 49 | "tl_popup_img_link_title": "Add Image", 50 | "tl_popup_img_link_text": "Image Text", 51 | "tl_popup_img_link_addr": "Image Link", 52 | "tl_popup_link_sure": "Sure", 53 | "tl_popup_link_cancel": "Cancel" 54 | } 55 | -------------------------------------------------------------------------------- /src/components/markdown/lib/lang/zh-CN/help_zh-CN.md: -------------------------------------------------------------------------------- 1 | @[toc](目录) 2 | 3 | Markdown 语法简介 4 | ============= 5 | > [语法详解](http://commonmark.org/help/) 6 | 7 | ## **粗体** 8 | ``` 9 | **粗体** 10 | __粗体__ 11 | ``` 12 | ## *斜体* 13 | ``` 14 | *斜体* 15 | _斜体_ 16 | ``` 17 | ## 标题 18 | ``` 19 | # 一级标题 # 20 | 一级标题 21 | ==== 22 | ## 二级标题 ## 23 | 二级标题 24 | ---- 25 | ### 三级标题 ### 26 | #### 四级标题 #### 27 | ##### 五级标题 ##### 28 | ###### 六级标题 ###### 29 | ``` 30 | ## 分割线 31 | ``` 32 | *** 33 | --- 34 | ``` 35 | **** 36 | ## ^上^角~下~标 37 | ``` 38 | 上角标 x^2^ 39 | 下角标 H~2~0 40 | ``` 41 | ## ++下划线++ ~~中划线~~ 42 | ``` 43 | ++下划线++ 44 | ~~中划线~~ 45 | ``` 46 | ## ==标记== 47 | ``` 48 | ==标记== 49 | ``` 50 | ## 段落引用 51 | ``` 52 | > 一级 53 | >> 二级 54 | >>> 三级 55 | ... 56 | ``` 57 | 58 | ## 列表 59 | ``` 60 | 有序列表 61 | 1. 62 | 2. 63 | 3. 64 | ... 65 | 无序列表 66 | - 67 | - 68 | ... 69 | ``` 70 | 71 | ## 任务列表 72 | 73 | - [x] 已完成任务 74 | - [ ] 未完成任务 75 | 76 | ``` 77 | - [x] 已完成任务 78 | - [ ] 未完成任务 79 | ``` 80 | 81 | ## 链接 82 | ``` 83 | [链接](www.baidu.com) 84 | ![图片描述](http://www.image.com) 85 | ``` 86 | ## 代码段落 87 | \``` type 88 | 89 | 代码段落 90 | 91 | \``` 92 | 93 | \` 代码块 \` 94 | 95 | ```c++ 96 | int main() 97 | { 98 | printf("hello world!"); 99 | } 100 | ``` 101 | `code` 102 | ## 表格(table) 103 | ``` 104 | | 标题1 | 标题2 | 标题3 | 105 | | :-- | :--: | ----: | 106 | | 左对齐 | 居中 | 右对齐 | 107 | | ---------------------- | ------------- | ----------------- | 108 | ``` 109 | | 标题1 | 标题2 | 标题3 | 110 | | :-- | :--: | ----: | 111 | | 左对齐 | 居中 | 右对齐 | 112 | | ---------------------- | ------------- | ----------------- | 113 | ## 脚注(footnote) 114 | ``` 115 | hello[^hello] 116 | ``` 117 | 118 | 见底部脚注[^hello] 119 | 120 | [^hello]: 一个注脚 121 | 122 | ## 表情(emoji) 123 | [参考网站: https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/) 124 | ``` 125 | :laughing: 126 | :blush: 127 | :smiley: 128 | :) 129 | ... 130 | ``` 131 | :laughing::blush::smiley::) 132 | 133 | ## $\KaTeX$公式 134 | 135 | 我们可以渲染公式例如：$x_i + y_i = z_i$和$\sum_{i=1}^n a_i=0$ 136 | 我们也可以单行渲染 137 | $$\sum_{i=1}^n a_i=0$$ 138 | 具体可参照[katex文档](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex支持的函数](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex文档](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 139 | 140 | ## 布局 141 | 142 | ::: hljs-left 143 | `::: hljs-left` 144 | `居左` 145 | `:::` 146 | ::: 147 | 148 | ::: hljs-center 149 | `::: hljs-center` 150 | `居中` 151 | `:::` 152 | ::: 153 | 154 | ::: hljs-right 155 | `::: hljs-right` 156 | `居右` 157 | `:::` 158 | ::: 159 | 160 | ## 定义 161 | 162 | 术语一 163 | 164 | : 定义一 165 | 166 | 包含有*行内标记*的术语二 167 | 168 | : 定义二 169 | 170 | {一些定义二的文字或代码} 171 | 172 | 定义二的第三段 173 | 174 | ``` 175 | 术语一 176 | 177 | : 定义一 178 | 179 | 包含有*行内标记*的术语二 180 | 181 | : 定义二 182 | 183 | {一些定义二的文字或代码} 184 | 185 | 定义二的第三段 186 | 187 | ``` 188 | 189 | ## abbr 190 | *[HTML]: Hyper Text Markup Language 191 | *[W3C]: World Wide Web Consortium 192 | HTML 规范由 W3C 维护 193 | ``` 194 | *[HTML]: Hyper Text Markup Language 195 | *[W3C]: World Wide Web Consortium 196 | HTML 规范由 W3C 维护 197 | ``` 198 | 199 | -------------------------------------------------------------------------------- /src/components/markdown/lib/lang/zh-CN/words_zh-CN.json: -------------------------------------------------------------------------------- 1 | { 2 | "start_editor": "开始编辑...", 3 | "navigation_title": "导航目录", 4 | "tl_bold": "粗体", 5 | "tl_italic": "斜体", 6 | "tl_header": "标题", 7 | "tl_header_one": "一级标题", 8 | "tl_header_two": "二级标题", 9 | "tl_header_three": "三级标题", 10 | "tl_header_four": "四级标题", 11 | "tl_header_five": "五级标题", 12 | "tl_header_six": "六级标题", 13 | "tl_underline": "下划线", 14 | "tl_strikethrough": "中划线", 15 | "tl_mark": "标记", 16 | "tl_superscript": "上角标", 17 | "tl_subscript": "下角标", 18 | "tl_quote": "段落引用", 19 | "tl_ol": "有序列表", 20 | "tl_ul": "无序列表", 21 | "tl_link": "链接", 22 | "tl_image": "添加图片链接", 23 | "tl_code": "代码块", 24 | "tl_table": "表格", 25 | "tl_undo": "上一步", 26 | "tl_redo": "下一步", 27 | "tl_trash": "清空", 28 | "tl_save": "保存", 29 | "tl_navigation_on": "开启标题导航", 30 | "tl_navigation_off": "关闭标题导航", 31 | "tl_preview": "预览", 32 | "tl_aligncenter": "居中", 33 | "tl_alignleft": "居左", 34 | "tl_alignright": "居右", 35 | "tl_edit": "编辑", 36 | "tl_single_column": "单栏", 37 | "tl_double_column": "双栏", 38 | "tl_fullscreen_on": "全屏编辑", 39 | "tl_fullscreen_off": "退出全屏", 40 | "tl_read": "沉浸式阅读", 41 | "tl_html_on": "查看html文本", 42 | "tl_html_off": "返回markdown文本", 43 | "tl_help": "markdown语法帮助", 44 | "tl_upload": "上传图片", 45 | "tl_upload_remove": "删除", 46 | "tl_popup_link_title": "添加链接", 47 | "tl_popup_link_text": "链接描述", 48 | "tl_popup_link_addr": "链接地址", 49 | "tl_popup_img_link_title": "添加图片", 50 | "tl_popup_img_link_text": "图片描述", 51 | "tl_popup_img_link_addr": "图片链接", 52 | "tl_popup_link_sure": "确定", 53 | "tl_popup_link_cancel": "取消" 54 | } 55 | -------------------------------------------------------------------------------- /src/components/markdown/lib/lang/zh-TW/help_zh-TW.md: -------------------------------------------------------------------------------- 1 | @[toc](目錄) 2 | 3 | Markdown 語法簡介 4 | ============= 5 | > [語法詳解](http://commonmark.org/help/) 6 | 7 | ## **粗體** 8 | ``` 9 | **粗體** 10 | __粗體__ 11 | ``` 12 | ## *斜體* 13 | ``` 14 | *斜體* 15 | _斜體_ 16 | ``` 17 | ## 標題 18 | ``` 19 | # 一級標題 # 20 | 一級標題 21 | ==== 22 | ## 二級標題 ## 23 | 二級標題 24 | ---- 25 | ### 三級標題 ### 26 | #### 四級標題 #### 27 | ##### 五級標題 ##### 28 | ###### 六級標題 ###### 29 | ``` 30 | ## 分割線 31 | ``` 32 | *** 33 | --- 34 | ``` 35 | **** 36 | ## ^上^角~下~標 37 | ``` 38 | 上角標 x^2^ 39 | 下角標 H~2~0 40 | ``` 41 | ## ++下劃線++ ~~中劃線~~ 42 | ``` 43 | ++下劃線++ 44 | ~~中劃線~~ 45 | ``` 46 | ## ==標記== 47 | ``` 48 | ==標記== 49 | ``` 50 | ## 段落引用 51 | ``` 52 | > 一級 53 | >> 二級 54 | >>> 三級 55 | ... 56 | ``` 57 | 58 | ## 列表 59 | ``` 60 | 有序列表 61 | 1. 62 | 2. 63 | 3. 64 | ... 65 | 無序列表 66 | - 67 | - 68 | ... 69 | ``` 70 | 71 | ## 任務列表 72 | 73 | - [x] 已完成任務 74 | - [ ] 未完成任務 75 | 76 | ``` 77 | - [x] 已完成任務 78 | - [ ] 未完成任務 79 | ``` 80 | 81 | ## 鏈接 82 | ``` 83 | [鏈接](www.baidu.com) 84 | ![圖片描述](http://www.image.com) 85 | ``` 86 | ## 代碼段落 87 | \``` type 88 | 89 | 代碼段落 90 | 91 | \``` 92 | 93 | \` 代碼塊 \` 94 | 95 | ```c++ 96 | int main() 97 | { 98 | printf("hello world!"); 99 | } 100 | ``` 101 | `code` 102 | ## 表格(table) 103 | ``` 104 | | 標題1 | 標題2 | 標題3 | 105 | | :-- | :--: | ----: | 106 | | 左對齊 | 居中 | 右對齊 | 107 | | ---------------------- | ------------- | ----------------- | 108 | ``` 109 | | 標題1 | 標題2 | 標題3 | 110 | | :-- | :--: | ----: | 111 | | 左對齊 | 居中 | 右對齊 | 112 | | ---------------------- | ------------- | ----------------- | 113 | ## 腳註(footnote) 114 | ``` 115 | hello[^hello] 116 | ``` 117 | 118 | 見底部腳註[^hello] 119 | 120 | [^hello]: 一個註腳 121 | 122 | ## 表情(emoji) 123 | [參考網站: https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/) 124 | ``` 125 | :laughing: 126 | :blush: 127 | :smiley: 128 | :) 129 | ... 130 | ``` 131 | :laughing::blush::smiley::) 132 | 133 | ## $\KaTeX$公式 134 | 135 | 我們可以渲染公式例如：$x_i + y_i = z_i$和$\sum_{i=1}^n a_i=0$ 136 | 我們也可以單行渲染 137 | $$\sum_{i=1}^n a_i=0$$ 138 | 具體可參照[katex文檔](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex支持的函數](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex文檔](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 139 | 140 | ## 布局 141 | 142 | ::: hljs-left 143 | `::: hljs-left` 144 | `居左` 145 | `:::` 146 | ::: 147 | 148 | ::: hljs-center 149 | `::: hljs-center` 150 | `居中` 151 | `:::` 152 | ::: 153 | 154 | ::: hljs-right 155 | `::: hljs-right` 156 | `居右` 157 | `:::` 158 | ::: 159 | 160 | ## 定義 161 | 162 | 術語一 163 | 164 | : 定義一 165 | 166 | 包含有*行內標記*的術語二 167 | 168 | : 定義二 169 | 170 | {一些定義二的文字或代碼} 171 | 172 | 定義二的第三段 173 | 174 | ``` 175 | 術語一 176 | 177 | : 定義一 178 | 179 | 包含有*行內標記*的術語二 180 | 181 | : 定義二 182 | 183 | {一些定義二的文字或代碼} 184 | 185 | 定義二的第三段 186 | 187 | ``` 188 | 189 | ## abbr 190 | *[HTML]: Hyper Text Markup Language 191 | *[W3C]: World Wide Web Consortium 192 | HTML 規範由 W3C 維護 193 | ``` 194 | *[HTML]: Hyper Text Markup Language 195 | *[W3C]: World Wide Web Consortium 196 | HTML 規範由 W3C 維護 197 | ``` 198 | 199 | -------------------------------------------------------------------------------- /src/components/markdown/lib/lang/zh-TW/words_zh-TW.json: -------------------------------------------------------------------------------- 1 | { 2 | "start_editor": "開始編輯...", 3 | "navigation_title": "導航目錄", 4 | "tl_bold": "粗體", 5 | "tl_italic": "斜體", 6 | "tl_header": "標題", 7 | "tl_header_one": "一級標題", 8 | "tl_header_two": "二級標題", 9 | "tl_header_three": "三級標題", 10 | "tl_header_four": "四級標題", 11 | "tl_header_five": "五級標題", 12 | "tl_header_six": "六級標題", 13 | "tl_underline": "下劃線", 14 | "tl_strikethrough": "中劃線", 15 | "tl_mark": "標記", 16 | "tl_superscript": "上角標", 17 | "tl_subscript": "下角標", 18 | "tl_quote": "段落引用", 19 | "tl_ol": "有序列表", 20 | "tl_ul": "無序列表", 21 | "tl_link": "鏈接", 22 | "tl_image": "添加圖片鏈接", 23 | "tl_code": "代碼塊", 24 | "tl_table": "表格", 25 | "tl_undo": "上一步", 26 | "tl_redo": "下一步", 27 | "tl_trash": "清空", 28 | "tl_save": "保存", 29 | "tl_navigation_on": "開啟標題導航", 30 | "tl_navigation_off": "關閉標題導航", 31 | "tl_preview": "預覽", 32 | "tl_aligncenter": "居中", 33 | "tl_alignleft": "居左", 34 | "tl_alignright": "居右", 35 | "tl_edit": "編輯", 36 | "tl_single_column": "單欄", 37 | "tl_double_column": "雙欄", 38 | "tl_fullscreen_on": "全屏編輯", 39 | "tl_fullscreen_off": "退出全屏", 40 | "tl_read": "沈浸式閱讀", 41 | "tl_html_on": "查看html文本", 42 | "tl_html_off": "返回markdown文本", 43 | "tl_help": "markdown語法幫助", 44 | "tl_upload": "上傳圖片", 45 | "tl_upload_remove": "刪除", 46 | "tl_popup_link_title": "添加鏈接", 47 | "tl_popup_link_text": "鏈接描述", 48 | "tl_popup_link_addr": "鏈接地址", 49 | "tl_popup_img_link_title": "添加圖片", 50 | "tl_popup_img_link_text": "圖片描述", 51 | "tl_popup_img_link_addr": "圖片鏈接", 52 | "tl_popup_link_sure": "確定", 53 | "tl_popup_link_cancel": "取消" 54 | } 55 | -------------------------------------------------------------------------------- /src/components/markdown/lib/mixins/markdown.js: -------------------------------------------------------------------------------- 1 | import hljsLangs from '../core/hljs/lang.hljs.js' 2 | import {loadScript} from '../core/extra-function.js' 3 | 4 | var markdown_config = { 5 | html: true, // Enable HTML tags in source 6 | xhtmlOut: true, // Use '/' to close single tags (
). 7 | breaks: true, // Convert '\n' in paragraphs into
8 | langPrefix: 'lang-', // CSS language prefix for fenced blocks. Can be 9 | linkify: false, // 自动识别url 10 | typographer: true, 11 | quotes: '“”‘’' 12 | } 13 | 14 | var markdown = require('markdown-it')(markdown_config); 15 | // 表情 16 | var emoji = require('markdown-it-emoji'); 17 | // 下标 18 | var sub = require('markdown-it-sub') 19 | // 上标 20 | var sup = require('markdown-it-sup') 21 | //
22 | var deflist = require('markdown-it-deflist') 23 | // 24 | var abbr = require('markdown-it-abbr') 25 | // footnote 26 | var footnote = require('markdown-it-footnote') 27 | // insert 带有下划线 样式 ++ ++ 28 | var insert = require('markdown-it-ins') 29 | // mark 30 | var mark = require('markdown-it-mark') 31 | // taskLists 32 | var taskLists = require('markdown-it-task-lists') 33 | // container 34 | var container = require('markdown-it-container') 35 | // 36 | var toc = require('markdown-it-toc') 37 | // add target="_blank" to all link 38 | var defaultRender = markdown.renderer.rules.link_open || function (tokens, idx, options, env, self) { 39 | return self.renderToken(tokens, idx, options); 40 | }; 41 | markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) { 42 | var hIndex = tokens[idx].attrIndex('href'); 43 | if (tokens[idx].attrs[hIndex][1].startsWith('#')) return defaultRender(tokens, idx, options, env, self); 44 | // If you are sure other plugins can't add `target` - drop check below 45 | var aIndex = tokens[idx].attrIndex('target'); 46 | 47 | if (aIndex < 0) { 48 | tokens[idx].attrPush(['target', '_blank']); // add new attribute 49 | } else { 50 | tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr 51 | } 52 | 53 | // pass token to default renderer. 54 | return defaultRender(tokens, idx, options, env, self); 55 | }; 56 | var mihe = require('markdown-it-highlightjs-external'); 57 | // math katex 58 | var katex = require('markdown-it-katex-external'); 59 | var miip = require('markdown-it-images-preview'); 60 | var missLangs = {}; 61 | var needLangs = []; 62 | var hljs_opts = { 63 | hljs: 'auto', 64 | highlighted: true, 65 | langCheck: function (lang) { 66 | if (lang && hljsLangs[lang] && !missLangs[lang]) { 67 | missLangs[lang] = 1; 68 | needLangs.push(hljsLangs[lang]) 69 | } 70 | } 71 | }; 72 | markdown.use(mihe, hljs_opts) 73 | .use(emoji) 74 | .use(sup) 75 | .use(sub) 76 | .use(container) 77 | .use(container, 'hljs-left') /* align left */ 78 | .use(container, 'hljs-center')/* align center */ 79 | .use(container, 'hljs-right')/* align right */ 80 | .use(deflist) 81 | .use(abbr) 82 | .use(footnote) 83 | .use(insert) 84 | .use(mark) 85 | .use(container) 86 | .use(miip) 87 | .use(katex) 88 | .use(taskLists) 89 | .use(toc) 90 | 91 | export default { 92 | data() { 93 | return { 94 | markdownIt: markdown 95 | } 96 | }, 97 | mounted() { 98 | var _this = this; 99 | hljs_opts.highlighted = this.ishljs; 100 | }, 101 | methods: { 102 | $render(src, func) { 103 | var _this = this; 104 | missLangs = {}; 105 | needLangs = []; 106 | var res = markdown.render(src); 107 | if (this.ishljs) { 108 | if (needLangs.length > 0) { 109 | _this.$_render(src, func, res); 110 | } 111 | } 112 | func(res); 113 | }, 114 | $_render(src, func, res) { 115 | var _this = this; 116 | var deal = 0; 117 | for (var i = 0; i < needLangs.length; i++) { 118 | var url = _this.p_external_link.hljs_lang(needLangs[i]); 119 | loadScript(url, function () { 120 | deal = deal + 1; 121 | if (deal === needLangs.length) { 122 | res = markdown.render(src); 123 | func(res); 124 | } 125 | }) 126 | } 127 | } 128 | }, 129 | watch: { 130 | ishljs: function (val) { 131 | hljs_opts.highlighted = val; 132 | } 133 | } 134 | }; 135 | -------------------------------------------------------------------------------- /src/components/markdown/lib/mixins/mdMixins.js: -------------------------------------------------------------------------------- 1 | import '../css/md.css'; 2 | 3 | export default { 4 | data() { 5 | return {} 6 | }, 7 | mounted() { 8 | 9 | }, 10 | methods: {}, 11 | watch: {} 12 | }; -------------------------------------------------------------------------------- /src/components/markdown/lib/toolbar_left_click.js: -------------------------------------------------------------------------------- 1 | function $toolbar_left_undo_click($this) { 2 | if ($this.d_history_index > 0) { 3 | $this.d_history_index-- 4 | } 5 | // $this.$refs.vNoteDivEdit.innerHTML = $this.s_markdown.render($this.d_value) 6 | $this.$nextTick(() => { 7 | // 光标操作 8 | let start = $this.textarea_selectionEnds[$this.d_history_index]; 9 | $this.getTextareaDom().selectionStart = start 10 | $this.getTextareaDom().selectionEnd = start 11 | }) 12 | $this.getTextareaDom().focus() 13 | } 14 | // redo 15 | function $toolbar_left_redo_click($this) { 16 | if ($this.d_history_index < $this.d_history.length - 1) { 17 | $this.d_history_index++ 18 | } 19 | $this.$nextTick(() => { 20 | let start = $this.textarea_selectionEnds[$this.d_history_index]; 21 | $this.getTextareaDom().selectionStart = start 22 | $this.getTextareaDom().selectionEnd = start 23 | }) 24 | $this.getTextareaDom().focus() 25 | // $this.$refs.vNoteDivEdit.innerHTML = $this.s_markdown.render($this.d_value) 26 | } 27 | function $toolbar_left_trash_click($this) { 28 | $this.d_value = '' 29 | $this.getTextareaDom().focus() 30 | // $this.$refs.vNoteDivEdit.innerHTML = $this.s_markdown.render($this.d_value) 31 | } 32 | function $toolbar_left_save_click($this) { 33 | $this.save($this.d_value, $this.d_render) 34 | } 35 | // ol 36 | function $toolbar_left_ol_click($this) { 37 | $this.insertOl() 38 | } 39 | // ul 40 | function $toolbar_left_ul_click($this) { 41 | $this.insertUl() 42 | } 43 | function $toolbar_left_remove_line_click($this) { 44 | $this.removeLine() 45 | } 46 | // 直接添加链接 47 | export const toolbar_left_addlink = (type, text, link, $this) => { 48 | let insert_text = { 49 | prefix: type === 'link' ? `[${text}](` : `![${text}](`, 50 | subfix: ')', 51 | str: link 52 | }; 53 | $this.insertText($this.getTextareaDom(), insert_text); 54 | } 55 | export const toolbar_left_click = (_type, $this) => { 56 | var _param_of_insert_text = { 57 | 'bold': { 58 | prefix: '**', 59 | subfix: '**', 60 | str: $this.d_words.tl_bold 61 | }, 62 | 'italic': { 63 | prefix: '*', 64 | subfix: '*', 65 | str: $this.d_words.tl_italic 66 | }, 67 | 'header': { 68 | prefix: '# ', 69 | subfix: '', 70 | str: $this.d_words.tl_header 71 | }, 72 | 'header1': { 73 | prefix: '# ', 74 | subfix: '', 75 | str: $this.d_words.tl_header_one 76 | }, 77 | 'header2': { 78 | prefix: '## ', 79 | subfix: '', 80 | str: $this.d_words.tl_header_two 81 | }, 82 | 'header3': { 83 | prefix: '### ', 84 | subfix: '', 85 | str: $this.d_words.tl_header_three 86 | }, 87 | 'header4': { 88 | prefix: '#### ', 89 | subfix: '', 90 | str: $this.d_words.tl_header_four 91 | }, 92 | 'header5': { 93 | prefix: '##### ', 94 | subfix: '', 95 | str: $this.d_words.tl_header_five 96 | }, 97 | 'header6': { 98 | prefix: '###### ', 99 | subfix: '', 100 | str: $this.d_words.tl_header_six 101 | }, 102 | 'underline': { 103 | prefix: '++', 104 | subfix: '++', 105 | str: $this.d_words.tl_underline 106 | }, 107 | 'strikethrough': { 108 | prefix: '~~', 109 | subfix: '~~', 110 | str: $this.d_words.tl_strikethrough 111 | }, 112 | 'mark': { 113 | prefix: '==', 114 | subfix: '==', 115 | str: $this.d_words.tl_mark 116 | }, 117 | 'superscript': { 118 | prefix: '^', 119 | subfix: '^', 120 | str: $this.d_words.tl_superscript 121 | }, 122 | 'subscript': { 123 | prefix: '~', 124 | subfix: '~', 125 | str: $this.d_words.tl_subscript 126 | }, 127 | 'quote': { 128 | prefix: '> ', 129 | subfix: '', 130 | str: $this.d_words.tl_quote 131 | }, 132 | 'link': { 133 | prefix: '[](', 134 | subfix: ')', 135 | str: $this.d_words.tl_link 136 | }, 137 | 'imagelink': { 138 | prefix: '![](', 139 | subfix: ')', 140 | str: $this.d_words.tl_image 141 | }, 142 | 'code': { 143 | prefix: '```', 144 | subfix: '\n\n```\n', 145 | str: 'language' 146 | }, 147 | 'table': { 148 | prefix: '', 149 | subfix: '', 150 | str: '|column1|column2|column3|\n|-|-|-|\n|content1|content2|content3|\n' 151 | }, 152 | 'aligncenter': { 153 | prefix: '::: hljs-center\n\n', 154 | subfix: '\n\n:::\n', 155 | str: $this.d_words.tl_aligncenter 156 | }, 157 | 'alignright': { 158 | prefix: '::: hljs-right\n\n', 159 | subfix: '\n\n:::\n', 160 | str: $this.d_words.tl_alignright 161 | }, 162 | 'alignleft': { 163 | prefix: '::: hljs-left\n\n', 164 | subfix: '\n\n:::\n', 165 | str: $this.d_words.tl_alignleft 166 | } 167 | }; 168 | if (_param_of_insert_text.hasOwnProperty(_type)) { 169 | // 插入对应的内容 170 | $this.insertText($this.getTextareaDom(), 171 | _param_of_insert_text[_type]); 172 | } 173 | var _other_left_click = { 174 | 'undo': $toolbar_left_undo_click, 175 | 'redo': $toolbar_left_redo_click, 176 | 'trash': $toolbar_left_trash_click, 177 | 'save': $toolbar_left_save_click, 178 | 'ol': $toolbar_left_ol_click, 179 | 'ul': $toolbar_left_ul_click, 180 | 'removeLine': $toolbar_left_remove_line_click 181 | }; 182 | if (_other_left_click.hasOwnProperty(_type)) { 183 | _other_left_click[_type]($this); 184 | } 185 | } 186 | -------------------------------------------------------------------------------- /src/components/markdown/lib/toolbar_right_click.js: -------------------------------------------------------------------------------- 1 | function $toolbar_right_html_click($this) { 2 | $this.s_html_code = !$this.s_html_code 3 | if ($this.htmlcode) { 4 | $this.htmlcode($this.s_html_code, $this.d_value) 5 | } 6 | } 7 | 8 | function $toolbar_right_help_click($this) { 9 | $this.s_help = !$this.s_help 10 | if ($this.helptoggle) { 11 | $this.helptoggle($this.s_help, $this.d_value) 12 | } 13 | } 14 | // 导航 15 | function $toolbar_right_read_click($this) { 16 | let element = $this.$refs.vReadModel 17 | // 单栏编辑 18 | if (element.requestFullscreen) { 19 | element.requestFullscreen(); 20 | } else if (element.mozRequestFullScreen) { 21 | element.mozRequestFullScreen(); 22 | } else if (element.webkitRequestFullscreen) { 23 | element.webkitRequestFullscreen(); 24 | } else if (element.msRequestFullscreen) { 25 | element.msRequestFullscreen(); 26 | } 27 | } 28 | 29 | function $toolbar_right_preview_click($this) { 30 | $this.s_preview_switch = !$this.s_preview_switch 31 | // $this.$refs.vNoteDivEdit.innerHTML = $this.s_markdown.render($this.d_value) 32 | if ($this.previewtoggle) { 33 | $this.previewtoggle($this.s_preview_switch, $this.d_value) 34 | } 35 | } 36 | 37 | function $toolbar_right_fullscreen_click($this) { 38 | $this.s_fullScreen = !$this.s_fullScreen 39 | if ($this.fullscreen) { 40 | $this.fullscreen($this.s_fullScreen, $this.d_value) 41 | } 42 | } 43 | function $toolbar_right_subfield_click ($this) { 44 | $this.s_subfield = !$this.s_subfield 45 | $this.s_preview_switch = $this.s_subfield; 46 | // $this.$refs.vNoteDivEdit.innerHTML = $this.s_markdown.render($this.d_value) 47 | if ($this.previewtoggle) { 48 | $this.previewtoggle($this.s_preview_switch, $this.d_value) 49 | } 50 | // $this.$refs.vNoteDivEdit.innerHTML = $this.s_markdown.render($this.d_value) 51 | if ($this.subfieldtoggle) { 52 | $this.subfieldtoggle($this.s_subfield, $this.d_value) 53 | } 54 | } 55 | function $toolbar_right_navigation_click($this) { 56 | $this.s_navigation = !$this.s_navigation 57 | if ($this.s_navigation) { 58 | $this.s_preview_switch = true; 59 | } 60 | if ($this.navigationtoggle) { 61 | $this.navigationtoggle($this.s_navigation, $this.d_value) 62 | } 63 | if ($this.s_navigation) { 64 | // 绘制标题导航 65 | $this.getNavigation($this, false) 66 | } 67 | } 68 | export const toolbar_right_click = (_type, $this) => { 69 | var _other_right_click = { 70 | 'help': $toolbar_right_help_click, 71 | 'html': $toolbar_right_html_click, 72 | 'read': $toolbar_right_read_click, 73 | 'preview': $toolbar_right_preview_click, 74 | 'fullscreen': $toolbar_right_fullscreen_click, 75 | 'navigation': $toolbar_right_navigation_click, 76 | 'subfield': $toolbar_right_subfield_click 77 | } 78 | if (_other_right_click.hasOwnProperty(_type)) { 79 | _other_right_click[_type]($this); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/markdown/lib/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 深度拷贝对象 3 | * @param target 4 | * @param arg 5 | * @returns {*} 6 | * @constructor 7 | */ 8 | export function p_ObjectCopy_DEEP(target, arg) { 9 | for (let arg_item in arg) { 10 | let type = typeof arg[arg_item]; 11 | if (!target[arg_item] || (type !== 'Object' && type !== 'object')) { 12 | target[arg_item] = arg[arg_item]; 13 | continue; 14 | } else { 15 | target[arg_item] = p_ObjectCopy_DEEP(target[arg_item], arg[arg_item]); 16 | } 17 | } 18 | return target; 19 | }; 20 | 21 | /** 22 | * 解析url参数 23 | */ 24 | export function p_urlParse() { 25 | let url = window.location.search; 26 | let obj = {}; 27 | let reg = /[?&][^?&]+=[^?&]+/g; 28 | let arr = url.match(reg); 29 | if (arr) { 30 | arr.forEach((item) => { 31 | let tempArr = item.substring(1).split('='); 32 | let key = decodeURIComponent(tempArr[0]); 33 | let val = decodeURIComponent(tempArr[1]); 34 | obj[key] = val; 35 | }) 36 | } 37 | return obj; 38 | }; 39 | 40 | export function stopEvent(e) { 41 | if (!e) { 42 | return; 43 | } 44 | if (e.preventDefault) { 45 | e.preventDefault(); 46 | } 47 | if (e.stopPropagation) { 48 | e.stopPropagation(); 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /src/components/markdown/markdown-preview.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 44 | 45 | -------------------------------------------------------------------------------- /src/components/navbar/nav-article.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/navbar/nav-button.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/navbar/nav-child.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-article.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-booklet.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-box.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 38 | 39 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-tags.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-topics.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-user.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar-userlist.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /src/components/topics/topics-detail.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 55 | 56 | -------------------------------------------------------------------------------- /src/components/topics/topics-list.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/user/user-logo.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/dictionary/boutique/chartsList.js: -------------------------------------------------------------------------------- 1 | import Echarts from '../../assets/img/boutique/chartList/echarts.jpeg'; 2 | import HighCharts from '../../assets/img/boutique/chartList/HighCharts.svg'; 3 | import D3 from '../../assets/img/boutique/chartList/D3.png'; 4 | import Threejs from '../../assets/img/boutique/chartList/Threejs.png'; 5 | import vcharts from '../../assets/img/boutique/chartList/vcharts.png'; 6 | import vueCharts from '../../assets/img/boutique/chartList/vueCharts.png' 7 | 8 | export const chartsList = () => { 9 | let chartsList = [ 10 | { 11 | name: "Echarts", 12 | logo: Echarts, 13 | href: "https://echarts.apache.org/zh/index.html", 14 | describe: "涵盖各行业图表，满足各种需求，多设备随意展示：电脑／手机／平板／大屏", 15 | technology: ['JS', 'charts'], 16 | gitHub: 'https://github.com/apache/incubator-echarts', 17 | time: '2020-02-02' 18 | }, { 19 | name: "HighCharts", 20 | logo: HighCharts, 21 | href: "https://www.highcharts.com.cn", 22 | describe: "兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库", 23 | technology: ['JS', 'charts'], 24 | gitHub: 'https://github.com/hcharts/highcharts', 25 | time: '2020-02-02' 26 | }, { 27 | name: "D3", 28 | logo: D3, 29 | href: "https://d3js.org/", 30 | describe: "通过SVG，Canvas和HTML使数据栩栩如生", 31 | technology: ['JS', 'Canvas', 'SVG'], 32 | gitHub: 'https://github.com/d3/d3', 33 | time: '2020-02-02' 34 | }, { 35 | name: "Threejs", 36 | logo: Threejs, 37 | href: "https://threejs.org/", 38 | describe: "JavaScript 3D库", 39 | technology: ['JS', '3d'], 40 | gitHub: 'https://github.com/mrdoob/three.js', 41 | time: '2020-02-02' 42 | },{ 43 | name: "v-charts", 44 | logo: vcharts, 45 | href: "https://v-charts.js.org", 46 | describe: "基于 Vue2.0 和 ECharts 封装的图表组件", 47 | technology: ['JS', 'charts','Vue'], 48 | gitHub: 'https://github.com/ElemeFE/v-charts', 49 | time: '2020-02-02' 50 | },{ 51 | name: "vue-echarts", 52 | logo: vueCharts, 53 | href: "https://v-charts.js.org", 54 | describe: "基于 Vue2.0 和 ECharts 封装的图表组件", 55 | technology: ['JS', 'charts','Vue'], 56 | gitHub: 'https://github.com/ecomfe/vue-echarts', 57 | time: '2020-02-02' 58 | } 59 | ]; 60 | return chartsList; 61 | }; 62 | -------------------------------------------------------------------------------- /src/dictionary/boutique/uiList.js: -------------------------------------------------------------------------------- 1 | import viewUi from '../../assets/img/boutique/uiList/viewUi.png'; 2 | import iViewUi from '../../assets/img/boutique/uiList/iViewUi.png'; 3 | import ElementUi from '../../assets/img/boutique/uiList/ElementUi.svg'; 4 | import MintUI from '../../assets/img/boutique/uiList/MintUI.svg'; 5 | import VantUI from '../../assets/img/boutique/uiList/VantUI.png'; 6 | import AntDesignUI from '../../assets/img/boutique/uiList/AntDesignUI.svg'; 7 | import WeUI from '../../assets/img/boutique/uiList/WeUI.jpg'; 8 | import BootstrapUi from '../../assets/img/boutique/uiList/BootstrapUi.jpg'; 9 | import MUi from '../../assets/img/boutique/uiList/MUi.png'; 10 | import UniAppUi from '../../assets/img/boutique/uiList/UniAppUi.png'; 11 | 12 | export const uiList = () => { 13 | let uiList = [ 14 | { 15 | name: "View UI", 16 | logo: viewUi, 17 | href: "https://www.iviewui.com/docs/introduce", 18 | describe: "View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品", 19 | technology: ['PC', 'Vue'], 20 | gitHub: 'https://github.com/view-design/ViewUI', 21 | time: '2020-02-02' 22 | }, { 23 | name: "iView-weapp", 24 | logo: iViewUi, 25 | href: "https://weapp.iviewui.com/", 26 | describe: "一套高质量的微信小程序 UI 组件库", 27 | technology: ['小程序', 'Vue'], 28 | gitHub: 'https://github.com/TalkingData/iview-weapp', 29 | time: '2020-02-02' 30 | }, { 31 | name: "Element UI", 32 | logo: ElementUi, 33 | href: "https://element.eleme.cn/#/zh-CN/component/installation", 34 | describe: "一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库", 35 | technology: ['PC', 'Vue'], 36 | gitHub: 'https://github.com/ElemeFE/element', 37 | time: '2020-02-02' 38 | }, { 39 | name: "Element-react", 40 | logo: ElementUi, 41 | href: "https://elemefe.github.io/element-react/index#/zh-CN/quick-start", 42 | describe: "一套为开发者、设计师和产品经理准备的基于 React 开发的桌面端组件库", 43 | technology: ['PC', 'React'], 44 | gitHub: 'https://github.com/ElemeFE/element-react', 45 | time: '2020-02-02' 46 | }, { 47 | name: "Element-angular", 48 | logo: ElementUi, 49 | href: "https://element-angular.faas.ele.me/guide/install", 50 | describe: "一套为开发者、设计师和产品经理准备的基于 Angular 开发的桌面端组件库", 51 | technology: ['PC', 'Angular'], 52 | gitHub: 'https://github.com/ElemeFE/element-angular', 53 | time: '2020-02-02' 54 | }, { 55 | name: "Mint UI", 56 | logo: MintUI, 57 | href: "https://element-angular.faas.ele.me/guide/install", 58 | describe: "基于 Vue.js 的移动端组件库", 59 | technology: ['App', 'Vue'], 60 | gitHub: 'https://github.com/ElemeFE/element-angular', 61 | time: '2020-02-02' 62 | }, { 63 | name: "Vant", 64 | logo: VantUI, 65 | href: "https://youzan.github.io/vant/#/zh-CN/", 66 | describe: "轻量、可靠的移动端 Vue 组件库", 67 | technology: ['App', 'Vue'], 68 | gitHub: 'https://github.com/youzan/vant', 69 | time: '2020-02-02' 70 | }, { 71 | name: "Vant Weapp", 72 | logo: VantUI, 73 | href: "https://youzan.github.io/vant-weapp/#/intro", 74 | describe: "Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用", 75 | technology: ['小程序', 'Vue'], 76 | gitHub: 'https://github.com/youzan/vant-weapp', 77 | time: '2020-02-02' 78 | }, { 79 | name: "Ant-Design", 80 | logo: AntDesignUI, 81 | href: "https://ant.design/index-cn", 82 | describe: "企业级产品设计体系，创造高效愉悦的工作体验", 83 | technology: ['PC', 'Vue'], 84 | gitHub: 'https://github.com/ant-design/ant-design', 85 | time: '2020-02-02' 86 | }, { 87 | name: "WeUI", 88 | logo: WeUI, 89 | href: "https://weui.io/", 90 | describe: "WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一", 91 | technology: ['小程序'], 92 | gitHub: 'https://github.com/Tencent/weui', 93 | time: '2020-02-02' 94 | }, { 95 | name: "Bootstrap", 96 | logo: BootstrapUi, 97 | href: "https://v3.bootcss.com/components/", 98 | describe: "Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目", 99 | technology: ['PC', 'App','HTML','CSS'], 100 | gitHub: 'https://github.com/twbs/bootstrap', 101 | time: '2020-02-02' 102 | }, { 103 | name: "Mui", 104 | logo: MUi, 105 | href: "https://dev.dcloud.net.cn/mui/", 106 | describe: "最接近原生APP体验的高性能前端框架", 107 | technology: ['App','HTML','CSS'], 108 | gitHub: 'https://github.com/dcloudio/mui', 109 | time: '2020-02-02' 110 | }, { 111 | name: "Uni-app", 112 | logo: UniAppUi, 113 | href: "https://uniapp.dcloud.io/", 114 | describe: "uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台", 115 | technology: ['小程序','HTML','CSS'], 116 | gitHub: 'https://github.com/dcloudio/uni-app', 117 | time: '2020-02-02' 118 | } 119 | ]; 120 | return uiList; 121 | }; 122 | -------------------------------------------------------------------------------- /src/dictionary/boutique/websiteList.js: -------------------------------------------------------------------------------- 1 | import juejin from '../../assets/img/boutique/websiteList/juejin.png'; 2 | import w3school from '../../assets/img/boutique/websiteList/w3school.png'; 3 | import w3cplus from '../../assets/img/boutique/websiteList/w3cplus.png'; 4 | import runoob from '../../assets/img/boutique/websiteList/runoob.png'; 5 | import awesomes from '../../assets/img/boutique/websiteList/awesomes.png'; 6 | import kancloud from '../../assets/img/boutique/websiteList/kancloud.png'; 7 | 8 | export const websiteList = () => { 9 | let websiteList = [ 10 | { 11 | name: "菜鸟教程", 12 | logo: runoob, 13 | href: "https://www.runoob.com/", 14 | describe: "菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程", 15 | technology: ['基础技术', '技术教程'], 16 | gitHub: '', 17 | time: '2020-02-02' 18 | }, { 19 | name: "W3School", 20 | logo: w3school, 21 | href: "https://www.w3school.com.cn/", 22 | describe: "在 W3School，你可以找到你所需要的所有的网站建设教程,从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET", 23 | technology: ['基础技术', '技术教程'], 24 | gitHub: '', 25 | time: '2020-02-02' 26 | }, { 27 | name: "w3cplus", 28 | logo: w3cplus, 29 | href: "https://www.w3cplus.com/", 30 | describe: "w3cplus提供了大量的CSS，HTML5,JavaScript，Vue，React等最新前端技术文章，以一起学习进步，共同分享为原则，为打造优秀的前端学习教程而努力", 31 | technology: ['技术文章', '技术教程'], 32 | gitHub: '', 33 | time: '2020-02-02' 34 | }, { 35 | name: "awesomes", 36 | logo: awesomes, 37 | href: "https://www.awesomes.cn/", 38 | describe: "Awesomes-Web前端开发资源库", 39 | technology: ['技术资源', '技术博客'], 40 | gitHub: '', 41 | time: '2020-02-02' 42 | }, { 43 | name: "看云（kancloud）", 44 | logo: kancloud, 45 | href: "https://www.kancloud.cn/special", 46 | describe: "看云专注于文档的在线创作、协作、分享和托管服务，致力于提供最佳的在线创作和阅读体验，让企业和个人可以更方便地发布和管理自己的文档。", 47 | technology: ['技术文档', '文档分享'], 48 | gitHub: '', 49 | time: '2020-02-02' 50 | }, { 51 | name: "掘金", 52 | logo: juejin, 53 | href: "https://juejin.im/", 54 | describe: "一个帮助开发者成长的社区屏", 55 | technology: ['技术社区', '技术博客'], 56 | gitHub: '', 57 | time: '2020-02-02' 58 | }, 59 | ]; 60 | return websiteList; 61 | }; 62 | -------------------------------------------------------------------------------- /src/dictionary/navData.js: -------------------------------------------------------------------------------- 1 | const navClassifyData = { 2 | article: [ 3 | {path:'article',name: '推荐', classify: 'recommend'}, 4 | {path:'article',name: '前端开发', classify: 'web'}, 5 | {path:'article',name: 'Java开发', classify: 'java'} 6 | ], 7 | boutique: [ 8 | {path:'boutique',name: 'Ui框架', classify: 'ui'}, 9 | {path:'boutique',name: '可视化插件', classify: 'charts'}, 10 | {path:'boutique',name: '技术站点', classify: 'website'} 11 | ] 12 | }; 13 | 14 | export const getNavClassifyData = (classify) => { 15 | let classifyData = new Array(); 16 | if (classify != '') { 17 | classifyData = navClassifyData[classify]; 18 | } 19 | return classifyData; 20 | } -------------------------------------------------------------------------------- /src/libs/test.js: -------------------------------------------------------------------------------- 1 | export const test = () => { 2 | return true; 3 | } 4 | -------------------------------------------------------------------------------- /src/libs/viewScroll.js: -------------------------------------------------------------------------------- 1 | // 距离顶部的距离 2 | export const scrollTopNum = () => { 3 | let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 4 | return top 5 | } 6 | 7 | // 获取右侧的高度 8 | export const getAttriHeight = (event) => { 9 | let height = event.offsetHeight || event.clientHeight; 10 | return height; 11 | } 12 | 13 | // 自动滚动到顶部 14 | export const scrollToTop = () => { 15 | let top = scrollTopNum(); 16 | const timeToTop = setInterval(() => { 17 | document.body.scrollTop = document.documentElement.scrollTop = top -= 50; 18 | if (top <= 0) { 19 | clearInterval(timeToTop); 20 | } 21 | }, 10); 22 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import store from './store'; 4 | import router from './router'; 5 | import 'view-design/dist/styles/iview.css'; 6 | import './assets/css/common.css'; 7 | import './assets/css/fontAwesome.css'; 8 | import './assets/less/index.less'; 9 | 10 | Vue.config.productionTip = false 11 | 12 | new Vue({ 13 | store, 14 | router, 15 | render: h => h(App), 16 | }).$mount('#app') 17 | -------------------------------------------------------------------------------- /src/markdownFile/test.md: -------------------------------------------------------------------------------- 1 | ## 相关链接 2 | - [gitHub地址-Vue版本](https://github.com/maxiaoqu/vue-blog) 3 | - [gitHub地址-React版本](https://github.com/maxiaoqu/react-blog) 4 | - [案例地址](http://github.maxiaoqu.com/vue-blog/) -------------------------------------------------------------------------------- /src/router/getRouter.js: -------------------------------------------------------------------------------- 1 | import Index from '../components/frame/index'; 2 | import Home from '../components/frame/home'; 3 | import Child from '../components/frame/child'; 4 | 5 | // 首页 6 | export const indexRouter = [{ 7 | path: '/', 8 | name: '_index', 9 | redirect: '/index/', 10 | meta: { 11 | title: '首页', 12 | }, 13 | component: Index, 14 | children: [{ 15 | path: 'index', 16 | name: 'index', 17 | meta: { 18 | title: '首页' 19 | }, 20 | component: () => import ("@/views/article/index.vue") 21 | }] 22 | }] 23 | 24 | // 文章、精品 25 | export const nettextRouter = [{ 26 | path: '/nettext', 27 | name: 'nettext', 28 | meta: { 29 | title: '首页', 30 | }, 31 | component: Index, 32 | redirect: '/nettext/article', 33 | children: [{ 34 | path: 'article/:classify', 35 | name: 'article', 36 | meta: { 37 | title: '首页文章' 38 | }, 39 | component: () => import ("@/views/article/index.vue") 40 | },{ 41 | path: 'boutique/:classify', 42 | name: 'boutique', 43 | meta: { 44 | title: '精品推荐' 45 | }, 46 | component: () => import ("@/views/boutique/index.vue") 47 | }] 48 | }] 49 | 50 | // 小册 51 | export const bookletRouter = [{ 52 | path: '/booklet', 53 | name: 'booklet', 54 | redirect: '/booklet/bookList', 55 | meta: { 56 | title: '小册', 57 | key: 'booklet' 58 | }, 59 | component: Home, 60 | children: [{ 61 | path: 'bookList', 62 | name: 'bookList', 63 | meta: { 64 | title: '小册首页' 65 | }, 66 | component: () => import ("@/views/booklet/index.vue") 67 | },{ 68 | path: 'bookDetail/:bookid', 69 | name: 'bookDetail', 70 | meta: { 71 | title: '小册详情' 72 | }, 73 | component: () => import ("@/views/booklet/bookDetail.vue") 74 | }] 75 | }]; 76 | 77 | // 话题 78 | export const topicsRouter = [{ 79 | path: '/topics', 80 | name: 'topics', 81 | redirect: '/topics/topicsList', 82 | meta: { 83 | title: '话题' 84 | }, 85 | component: Home, 86 | children: [{ 87 | path: 'topicsList', 88 | name: 'topicsList', 89 | meta: { 90 | title: '话题首页' 91 | }, 92 | component: () => import ("@/views/topics/index.vue") 93 | },{ 94 | path: 'topicsDetail/:topicid', 95 | name: 'topicsDetail', 96 | meta: { 97 | title: '话题详情' 98 | }, 99 | component: () => import ("@/views/topics/topicsDetails.vue") 100 | }] 101 | }]; 102 | 103 | // 我的 104 | export const useRouter = [{ 105 | path: '/use', 106 | name: 'use', 107 | redirect: '/use/myslf', 108 | meta: { 109 | title: '我的' 110 | }, 111 | component: Home, 112 | children: [{ 113 | path: 'myslf', 114 | name: 'myslf', 115 | meta: { 116 | title: '前端开发' 117 | }, 118 | component: () => import ("@/views/use/index.vue") 119 | }] 120 | }]; 121 | 122 | // 撰写文章 123 | export const editorRouter = [{ 124 | path: '/editor', 125 | name: 'editor', 126 | meta: { 127 | title: '撰写', 128 | }, 129 | component: Child, 130 | redirect: '/editor/articleEditor', 131 | children: [{ 132 | path: 'articleEditor', 133 | name: 'articleEditor', 134 | meta: { 135 | title: '撰写文章' 136 | }, 137 | component: () => import ("@/views/article/articleEditor.vue") 138 | }] 139 | }] 140 | 141 | // 其余 142 | export const serverRouter = [{ 143 | path: '/server', 144 | name: 'server', 145 | meta: { 146 | title: '其他的', 147 | }, 148 | component: Home, 149 | redirect: '/serve/articleDetails', 150 | children: [{ 151 | path: 'articleDetails/:id', 152 | name: 'articleDetails', 153 | meta: { 154 | title: '文章详情' 155 | }, 156 | component: () => import ("@/views/article/articleDetails.vue") 157 | }] 158 | }] 159 | 160 | export const errorRouter = []; 161 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import router from './routers'; 2 | import { 3 | indexRouter, 4 | nettextRouter, 5 | bookletRouter, 6 | topicsRouter, 7 | useRouter, 8 | editorRouter, 9 | serverRouter, 10 | errorRouter 11 | } from './getRouter'; 12 | 13 | // 添加参数，避免多次循环导致的错误 14 | var getRouters; 15 | 16 | // 合并当前所有的路由 17 | const newRouters = (to, next, getrouter) => { 18 | const routerArr = indexRouter.concat(nettextRouter).concat(bookletRouter).concat(topicsRouter).concat(useRouter).concat(editorRouter).concat(serverRouter).concat(errorRouter); 19 | router.addRoutes(routerArr); 20 | next({...to, replace: true}); 21 | }; 22 | 23 | // 当前路由的标题 24 | const routersTitle = title => { 25 | title = "码小趣-" + title || '码小趣'; 26 | window.document.title = title; 27 | }; 28 | 29 | // 路由跳转之前 30 | router.beforeEach((to, from, next) => { 31 | if (!getRouters) { 32 | getRouters = true; 33 | newRouters(to, next); 34 | } 35 | if (to.path === '' || to.path === '/') { 36 | next({ 37 | path: '/' 38 | }) 39 | return; 40 | } else { 41 | next() 42 | return; 43 | } 44 | }) 45 | // 路由跳转之后 46 | router.afterEach((to, from) => { 47 | routersTitle(to.meta.title) 48 | }) 49 | 50 | export default router 51 | -------------------------------------------------------------------------------- /src/router/routers.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | const startRouter = []; 5 | 6 | Vue.use(Router); 7 | export default new Router({ 8 | startRouter, 9 | // mode: 'history' 10 | }); 11 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import Nav from './modules/nav'; 4 | 5 | Vue.use(Vuex) 6 | 7 | export default new Vuex.Store({ 8 | state: {}, 9 | mutations: {}, 10 | actions: {}, 11 | modules: { 12 | Nav 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /src/store/modules/nav.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | navData: [ 4 | {name: '首页', path: 'article', classify: 'recommend', icon: 'home'}, 5 | {name: '精品', path: 'boutique', classify: 'ui', icon: 'heart'}, 6 | {name: '小册', path: 'booklet', classify: '', icon: 'book'}, 7 | {name: '话题', path: 'topics', classify: '', icon: 'telegram'}, 8 | {name: '我的', path: 'user', classify: '', icon: 'user'} 9 | ], 10 | navClassify: [] 11 | }, 12 | getters: { 13 | getNavData(state) { 14 | return state.navData; 15 | }, 16 | getNavClassify(state) { 17 | return state.navClassify; 18 | } 19 | }, 20 | mutations: { 21 | updateNavData(state, navData) { 22 | state.navData = navData; 23 | }, 24 | updateNavClassify(state, navClassify) { 25 | state.navClassify = navClassify; 26 | } 27 | }, 28 | actions: { 29 | setNavData({commit}, navData) { 30 | commit('updateNavData', navData); 31 | }, 32 | setNavClassify({commit}, navClassify) { 33 | commit('updateNavClassify', navClassify); 34 | } 35 | } 36 | }; -------------------------------------------------------------------------------- /src/views/article/articleDetails.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 43 | 44 | 47 | -------------------------------------------------------------------------------- /src/views/article/articleEditor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /src/views/article/articlerDafts.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /src/views/article/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /src/views/booklet/bookDetail.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /src/views/booklet/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /src/views/boutique/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 45 | 46 | 49 | -------------------------------------------------------------------------------- /src/views/topics/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 42 | -------------------------------------------------------------------------------- /src/views/topics/topicsDetails.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/use/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 29 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const consoleInfo = require('./console'); 2 | 3 | // 配置跨域 4 | const proUrlObj = { 5 | // 测试 6 | // target: 'http://168.130.1.33:8097' 7 | 8 | // 线上 9 | target: 'http://server.maxiaoqu.com/' 10 | }; 11 | 12 | module.exports = { 13 | publicPath: './', 14 | lintOnSave: process.env.NODE_ENV !== 'production', 15 | outputDir: process.env.outputDir, 16 | productionSourceMap: false, 17 | filenameHashing: false, 18 | configureWebpack: config => { 19 | config.module.rules.push({ 20 | test: /\.md$/, 21 | loader: 'raw-loader' 22 | }); 23 | }, 24 | chainWebpack: config => { 25 | if (process.env.NODE_ENV === 'production') { 26 | if (process.env.npm_config_report) { 27 | config 28 | .plugin('webpack-bundle-analyzer') 29 | .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) 30 | .end(); 31 | config.plugins.delete('prefetch'); 32 | } 33 | } 34 | }, 35 | devServer: { 36 | port: 1111, 37 | host: 'localhost', 38 | https: false, 39 | open: true, 40 | proxy: { 41 | // 通配【勿动】 42 | '/maxiaoqu': { 43 | target: 'http://168.168.168.168:8888/maxiaoqu', 44 | changeOrigin: true, 45 | pathRewrite: { 46 | '/maxiaoqu': '/' 47 | } 48 | }, 49 | // 联调时的跨域【可进行增加和修改】 50 | '/auth': proUrlObj, 51 | 52 | // 通用统一验证跨域【只可改IP】 53 | '/zuul': proUrlObj, 54 | }, 55 | } 56 | } 57 | --------------------------------------------------------------------------------