style(vuepress-theme-reco): optimize

Author: reco_luan

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 yarn-error.log
 .idea
+.DS_Store

packages/vuepress-theme-reco/components/SidebarLink.vue

@@ -92,7 +92,7 @@ a.sidebar-link
   display block!important
   color var(--text-color)
   padding 0.35rem 1rem 0.35rem 2.25rem
-  line-height 1.4
+  line-height 1.7
   background var(--background-color)
   // margin 0 0 0 1.5rem
   box-sizing: border-box

packages/vuepress-theme-reco/enhanceApp.js

@@ -1,5 +1,7 @@
 import postMixin from '@theme/mixins/posts'
 import localMixin from '@theme/mixins/locales'
+import { addLinkToHead } from '@theme/helpers/utils'
+import { registerCodeThemeCss } from '@theme/helpers/other'
 
 export default ({
   Vue,
@@ -9,16 +11,7 @@ export default ({
   Vue.mixin(postMixin)
   Vue.mixin(localMixin)
   if (!isServer) {
-    _registerCodeThemeCss(siteData.themeConfig.codeTheme)
+    addLinkToHead('//at.alicdn.com/t/font_1030519_2ciwdtb4x65.css')
+    registerCodeThemeCss(siteData.themeConfig.codeTheme)
   }
 }
-
-function _registerCodeThemeCss (theme = 'tomorrow') {
-  const themeArr = ['tomorrow', 'funky', 'okaidia', 'solarizedlight', 'default']
-
-  const link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.href = `//prismjs.com/themes/prism${themeArr.indexOf(theme) > -1 ? `-${theme}` : ''}.css`
-
-  document.head.append(link)
-}

packages/vuepress-theme-reco/helpers/other.js

@@ -1,3 +1,4 @@
+import { addLinkToHead } from './utils'
 export function getOneColor () {
   const tagColorArr = [
     '#e15b64',
@@ -16,3 +17,10 @@ export function getOneColor () {
   const index = Math.floor(Math.random() * tagColorArr.length)
   return tagColorArr[index]
 }
+
+export function registerCodeThemeCss (theme = 'tomorrow') {
+  const themeArr = ['tomorrow', 'funky', 'okaidia', 'solarizedlight', 'default']
+  const href = `//prismjs.com/themes/prism${themeArr.indexOf(theme) > -1 ? `-${theme}` : ''}.css`
+
+  addLinkToHead(href)
+}

packages/vuepress-theme-reco/helpers/utils.js

@@ -243,6 +243,15 @@ export function compareDate (a, b) {
   return getTimeNum(b) - getTimeNum(a)
 }
 
+// 向 head 中添加 style
+export function addLinkToHead (href) {
+  const iconLink = document.createElement('link')
+  iconLink.rel = 'stylesheet'
+  iconLink.href = href
+
+  document.head.append(iconLink)
+}
+
 function ensureEndingSlash (path) {
   return /(\.html|\/)$/.test(path)
     ? path

packages/vuepress-theme-reco/images/home-bg.jpg

@@ -49,3 +49,4 @@ $maskColorDark ?= #000
 $homePageWidth = 1126px
 $contentWidth = 860px
 $sidebarWidth = 18rem
+$accentColor = #2c3e50

packages/vuepress-theme-reco/images/home-head.png

@@ -4,7 +4,7 @@
 @require './arrow'
 @require './wrapper'
 @require './toc'
-@require './iconfont.css'
+// @require './iconfont.css'
 
 html, body
   padding 0
@@ -149,7 +149,7 @@ code, kbd, .line-number
   font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
 
 p, ul, ol
-  line-height 1.7
+  line-height 2.2
 
 hr
   border 0