CSS实现树形目录展示
前言 今天查看文档的时候看见Astro框架项目的展示,所以打算使用CSS来实现一个类似效果的目录展示 details 和 summary 需要用到details 和 summary这两个标签 Details文档,这两个标签支持展开和收起,这里有一个简单的例子 <details> <summary>Details</summary> Something small enough to escape casual notice.</details> 代码预览<details> <summary>Details</summary> Something small enough to escape casual notice.</details> Details Something small enough to escape casual notice. 还可以支持多层嵌套,套娃details即可(前端套娃术🪆) 如下(Astro项目结构) ----- ...
Astro相册
前言 主题原来是自带相册的,后面被我改了没有分类了,直接所以的图片都展示在一个页面上,但是后面我考虑到如果图片多的话加载的速度可能会更久,所以我打算把相册独立出来. 同时在开发Halo主题的同时,发现了小孙同学博客的独立相册,但是吧这个相册要用typecho,PHP啥的太麻烦了,果断使用Astro搭建一个相册. 预览效果 引用站外地址 个人相册 相册 第一版 第一版本我是模仿小孙同学的相册,只是框架不一样。就写了一个组件然后放到index.astro首页即可. <header id="header"><a style="cursor: pointer;" href="#"> <img class="site-logo" src='/bloghead.webp' alt="头像" ...
TinyCLI上手体验
TinyCLI是什么 TinyCLI 是前端工程化的核心工具。旨在为开发者提供一系列健壮的工具、套件、插件和工作流,基于统一的开发环境,保证团队开发过程的一致性和可复制性。 TinyCLI 提供了类似yeoman的脚手架功能,让你快速的搭建本地开发环境;同时提供了类似于gulp的插件机制,用于解决前端开发过程中的各类问题。 TinyCLI 的设计思想来源于 npm,npm 本身不具备太多的功能,只是一个包管理工具。TinyCLI 也是一样,TinyCLI 本身不具备任何工程化能力,TinyCLI 只是提供了一个让你写套件(脚手架)、写插件的平台,该平台可以安装、管理、运行对应的套件/插件 TinyCLI的特性 插件体系:丰富的效率插件、流程插件、脚手架套件等, 覆盖从开发->构建->发布的所有生命周期 自动化安装与升级:无需手动安装和升级插件 增强版任务流机制:类似npm scripts的任务机制,但功能更加强大,支持同步和异步两种任务执行方式 高效易用:提供了一站式的项目开发脚手架, 满足不同场景诉求 TinyCLI的安装 需要有 Node.js 与 NPM环境 ...
Astro搭建网站
前言 最近我在更新 WebStorm的时候发现它支持Astro,好奇心的驱使下搜索了一下这个Astro,一看发现是个好东西🤭,于是就有了这篇文章,本文不会教入门教程,后续会写一篇专门的入门到入狱教程 优点 速度快 SEO友好 响应式 支持多种框架 React、Preact、Svelte、Vue、Solid、Lit等 先决条件 最基础的你需要有 NodeJS,如果你没有的话,可以去NodeJS官网下载安装 需要有一定的编码基础,如果你没有的话,可以去菜鸟教程学习 如果学过一些前端的框架,Astro会更加容易上手 搭建博客 Astro框架它是支持Markdown解析,所以搭建的博客本质上和Hexo没有太大差别 可以参考官方教程搭建博客 使用官方提供的主题模版enblog 我也仿了一个博客,博客原参考友链中的西瓜撞地球 大概花了1个小时😢 效果 本质上和西瓜撞地球的博客差别不大,分页有点区别(主要是我不想写了🫣) 和 评论系统有点区别(twikoo) 代码其实很少,主要就是把每个界面进行拆分,全部组件化,组件化之后使用套娃术 首页 归档 朋友圈 友链 文章页 ...
Hexo工作流CI
前言 之前我写完博客后会通过webstorm把生成的静态文件上传到服务器,感觉比较麻烦,而且浪费时间. webstorm上传到服务器 工作流 在项目下创建.github文件,在文件下创建workflow文件夹,在文件夹下创建main.yml secrets.USERNAME:用户名 secrets.FTP_SERVER:服务器IP secrets.SSH_PRIVATE_KEY:SSH密钥 name: Deploy to Serveron: push: branches: - mainjobs: deploy: name: Deploy runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkout@v2 - name: Installation Node uses: actions/setup-node@v1 with: node-version: "16.x" ...
Centos安装MySQL8.0
此示例将数据库文件上传至opt文件夹下面 下载数据库 下载地址 上传数据库 使用xftp上传mysql安装包到服务器 如果你的其他服务器也有这个包可以选择用命令的形式上传 rsync -P --rsh=ssh root@另一台服务器IP:文件位置 存放到本服务器位置//示例 从192.168.0.1下的opt文件夹下面的mysql传到本服务器的opt文件夹下面rsync -P --rsh=ssh root@192.168.0.1:/opt/mysql.tar /opt/ 解压 tar -xvf mysql-8.0.26-linux-glibc2.12-x86_64.tar 移动修改文件名 mv ./mysql-8.0.26-linux-glibc2.12-x86_64.tar ./mysql8.0 建data文件夹 在mysql8.0下面创建data文件夹 # 接入mysql8.0文件夹cd mysql8.0# 创建data文件mkdir data 创建用户组 groupadd mysql;useradd -g mysql mysql; 修改文件权限 chown -R mysql ...
IDEA插件开发
准备工作 需要安装gradle 和 JDK>11 ,可以参考 Gradle安装 和 JDK多版本切换 插件项目 添加外部依赖 在 build.gradle.kts中添加 dependencies { implementation("org.json:json:20220320") implementation("com.google.code.gson:gson:2.10.1")} 插件辅助开发 创建GUI界面
Mac安装NVM
前言 本人在电脑上安装了 npm、pnpm、yarn 每个项目可能node版本不同,电脑一般单独安装一个nodejs版本,所以使用nvm管理node 使用 nvm 管理 node 版本 使用 nrm 管理 npm 源 如果之前安装了node执行下面命令卸载node sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/local/share/man/man1/node.1sudo rm /usr/local/lib/dtrace/node.d 安装NVM 安装命令 最新版本的安装命令参考 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/insta ...
Mac搭建rust环境
前言 Mac需要安装Homebrew才能执行下面命令!Homebrew安装参考 安装 下载 brew install rustup 初始化 rustup-init 输入1 直接回车 配置环境 按提示配置即可 source "$HOME/.cargo/env" 验证 rustc --version 没有安装xcode的还需要执行下面命令 xcode-select --install 创建项目 在webstrom或者CLion中安装rust插件 创建 运行成功
SpringBoot构建Docker
打包 创建dockerfile文件 FROM openjdk:8 # JDK的版本 COPY anonymous.jar anonymous.jar # 路径 名字 EXPOSE 8090 暴露的端口 CMD [“java”, “-jar”, “anonymous.jar”] 运行的命令 :java -jar anonymous.jar FROM openjdk:8COPY anonymous.jar anonymous.jarEXPOSE 8090CMD ["java", "-jar", "anonymous.jar"] 构建 docker build -t anonymous . 运行 docker run -p 8090:8090 anonymous 在本地docker查看 运行










