使用Hexo和Stellar搭建个人博客网站【超详细贴心保姆级教程💖】

# theme: landscape 默认
theme: stellar

feed:
  type: atom # RSS的类型(atom/rss2)
  path: atom.xml # 文件路径,默认是atom.xml/rss2.xml
  limit: 20 # 展示文章的数量,使用0或则false代表展示全部hub
#  hub:
#    content:  # 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
#    content_limit: # 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
#    content_limit_delim: ' ' #上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容，防止从中间截断

footer:
  social:
	rss:
      icon: '<i class="fa-solid fa-rss fa-shake"></i>'
      url: /atom.xml
      
rss: /atom.xml

recent:
  layout: recent
  rss: atom.xml # npm i hexo-generator-feed
  limit: 5 # Count of posts

render_drafts: false
post_asset_folder: true # false
# marked: # 1.19.0 我是有加这个的，1.21.0我没有加，因为我没有看见什么变化和作用 img_assest这个语法标签我也不用了
#   prependRoot: true
#   postAsset: true

######## JS Plugins ########
plugins:
  ## required plugins ##  # mermaid chart美人鱼流程图配置
  mermaid:
    enable: true
    # js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
    js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js
    # Available themes: default | dark | forest | neutral
    theme: dark # 推荐使用 dark 主题 在夜间模式下显示效果更好

url: https://bxzdyg.cn/  # 网站地址#对于这分享连接网站

article:
  # 如果没有指定封面，是否根据 tags 作为关键词搜索封面图片？
  auto_cover: false # search from https://source.unsplash.com/
  # 如果没有指定横幅，是否根据 tags 作为关键词搜索横幅图片？
  auto_banner: false # search from https://source.unsplash.com/
  # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？
  auto_excerpt: 200
  # 分类颜色
  # category_color: 
    # '探索号': '#f44336' # 不会用qwq
  # 文章许可协议
  license: '本文采用 [署名-非商业性使用-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。'
  # 分享
  share:  [wechat, weibo, email, link]
  # 相关文章，需要安装插件 (for layout: post)
  # npm i hexo-related-popular-posts
  related_posts:
    enable: true
    title: 您可能感兴趣的文章

# url: https://yguang233.github.io/  # 网站地址
url: https://bxzdyg.cn/  # 网站地址 # 对应这分享连接网站

url: https://yguang233.github.io/  # http://YGuang233.github.io
#permalink: :year/:month/:day/:title/
permalink: p/:abbrlink/
abbrlink:
  alg: crc32  #算法： crc16(default) and crc32
  rep: hex    #进制： dec(default) and hex
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

permalink: :year/:month/:day/:title/

permalink: p/:title/

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
# 推送设置
deploy:
  # 类型
  type: git
  # 部署分支名称，按照自己喜欢的起名就可以。这里写完还需要在 GitHub 上进行分支创建并配置
  branch: master
  # 仓库，这里使用的 SSH 方式
  repo: git@github.com:YGuang233/YGuang233.github.io.git
  # 如果你看了 hexo 的文档，这里很清楚。部署的时候会使用这个消息作为提交的信息
  message: Automatic deploy by Github Action：{{ now('YYYY-MM-DD HH:mm:ss') }}

toc:
  layout: toc
  list_number: false # 是否显示序号
  min_depth: 2 # 建议不要低于 2 即从 H2 标签开始解析（H1标签用于文章大标题）
  max_depth: 5 # 5 代表最多解析到 H5 标签
  fallback: recent # Use a backup widget when toc does not exist.

Vue:
  name: Vue
  title: Vue - 渐进式的前端框架
  subtitle: '很开心的学了 | 结果又多了一个学过而不会的技术' # 项目中和主页相似的两个副标题
  tags: 前端  # 分类
  cover: true   # 是否图片
  # cover: [logo, description] # 如果 logo 中已经包含了项目标题，可以这样设置不显示项目标题
  logo:
    src: /assets/wiki/vue/vue-js.svg  # 项目封面
    small: 112px
    large: 240px
  description: 我的Vue学习笔记-不断改进和完善中，欢迎留言批斗，但别说的太过分，我并没有那么坚强。
  #  repo: xaoxuu/hexo-theme-stellar
  #  comment_title: '评论区仅供交流，有问题请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues) 反馈。'
  #  giscus: # 对应仓库
  #    data-repo: xaoxuu/hexo-theme-stellar
  #    data-mapping: number
  #    data-term: 226
  sections:
    '快速开始': [ 0, 99 ]
    '基本使用': [ 100, 199 ]
    '深入组件': [ 200, 299 ]
    '应用规模化': [ 300, 399 ]
    '跨域问题': [ 400, 599 ]
    '进阶主题': [ 600, 699 ]
#  sidebar: [search,toc] #侧边栏
#  index: false #在项目列表中隐藏

name: Vue
title: Vue.js - 渐进式的前端框架
subtitle: '很开心的学了 | 结果又多了一个学过而不会的技术' # 项目中和主页相似的两个副标题
tags: 前端
cover: /assets/wiki/vue/vue-js.svg	# 封面页大图
icon: /assets/wiki/vue/vue-js.svg	# 列表页图标
# coverpage: [logo, description]
coverpage: true # 默认是 true
description: 我的vue学习笔记-不断改进和完善中，欢迎留言批斗，但别说的太过分，我并没有那么坚强。
# repo: xaoxuu/hexo-theme-stellar
sidebar: 
  - search:
    override: search
    filter: /wiki/vue/
    placeholder: '在 Vue笔记 中搜索...'
  - toc
  # - timeline_stellar_releases
  - related
# comment_title: '评论区仅供交流，有问题请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues) 反馈。'
# comments:
#   service: giscus
#   giscus:
#     data-repo: xaoxuu/hexo-theme-stellar
#     data-mapping: number
#     data-term: 226
path: /wiki/vue/
toc:
  '快速开始':
    - 'Vue快速入门'
  '基本使用':
    - 'Vue常用指令'
    - 'Vue对象提供的属性功能'
    - 'Vue对象的生命周期'
    - 'Vue组件化开发基础和浅入'
    - '项目构建工具'
  '深入组件':
    - '单文件组件的使用'
  '应用规模化':
    - 'Vue路由'
  '跨域问题':
    - Axios
    - Proxy
    - WebSocket
  '进阶主题':
    - '组合API'
    - 'Vite项目构建工具'
   

 # 上架项目
- Vue

# name: 备忘录
# title: 备忘录
# icon: # 列表页图标
# cover: # 封面页大图
# coverpage: [cover, title, description] # 封面页显示的内容
coverpage: false # 封面页显示的内容

timeline_friend_blog:
  layout: timeline
  title: 朋友的文章
  api: https://api.vlts.cc/output_data/v1/YGuang233/friends-rss-generator
  type: fcircle
  limit: 30 # 限制显示30条

sidebar: [timeline_friend_blog]

welcome:
  layout: markdown
  title: 哈喽~ 旅人：
  content: |
    <img src="https://api.szfx.top/info-card/?word=%E6%AC%A2%E8%BF%8E%E6%9D%A5%E8%AE%BF%20%E5%8D%8A%E9%86%92%E7%9D%80%E7%9A%84%E9%98%B3%E5%85%89%20%E7%9A%84%E5%8D%9A%E5%AE%A2">

<img src="https://api.szfx.top/info-card/?word=%E6%AC%A2%E8%BF%8E%E6%9D%A5%E8%AE%BF%20%E5%8D%8A%E9%86%92%E7%9D%80%E7%9A%84%E9%98%B3%E5%85%89%20%E7%9A%84%E5%8D%9A%E5%AE%A2" fancybox="true">

welcome:
  layout: markdown
  title: 哈喽~ 远道而来的朋友呀~
  content: |
    欢迎来到我这么一个小破站哟~
    希望你能够在这里找到自己想要了解的东西
    <span id="jinrishici-sentence">正在加载今日诗词....</span>
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

welcome:
  layout: markdown
  title: 哈喽~ 远道而来的朋友呀 ：
  content: |
    <p id="hitokoto">
    <a href="#" id="hitokoto_text">:D 获取中...</a>
    </p>
    <script>
    fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
    const hitokoto = document.querySelector('#hitokoto_text')
    hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`
    hitokoto.innerText = data.hitokoto
    })
    .catch(console.error)
    </script>

welcome:
  layout: markdown
  title: 哈喽~ 远道而来的朋友呀 ：
  content: |
    <p id="bxzdyg">
    <span id="bxzdyg_text">:D 获取中...</span>
    </p>
    <script>
    const myTextArray = ['龙年大吉！阖家欢乐！', '目标实现共产主义', '天天幸福快乐！健健康康！远离疾病与伤痛。', '人民万岁！', '我想玩黑神话悟空！','丝之歌！呜呜呜~','天行健！君子以自强不息']; // 将字符替换为你要说的话
    const getRandomText = (array) => {
    return array[Math.floor(Math.random() * array.length)];
    };
    const bxzdyg = document.querySelector('#bxzdyg_text');
    bxzdyg.innerText = getRandomText(myTextArray);
    </script>

footer:
	content: |
        <!--不蒜子计数器-->
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <!--添加一个访问量-->
        <span>
              本"<span style="color: hsl(192 98% 55%); font-weight: bold;">页面</ a></span>"访问 <span id="busuanzi_value_page_pv" style="color: hsl(192 98% 55%); font-weight: bold;"></span> 次 | 👀总访问 <span id="busuanzi_value_site_pv" style="color: hsl(192 98% 55%); font-weight: bold;"></span>       次 | 总访客 <span id="busuanzi_value_site_uv" style="color: hsl(192 98% 55%); font-weight: bold;"></span> 人
        </span>
        </br>
        <span id="runtime_span"></span>
        <script type="text/javascript">
        function show_runtime() {
            window.setTimeout("show_runtime()", 1000);
            X = new Date("2023/09/17 17:00:00");
            Y = new Date();
            T = (Y.getTime() - X.getTime());
            M = 24 * 60 * 60 * 1000;
            a = T / M;
            A = Math.floor(a);
            b = (a - A) * 24;
            B = Math.floor(b);
            c = (b - B) * 60;
            C = Math.floor((b - B) * 60);
            D = Math.floor((c - C) * 60);
            runtime_span.innerHTML = "⏱️本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
        }
        show_runtime();
        </script>

"LXGW WenKai Screen"

style:
  font-size:
    root: 16px	# 阅读字体大小
    body: .9375rem # 15px # 相对大小
    code: 85% # 14px
    codeblock: 0.8125rem # 13px
  font-family:
    logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
    body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
    

# 自定义swiper文章置顶
customSwiperTopArticle:
 enable: true
 css: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/css/swiper/swiper.min.css
 js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/swiper/swiper.min.js
 init_js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/swiper/swiper_init.js

pin: true # 是否置顶
swiper_thumbnail: 图片地址

inject:
  head:
    - <link rel="stylesheet" href="/css/override.css">

footer:
  content: |
    <center>
    <p>本破站由 <a href="/">@BXZDYG</a> 使用 <a target="_blank" rel="noopener" href="https://github.com/xaoxuu/hexo-theme-stellar">Stellar</a> 主题创建。<br>本博客部分素材来源于网络，如有侵权请联系<a href="mailto:1476341845@qq.com">1476341845@qq.com</a>删除<br>本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议，转载请注明出处。</p> 
    </center>

tag_plugins:
  image:
    fancybox: true # true, false  # 全局配置图片点击放大