title: 语雀专用测试文章

translate_title: special-test-article

tags: [语雀, 测试]

categories: 工具

cover: https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_38.webp

keywords: [语雀,测试]

description: 语雀测试专用文章, 以后所有文章将自动同步到博客

id: 16

date: 2020-12-15 20:00:00

updated: 2020-12-27 16:00:00


本文首发在语雀

自动同步更新至CC的部落格

当一切准备好后, 语雀主动推送更新文章才会触发 CI , Gitlab 单独触发单独构建 (一平台一仓库搞定所有, 赞, 要不是速度慢了点, 肯定值得推荐的) , 其他平台由 云函数 触发, 由 GitHub Actions 构建, 至此所有镜像站均可完成同步更新

外挂标签测试


{% span center logo large, CC康纳百川 %}

{% span center small, 一个无趣的人 %}


{% poem 水调歌头,苏轼 %}

丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。

明月几时有?把酒问青天。

不知天上宫阙,今夕是何年?

我欲乘风归去,又恐琼楼玉宇,高处不胜寒。

起舞弄清影,何似在人间?

转朱阁,低绮户,照无眠。

不应有恨,何事长向别时圆?

人有悲欢离合,月有阴晴圆缺,此事古难全。

但愿人长久,千里共婵娟。

{% endpoem %}


关于写作格式 我想说首先就是恼人的 front-matter ,导入要注意格式(不然会被转换为二级标题),导出也要注意格式,真的很头疼,这个我想应该先给团队反馈

所以原来的模板是不能用了, 本地和语雀要有两套模板, 但数据存在语雀还是很安全的

---
title: 语雀专用测试文章
tags: [语雀,测试]
categories: [语雀,测试]
cover: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_32.webp'
top_img: false
copyright_author_href: 'https://www.ccknbc.cc/'
keywords: '语雀,测试'
description: 语雀测试专用文章
id: 16
date: 2020-12-15 20:00:00
updated: 2020-12-16 10:30:00
---

即使是这么写, 但要保证和不是 front-matter , 就像文章开头那样即可, 不然就会出问题啦

如上所见, 其他内容无需注意, 均能正常渲染,

  1. front-matter 中的 链接 请使用引号(单引号双引号均可,中文也可,反正会格式化),不然同步过去会识别成 md 格式链接导致报错
  2. 或者当自动识别为链接后也可以鼠标点击链接后,点击取消链接选项变为黑色普通文字即可
  3. 关于上述,我们要记得导出格式为 markdown 而不是 hexo 以获得较好的兼容,以及线程设为一降低出错的可能性
  4. 外链 图片见下文
  5. 采用了 vercel 云函数 api

外链引入图片测试

https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_32.webp

https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_32.webp

!https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_32.webp

以上三种都是错误写法,格式可在语雀查看,下面是正确写法(也就是保证链接自动识别转换为 md 格式后在前面加上!变为md格式图片引用)

!https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_32.webp

但这种写法在语雀无法查看的, 所以请使用 html 或 md (推荐) 语法, 以便在语雀也能正常查看

不过导入的文章不用担心这些啦, 因为已经帮你转换好了导出也是正常的

![测试](https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_38.webp)

image

<img src="https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2020-10-12~18_03_38.webp">

image

<img data-role="image" src="https://cdn.nlark.com/yuque/0/2020/webp/8391407/1608118431216-b79b2e90-a0e6-4304-85a8-23475b588c77.webp?x-oss-process=image%2Fwatermark%2Ctype_d3F5LW1pY3JvaGVp%2Csize_20%2Ctext_Q0PnmoTpg6jokL3moLw%3D%2Ccolor_FFFFFF%2Cshadow_50%2Ct_80%2Cg_se%2Cx_10%2Cy_10%2Fresize%2Cw_1492" data-raw-src="https://cdn.nlark.com/yuque/0/2020/webp/8391407/1608118431216-b79b2e90-a0e6-4304-85a8-23475b588c77.webp?x-oss-process=image%2Fwatermark%2Ctype_d3F5LW1pY3JvaGVp%2Csize_20%2Ctext_Q0PnmoTpg6jokL3moLw%3D%2Ccolor_FFFFFF%2Cshadow_50%2Ct_80%2Cg_se%2Cx_10%2Cy_10" class="image lake-drag-image" alt="oNGhAigG.webp" title="oNGhAigG.webp" style="visibility: visible; width: 691px; height: 389px;">

对于 动态图片 , 因为我开启了图片自动加水印, 所以无法正常显示, 但在编辑页面以及 HEXO 博客 是可以看到的,然后原来的图片也被转换成了


image

看到上面的代码, 我就想问不过为什么不试试直接使用语雀上传图片呢, 这种方式也是个人比较推荐的, 而且可以很方便的设定图片参数, 添加水印等等, 访问还算快, 关键是稳定, 并且读者在语雀也能正常阅读, 所有可以试试把文章导入语雀


语雀上传图片测试

oNGhAigG.webp

如果遇到上传到语雀的图片无法加载的问题, 可以参考这个处理方式 #41

我们可以修改主题模板来达到此效果


使用体验

这个需要过一段时间, 已经报名体验了新版工作台, 并且使用上了, 总的来说还是很方便的, 反馈问题的话也能很快得到回复, 团队是真的在用心做产品


以下为备份配置

GitHub workfolw 

name: Deploy Hexo Public To Pages

on: 
  repository_dispatch:
  workflow_dispatch:
  push:
    branches: master

jobs:
  deploy:
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai
      ALGOLIA_ADMIN_API_KEY: ${{ secrets.ALGOLIA_ADMIN_API_KEY }}
      YUQUE_TOKEN: ${{ secrets.YUQUE_TOKEN }}

    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Setup Node
      uses: actions/setup-node@v2
      with:
        node-version: "12.x"

    - name: Install HEXO CLI
      run: |
        npm install hexo-cli -g

    - name: Catch
      uses: actions/cache@v2
      id: cache-dependencies
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install Dependencies
      if: steps.cache-dependencies.outputs.cache-hit != 'true'
      run: |
        npm install

    - name: Generate
      run: |
        git clone -b json https://github.com/ccknbc-actions/blog-butterfly.git json
        mv -f ./json/yuque.json ./
        npm run start
        mv -f yuque.json ./json/
      # git clone https://github.com/CCKNBC/ccknbc.github.io.git public

    # - name: Create Pull Request
    #   id: yuque
    #   uses: peter-evans/create-pull-request@v3
    #   with:
    #     token: ${{ secrets.GITHUB_TOKEN }}
    #     commit-message: Update Yuque Catch
    #     committer: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
    #     author: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
    #     signoff: false
    #     branch: posts
    #     delete-branch: true
    #     title: 'Update Yuque Catch'

    # - name: Check Outputs
    #   run: |
    #     echo "Pull Request Number - ${{ steps.yuque.outputs.pull-request-number }}"
    #     echo "Pull Request URL - ${{ steps.yuque.outputs.pull-request-url }}"

    - name: Deploy Json To Branch Json
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_branch: json
        publish_dir: ./json
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
    
    - name: Deploy Markdown Posts To Branch Posts
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_branch: posts
        publish_dir: ./source/_posts
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
    
    - name: Deploy Hexo Public To Pages
      run: |
        cd ./public
        git config --global user.name "github-actions[bot]"
        git config --global user.email "github-actions[bot]@users.noreply.github.com"
        git init
        git add -A
        git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
        git push --force --quiet "https://ccknbc:${{ secrets.GH_TOKEN }}@github.com/CCKNBC/ccknbc.github.io.git" master:master
        git push --force --quiet "https://${{ secrets.CD_USER }}:${{ secrets.CD_TOKEN }}@e.coding.net/ccknbc/blog/butterfly.git" master:master
        git push --force --quiet "https://ccknbc:${{ secrets.GT_TOKEN }}@gitee.com/ccknbc/ccknbc.git" master:master

    - name: Update Gitee Pages
      uses: yanglbme/gitee-pages-action@main
      with:
          gitee-username: ccknbc
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          gitee-repo: ccknbc/ccknbc
    
    - name: Purge JsDelivr CDN
      run: |
        curl https://purge.jsdelivr.net/gh/ccknbc/ccknbc.github.io/
      # curl https://purge.jsdelivr.net/gh/ccknbc/ccknbc.github.io/css/index.css
      # curl https://purge.jsdelivr.net/gh/ccknbc/ccknbc.github.io/js/main.js
      # curl https://purge.jsdelivr.net/gh/ccknbc/ccknbc.github.io/js/utils.js

    - name: Delete Workflow Runs
      uses: Mattraks/delete-workflow-runs@main
      with:
        retain_days: 1
        keep_minimum_runs: 1

    - name: Telegram Notification
      if: cancelled() == false
      uses: xinthink/action-telegram@v1.1
      with:
        botToken: ${{ secrets.TG_BOT_TOKEN }}
        chatId: ${{ secrets.TG_CHAT_ID }}
        jobStatus: ${{ job.status }}
        skipSuccess: false

Gitlab CI

image: node:12-alpine
variable:
  script:
    - echo $YUQUE_TOKEN
pages:
  script:
    - npm install hexo-cli
    - test -e package.json && npm install
    - npm run gitlab
  artifacts:
    paths:
      - public
  cache:
    paths:
      - node_modules
    key: project
  only:
    - master

package.json 

{
  "name": "ccknbc-blog",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "github": "yuque-hexo sync && hexo generate && hexo algolia && gulp",
    "gitlab": "yuque-hexo sync && hexo generate && gulp",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "yuqueConfig": {
    "postPath": "source/_posts/语雀",
    "cachePath": "yuque.json",
    "mdNameFormat": "title",
    "adapter": "markdown",
    "concurrency": 3,
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "ccknbc",
    "repo": "blog",
    "onlyPublished": true,
    "onlyPublic": true
  },
  "hexo": {
    "version": "5.3.0"
  },
  "dependencies": {
    "cheerio": "^1.0.0-rc.3",
    "hexo": "^5.3.0",
    "hexo-algoliasearch": "^1.0.0",
    "hexo-charts": "^1.0.3",
    "hexo-deployer-git": "^2.1.0",
    "hexo-filter-nofollow": "^2.0.2",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.9",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-sitemap": "^2.1.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-render-pug": "^2.1.4",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.3.0",
    "hexo-renderer-pug": "^1.0.0",
    "hexo-renderer-stylus": "^2.0.1",
    "hexo-server": "^2.0.0",
    "hexo-tag-mmedia": "^0.2.1",
    "hexo-translate-title-vss": "^1.0.14",
    "hexo-wordcount": "^6.0.1",
    "yuque-hexo": "^1.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-cli": "2.3.0",
    "gulp-html-minifier-terser": "^6.0.1",
    "gulp-htmlclean": "^2.7.22",
    "gulp-uglify": "^3.0.2",
    "workbox-build": "^6.0.2"
  }
}

云函数 

import requests 

def handler(event, context): 
    r = requests.post("https://api.github.com/repos/ccknbc-actions/blog-butterfly/dispatches", 
    json = {"event_type": "start"}, 
    headers = {"User-Agent":'curl/7.52.1', 
                'Content-Type': 'application/json', 
                'Accept': 'application/vnd.github.everest-preview+json', 
                'Authorization': 'token Github-Token'}) #注意替换为自己的token,或者使用环境变量的方式
                
    if r.status_code == 204: 
        return "已成功触发,请等待同步构建完成" 
    else: 
        return r.status_code

关于教程

请前往教程: hexo×语雀 实现云端富文本写作查看@小冰博客

当然其中部分内容存在错误, 请读者自行斟酌


以下部分内容仅语雀可正常显示

公式 (博客没装相关插件)

思维导图

加密文本, 密码 ccknbc 

此处为语雀加密文本,点击链接查看:https://www.yuque.com/ccknbc/blog/16#5OIh5

标签标签标签标签标签

此处为语雀投票卡片,点击链接查看:https://www.yuque.com/ccknbc/blog/16#9Zy0I
此处为语雀文档,点击链接查看:https://www.yuque.com/yuque/help/about?view=doc_embed