散装java
  • 其他
散装java
2022-11-24
目录

本站资源

ps：

这些是我备用，做博客用的

# 插件推荐

# 更多插件...

Awesome VuePress (opens new window)

在npm中搜索"vuepress–plugin" (opens new window)

# 社区优秀解决方案

# 1. 站点信息模块 (opens new window)

在首页添加站点信息模块，效果：

在文章页添加文章字数、阅读时间、浏览量，效果：

# 2. 私密文章功能 (opens new window)

当大家想要「云端备份」文章到博客时，又不希望别人看到，该功能能满足你。

# 3. 首页大图模块 (opens new window)

喜欢首页大图模式的朋友可以参考此教程。

# 图标&配图

说明：以下图标非主题内置，你可以选择喜欢的图标右键保存或到图标库下载。更多图标：阿里图标库 (opens new window)

# 萌系图标

# 插画

免费插画 (opens new window)
2D/3D/手绘插画 (opens new window)
阿里插画库 (opens new window)

# 配图

可画-文章配图 (opens new window)

logo生成1 (opens new window)
logo生成2 (opens new window)

# Emoji表情

Emoji百科 (opens new window)

效果如下：

你好😄，我喜欢🐶，我小时候经常拿💯分哦~~~，欢迎来到我的博客❤️，一起学习吧💪

很多指令肯定是记不了的，我们可以也可以去特定的网站获取表情的格式。也可以 copy 一个表情过来，markdown 自动解析表情。

分享一些 emoji 网站：

小技巧

在任意输入框快速打开emoji表情方法：
Windows系统下按Win + .
Mac系统下按Control + Command + 空格

# 代码高亮


 


 
 
 





 


return {
      // 数据
      options,
      activeKey,
      sourceLabels,
      sourceForm,
      addForm,
      addRules,
      sourceRules,
      // 函数
      displayRender,
      submitProdoce,
      onAddClose,
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 行数区间: 例如 {5-8}, {3-10}, {10-17}
  • 多个单行: 例如 {4,7,9}
  • 行数区间与多个单行: 例如 {4,7-13,16,23-27,40}

# 徽章

# 内置

官方自带。详细使用可前往官网 Badge (opens new window)。

#### 《沁园春·雪》 <Badge text="摘"/>
北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。

> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。
1
2
3
4

  • type 有三个参数：tip、warning、error。默认是 tip

  • vertical 有两个参数：top、middle。默认是 top

直接在 markdown 文件使用，效果如下：

# 《沁园春·雪》 摘

北国风光注释，千里冰封，万里雪飘。

译文: 北方的风光。

# 外置

如果想用更多的自定义徽章，可使用 Shields (opens new window)来生成

# 信息框容器

以下一些内容是 Vdoing 主题提供，并非官方提供。

输入：

::: tip
这是一条提示
:::

::: warning
这是一条注意
:::

::: danger
这是一条警告
:::

::: note
这是笔记容器，主题自带，官方没有
:::

::: tip 我的自定义标题
自定义标题的提示框
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出：

提示

这是一条提示

注意

这是一条注意

警告

这是一条警告

笔记

这是笔记容器，主题自带，官方没有

我的自定义标题

自定义标题的提示框

如果想要折叠的容器，如下：也可以自定义标题

::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::
1
2
3
4
5
6
点击查看

这是一个详情块，在 IE / Edge 中不生效

console.log('这是一个详情块')
1

# 布局容器

::: center
  ### 我是居中的内容
  （可用于标题、图片等的居中）
:::

::: right
  [我是右浮动的内容](https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png)
:::

::: theorem VuePress
Vue 驱动的静态网站生成器
::: right
来自 [官网](https://vuepress.vuejs.org/zh/)
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 我是居中的内容

（可用于标题、图片等的居中）

我是右浮动的内容 (opens new window)

VuePress

Vue 驱动的静态网站生成器

来自 VuePress官网 (opens new window)

提示

没有 left 和 top、bottom

# 代码块选项卡v1.8.0+

在 <code-group> 中嵌套 <code-block> 来配合使用。在 <code-block> 标签添加 title 来指定 tab 标题，active 指定当前 tab：

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

    yarn add vuepress-theme-vdoing -D
    1
    npm install vuepress-theme-vdoing -D
    1
    // Make sure to add code blocks to your code group

    注意

    请在 <code-group> 标签与 markdown 内容之间使用空行隔开，否则可能会解析不出来。

    提示

    Vdoing 解释该组件仅适用于放置代码块，放其他内容在体验上并不友好。经过测试，我放入文字也是可以的。

    而且 <code-block> 放在 <code-group> 里时，首行需要缩进两个空格，经过测试，四个空格出问题。

    如果你喜欢 ::: tabs 代替 <code-group>，那么我们可以下载 vuepress-plugin-tabs 插件。点击跳到 Tabs 插件安装。

    # 普通卡片列表

    如果想使用 友链 功能，但是 vdoing 主题并没有直接在首页实现该功能，要么使用 卡片列表，要么自己手动实现html。而 卡片列表 目前只能使用在 markdown 文档里，下方介绍。

    普通卡片列表容器，可用于 友情链接、项目推荐、诗词展示 等。

    输入：

    ::: cardList
```yaml
- name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: '#FFB6C1' # 可选，默认 var(--bodyBg)。颜色值有 # 号时请添加单引号
  textColor: '#621529' # 可选，默认 var(--textColor)
  
- name: butcher2000
  desc: 即使再小的帆，也能远航
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/20211029181901.png
  link: https://blog.csdn.net/weixin_46827107
  bgColor: '#CBEAFA' 
  textColor: '#6854A1' 
  
- name: Evan's blog
  desc: 前端的小学生
  avatar: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://xugaoyi.com/
  bgColor: '#B9D59C'
  textColor: '#3B551F'
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    输出：

    George Chan

    让我给你讲讲他的传奇故事吧

    butcher2000

    即使再小的帆，也能远航

    Evan's blog

    前端的小学生

    - name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: '#FFB6C1' # 可选，默认 var(--bodyBg)。颜色值有 # 号时请添加单引号
  textColor: '#621529' # 可选，默认 var(--textColor)
  
- name: butcher2000
  desc: 即使再小的帆，也能远航
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/20211029181901.png
  link: https://blog.csdn.net/weixin_46827107
  bgColor: '#CBEAFA' 
  textColor: '#6854A1' 
  
- name: Evan's blog
  desc: 前端的小学生
  avatar: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://xugaoyi.com/
  bgColor: '#B9D59C'
  textColor: '#3B551F'
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # 语法

    ::: cardList <每行显示数量>
``` yaml
- name: 名称
  desc: 描述
  avatar: https://xxx.jpg # 头像，可选
  link: https://xxx/ # 链接，可选
  bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
  textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    • <每行显示数量>：一行内显示多少个卡片，值范围 1~4，默认是 3 个，上方的卡片正好是三个，如果再多一个卡片，就会被换到下一行

    • 代码块需指定语言为 yaml

    • 代码块内是一个 yaml 格式的数组列表

    • 数组成员的属性有：

      • name：名称
      • desc：描述
      • avatar：头像，可选
      • link：链接，可选
      • bgColor：背景色，可选，默认 var(--bodyBg)。颜色值有 # 号时请添加引号
      • textColor：文本色，可选，默认 var(--textColor)

    不指定颜色，默认为白色，如下演示：

    ::: cardList 2
```yaml
- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  bgColor: '#F0DFB1'
  textColor: '#242A38'
  
- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    《静夜思》

    床前明月光，疑是地上霜。举头望明月，低头思故乡。

    Vdoing

    🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题

    - name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  
- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
    1
    2
    3
    4
    5
    6
    7
    8

    # 图文卡片列表v1.1.0 +

    图文卡片列表容器，可用于 项目展示、产品展示 等。

    先看效果：

    标题

    描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

    Young Kbt

    标题

    描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

    Young Kbt

    标题

    描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

    Young Kbt
    - img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: Young Kbt # 作者，可选
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png # 头像，可选
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    ::: cardImgList
```yaml
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: Young Kbt # 作者，可选
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png # 头像，可选
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.staticaly.com/gh/Kele-Bingtang/static@master/user/avatar2.png
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    # 语法

    ::: cardImgList <每行显示数量>
``` yaml
- img: https://xxx.jpg # 图片地址
  link: https://xxx.com # 链接地址
  name: 标题
  desc: 描述 # 可选
  author: 作者名称 # 可选
  avatar: https://xxx.jpg # 作者头像，可选
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    • <每行显示数量> 数字，表示每行最多显示多少个，选值范围 1~4，默认 3。在小屏时会根据屏幕宽度减少每行显示数量。
    • 代码块需指定语言为 yaml
    • 代码块内是一个 yaml 格式的数组列表
    • 数组成员的属性有：
      • img：图片地址
      • link：链接地址
      • name：标题
      • desc：描述，可选
      • author：作者名称，可选
      • avatar：作者头像，可选

    # Tabs插件

    官网：https://github.com/pskordilakis/vuepress-plugin-tabs (opens new window)

    安装插件：

    :::: tabs :options="{ useUrlFragment: false }"

    ::: tab yarn

    yarn add vuepress-plugin-tabs vue-tabs-component
    1

    :::

    ::: tab npm

    npm install vuepress-plugin-tabs vue-tabs-component
    1

    :::

    ::::

    在 .vuepress/styles/index.styl 添加如下内容：

    @require '~vuepress-plugin-tabs/dist/themes/default.styl'
    1

    在 .vuepress/config.js 中添加如下内容：

    module.exports = {
  plugins: [ 'tabs' ]
}
    1
    2
    3

    启动项目，下面是使用的 demo。

    :::: tabs cache-lifetime="5" :options="{ useUrlFragment: false }"
::: tab title 
**markdown content**
:::
::: tab javascript 
``` javascript
() => {
  console.log('Javascript code example')
}
```
:::
::::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    cache-lifetime 是存活时间，默认 5 分钟，即关闭网页五分钟内回来，当时选中的哪个 tabs，就会显示该内容，5 分钟后默认回到到第一个 tabs。

    :options="{ useUrlFragment: false }" 建议写上，不然每次点击任意 tabs，都会刷新一次当前页面，没有必要。

    效果：

    :::: tabs cache-lifetime="5" :options="{ useUrlFragment: false }" ::: tab title markdown content ::: ::: tab javascript

    () => {
  console.log('Javascript code example')
}
    1
    2
    3

    ::: ::::

    # Demo插件（因为兼容问题，目前已经不使用）

    为了更直观的展示一些代码的效果，博客添加了 demo 模块插件，可查看 demo、源码，以及跳转到 codepen 在线编辑。目前支持 vue、react 或 native js 示例。 demo 目前支持 [vanilla] 、[React]、[Vue]，如果不填写 []，默认是 [vue]。

    插件官网：https://github.com/xiguaxigua/vuepress-plugin-demo-block/ (opens new window)

    演示代码：

    <!-- Vue 的 demo -->
::: demo
```html
<template>
  <div class="box-vue">Vue {{ message }}</div>
</template>
<script>
export default {
  data: () => ({ message: 'Hello World' })
}
</script>
<style>
.box-vue { color: red; }
</style>
```
:::

<!-- React 的 demo -->
::: demo [react]
```js
export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { message: 'Hello World' }
  }
  render () {
    return (
      <div className="box-react">
        React {this.state.message}
      </div>
    )
  }
}
App.__style__ = `
  .box-react { color: red; }   
`
```
:::

<!-- vanilla 的 demo -->
::: demo [vanilla]
```html
<html>
  <div id="vanilla-box"></div>
</html>
<script>
  var box = document.getElementById('vanilla-box')
  box.innerHTML = 'Hello World! Welcome to EB'
</script>
<style>
#vanilla-box {
  color: #11a8cd;   /* 标题颜色 */
}
</style>

```
:::
    1
    2
    3
    4
    5
    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57

    输出结果：

    上次更新: 2022/12/29, 19:53:09
    如何搭建博客
    常用技术工具官网

    ← 常用技术工具官网→

    Theme by Vdoing | Copyright © 2022-2024 散装java | MIT License | 鲁ICP备2022022143号