Tab 栏案例

在 vuepress 中使用 tab 栏

---

• 案例演示
• 简写
• 带有可折叠功能的 tab 栏

案例演示

无高亮的 Tabs：

# install in your project
yarn add -D vuepress@next

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
yarn vuepress dev

# build to static files
yarn vuepress build

# install in your project
npm install -D vuepress@next

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
npx vuepress dev

# build to static files
npx vuepress build

有高亮的 Tabs：

package main

import (
	"fmt"
)

func main() {
  fmt.println("hello world")
}

这里是测试 tab 2 的内容

简写

vuepress2.0.0-beta.46 及其后续版本支持此功能，此写法会自带行号，可通过 ```bash:no-line-numbers 来去除行号。

输入：

    :::: code-group
    ::: code-group-item FOO
    ```js
    const foo = 'foo'
    ```
    :::
    ::: code-group-item BAR
    ```js
    const bar = 'bar'
    ```
    :::
    ::::

输出：

const foo = 'foo'

const bar = 'bar'

新版的 vuepress 可用简写实现 tab 栏效果：tab 栏简写

带有可折叠功能的 tab 栏

• 演示

  • 不可用于生产环境，操作过程如下：

  • cd ~/ocis/build/ocis/ocis/bin/
    rm -rf ~/.ocis && ./ocis init (选择 yes 并记住密码)
    IDM_CREATE_DEMO_USERS=true \
    PROXY_HTTP_ADDR=0.0.0.0:9200 \
    OCIS_URL=https://localhost:9200 \
    ./ocis server
    

生产环境

• 需要安装 Nginx 以及申请 SSL 证书, 下面是操作步骤：

• 安装及创建必备环境:

  • sudo cp ~/ocis/build/ocis/ocis/bin/ocis /usr/local/bin/ocis && sudo chmod +x /usr/local/bin/ocis
    sudo useradd --system --no-create-home --shell=/sbin/nologin ocis
    sudo mkdir -p /var/lib/ocis
    sudo chown ocis:ocis /var/lib/ocis
    sudo mkdir -p /etc/ocis
    sudo touch /etc/ocis/ocis.env
    sudo chown -R ocis:ocis /etc/ocis
    

• 配置环境变量: sudo vim /etc/ocis/ocis.env，添加如下：

  • OCIS_URL=https://ocis.example.com
    PROXY_HTTP_ADDR=0.0.0.0:9200
    PROXY_TLS=false
    OCIS_INSECURE=false
    
    OCIS_LOG_LEVEL=warn
    
    OCIS_CONFIG_DIR=/etc/ocis
    OCIS_BASE_DATA_PATH=/var/lib/ocis
    

• 初始化: sudo -u ocis ocis init --config-path /etc/ocis
• 配置服务: sudo vim /etc/systemd/system/ocis.service，添加如下：

  • [Unit]
    Description=OCIS server
    
    [Service]
    Type=simple
    User=ocis
    Group=ocis
    EnvironmentFile=/etc/ocis/ocis.env
    ExecStart=/usr/local/bin/ocis server
    Restart=always
    
    [Install]
    WantedBy=multi-user.target
    

• 加载并启动服务: sudo systemctl daemon-reload && sudo systemctl enable --now ocis && sudo systemctl restart ocis
• 配置 Nginx: sudo vim /etc/nginx/conf.d/ocis.conf，添加如下：

  • server {
      listen 80 ;
      listen [::]:80 ;
    
      server_name ocis.example.com;
    
      # location to redirect to https
      location / {
          # add port if deviates via OCIS_URL
          return 301 https://$server_name$request_uri;
      }
    }
    
    server {
            # default 443 but can deviate if set in OCIS_URL
            listen 443 ssl http2;
            listen [::]:443 ssl http2;
    
            server_name ocis.example.com;
    
            # certificates managed by Certbot
            ssl_certificate /etc/letsencrypt/live/ocis.example.com/fullchain.pem;
            ssl_certificate_key /etc/letsencrypt/live/ocis.example.com/privkey.pem;
    
            # options and dhparams managed by Certbot
            include /etc/letsencrypt/options-ssl-nginx.conf;
            ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
    
            location / {
                # OIDC Tokens in headers are quite large and can exceed default limits of reverse proxies
                proxy_buffers 4 256k;
                proxy_buffer_size 128k;
                proxy_busy_buffers_size 256k;
    
                # Disable checking of client request body size
                client_max_body_size 0;
    
                proxy_pass http://localhost:9200;
                proxy_set_header Host $host;
            }
    }
    

• 参考链接: Bare Metal Deployment with systemd

文章更新中。。。