vuepress-theme-reco主题各种插件完善

2020-09-07 本文已影响0人 w晚风

前言：虽然Vuepress的vuepress-theme-reco主题已经很完美了，但为了更加适合自己，我们可以自己更改其代码加上各种插件做成自己喜欢的风格

1. 修改主题颜色

我这里暂时没有修改，如有需要可以通过配置 .vuepress/styles/palette.styl 来快速修改主题的一些颜色属性。(如果不存在该目录和文件就创建一个)

// 默认值
$accentColor = #3eaf7c                      // 主题颜色
$textColor = #2c3e50                        // 文本颜色
$borderColor = #eaecef                      // 边框线颜色
$codeBgColor = #282c34                      // 代码块背景色
$backgroundColor = #ffffff                  // 悬浮块背景色

2. 修改主题样式

你可以创建一个 .vuepress/styles/index.styl 文件以方便地添加额外样式。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法，我的修改如下，主要是改进了文档页面的可读性和操作性：

// 侧边栏样式
// 左侧侧边栏标题
.sidebar > .sidebar-links > li > a.sidebar-link {
  font-size: 1.5em !important;
  margin-left: -1em;
}
// 右侧文章标题导航栏
a.sidebar-link {
  font-size: 16px !important;
}
// 左侧边栏标题字体大小样式
.sidebar-heading span{
    font-size: 1.2em;
    font-weight: bold;

}
.sidebar-heading.open span{
    font-weight: bold;
}


// 左侧边栏展开文章的字体大小
a.sidebar-link.active {
    color: #070808 !important;
    font-size: 14px !important;
    background: #c3d4b742 !important;
}
.sidebar-sub-headers a.sidebar-link {
    margin: 0 1rem 0 1rem !important;
}
// 分组的透明度修改，未生效
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
    opacity: 0.5;
}

// 去除左上角标题，作者，标签等
.page .page-title {
    display: none;
}

3. 引用脚本与样式

这个操作类似butterfly主题中的inject，你可以通过配置 .vuepress/config.js 中的 head 来引入脚本与样式。

通过外挂css和js来对主题样式曾铁，例如点击效果，花瓣雨等等特效。

module.exports = {
  head: [
    ["link", { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" }],
    ["script", { src: "scripts/demo.js" }]
  ]
}

比如上面的配置就会被解析为

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
  <script src="scripts/demo.js"></script>
</head>

关于 head 的详细配置说明请参考官方文档 head 配置

4. 引入鼠标点击效果

在.vuepress\public\js文件夹下创建MouseClickEffect.js文件，填入以下代码

var a_idx = 0;

function getRandom(max, min) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": `rgb(${getRandom(255,0)},${getRandom(255,0)},${getRandom(255,0)})`,
            "user-select": 'none',
            "cursor": 'default'
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function () {
                $i.remove();
            });
    });
});

然后在主题配置文件config.js下的head引入以上js，这里的jquery必须引入，鼠标点击代码才能生效

head: [
  // 网页标签栏图标
  ['link', { rel: 'icon', href: '/vuepress/favicon.ico' }],
  // 移动栏优化
  ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }],
  // 引入jquery
  ["script", {
    "language": "javascript",
    "type": "text/javascript",
    "src": "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
  }],
  // 引入鼠标点击脚本
  ["script", {
    "language": "javascript",
    "type": "text/javascript",
    "src": "/js/MouseClickEffect.js"
  }]
],

5. 文章中引入样式和脚本

有时，你可以只想在当前页面应用一些 JavaScript 或者 CSS，在这种情况下，你可以直接在 Markdown 文件中使用原生的或者标签，它们将会从编译后的 HTML 文件中提取出来，并作为生成的 Vue 单文件组件的和标签。

输入

<p class="demo" :class="$style.example"></p>

<style module>
.example {
  color: #41b883;
}
</style>

<script>
export default {
  props: ['slot-key'],
  mounted () {
    document.querySelector(`.${this.$style.example}`)
      .textContent = '这个块是被内联的脚本渲染的，样式也采用了内联样式。'
  }
}
</script>

输出

这个块是被内联的脚本渲染的，样式也采用了内联样式。

6. 音乐插件

目前音乐插件有两种：

bgm-player，一款简洁易用的音乐插件，优势是好看，其他一无是处了🙂
music-bar，一个程序猿自己开发的插件，除本地，网络音频之外还支持从平台歌单获取链接(目前仅支持网易云音乐)，缺点是丑了点，支持一下这位老哥👯
meting，在hexo上就一直用的插件，功能强大，配置丰富，目前应该最大强大的音乐插件了，我用的就是这个，强推👍，还支持在markdown中直接插入，操作如下

<Meting server="netease"
        type="playlist"
        mid="2539599584"
        :lrc-type="3"/>

这里再推荐一个音乐外链网：http://music.xf1433.com/

7. 趣味标题插件

主要在标签栏当时选中和离开页面时会有变化

npm i vuepress-plugin-dynamic-title -D

module.exports = {
  plugins: [
    [
      "dynamic-title",
      {
        showIcon: "/favicon.ico",
        showText: "(/≧▽≦/)咦！又好了！",
        hideIcon: "/failure.ico",
        hideText: "(●—●)喔哟，崩溃啦！",
        recoverTime: 2000
      }
    ]
  ]
}

8. Boxx插件

参考：https://zpj80231.gitee.io/znote/views/front-end/vuepress-plugin-boxx.html

可以为博客文章自动随机添加名人名言或其他，可自定义样式和内容

在文件package.json中的devDependencies下加入"vuepress-plugin-boxx": "0.0.7"：

"devDependencies": {
    "vuepress-plugin-boxx": "0.0.7"
}

在 vuepress 的config.js中配置plugins：

plugins: [
    ["vuepress-plugin-boxx"]
],

在package.json目录下执行命令：npm install
正常启动项目，接着如下使用即可

9. PWA插件本选项开启了一个用于刷新内容的弹窗

npm install -D @vuepress/plugin-pwa

本选项开启了一个用于刷新内容的弹窗。这个弹窗将会在站点有内容更新时显示出来，并提供了一个 refresh 按钮，允许用户立即刷新内容。

果没有“刷新”按钮，则只有在所有的 Clients 被关闭后，新的 Service Worker 才会处于活动状态。这意味着用户在关闭你网站的所有标签之前无法看到新内容。但是 refresh 按钮会立即激活新的 Service Worker。

['@vuepress/pwa', {
        serviceWorker: true,
        updatePopup: {
            message: "发现新内容可用",
            buttonText: "刷新"
        }
    }],

10. 复制弹窗插件

npm install -D vuepress-plugin-nuggets-style-copy

["vuepress-plugin-nuggets-style-copy", {
  copyText: "复制代码",
  tip: {
      content: "复制成功!"
  }
}]

本文来自：小弋の生活馆！

vuepress-theme-reco主题各种插件完善

1. 修改主题颜色

2. 修改主题样式

3. 引用脚本与样式

4. 引入鼠标点击效果

5. 文章中引入样式和脚本

6. 音乐插件

7. 趣味标题插件

8. Boxx插件

9. PWA插件本选项开启了一个用于刷新内容的弹窗

10. 复制弹窗插件

猜你喜欢

热点阅读

vuepress-theme-reco主题 各种插件完善

1. 修改主题颜色

2. 修改主题样式

3. 引用脚本与样式

4. 引入鼠标点击效果

5. 文章中引入样式和脚本

6. 音乐插件

7. 趣味标题插件

8. Boxx插件

9. PWA插件 本选项开启了一个用于刷新内容的弹窗

10. 复制弹窗插件

猜你喜欢

热点阅读

vuepress-theme-reco主题各种插件完善

9. PWA插件本选项开启了一个用于刷新内容的弹窗