搜索到
13
篇与
张涵哲
的结果
-
Typecho Joe 使用第三方插件开启文章侧边导肮目录 - AutocJS 原作者博客：https://www.ydyno.com原文章地址：https://www.ydyno.com/archives/1331.html开源项目地址：https://github.com/yaohaixiao/outline.js原作者非常给力，解决了Typecho的一个痛点：没有导航目录，这里记录一下配置过程以及效果，防止失联1.在自定义Header中添加下面这段代码，代码和效果图如下所示<meta name="baidu-site-verification" content="codeva-8hFVuG0Zv6" /> <style type="text/css"> .outline-outside-modal-opened { z-index: 10000 !important; left: 0; width: 300px !important; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/css/autoc.min.css">2.在自定义body中添加下面这段代码，代码和效果图如下所示<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/autoc.min.js"></script> <script> // 文章导航 if ( $(".joe_detail__article").length > 0 ){ // 创建 Outline 实例 let navigation = new AutocJs({ // 文章正文 DOM 节点的 ID 选择器 article: '.joe_detail__article', // 要收集的标题选择器 selector: 'h1,h2,h3,h4,h5,h6', // 侧边栏导航的标题 title: '导航目录', // 文章导读导航的位置 // outside - 以侧边栏菜单形式显示（默认值） // inside - 在文章正文一开始的地方显示 position: 'outside', // 标题图标链接的 URL 地址 // （默认）没有设置定制，点击链接页面滚动到标题位置 // 设置了链接地址，则不会滚动定位 anchorURL: '', // 链接的显示位置 // front - 在标题最前面（默认值） // back - 在标题后面 anchorAt: 'back', // 是否生成文章导读导航 isGenerateOutline: true, // 是否在文章导读导航中显示段落章节编号 isGenerateOutlineChapterCode: false, // 是否在正文的文章标题中显示段落章节编号 isGenerateHeadingChapterCode: false, // 是否在正文的文章标题中创建锚点 isGenerateHeadingAnchor: false }); } </script>这两个设置好后就OK了！保存设置后回到博客详情页刷新页面看看效果吧 -
-
Linux Ubuntu 22.04 安装使用 Clash 既然已经寻找Linux安装Clash的教程，那么本文就假定你在Windows下已经使用过Clash，有自己的订阅，文章中提到的需要下载的文件，会在末尾提供下载地址，如果找不到或地址失效请联系我补链接，文章不会用傻瓜式命令让你直接安装成功，希望看文章的你最起码懂一些基础的Linux基础命令前置准备工作Linux下的网络环境比较差，所以需要提前在Win下准备好相关文件，首先需要准备的是Clash本身，在Win下可以通过代理访问Github，下载文件比较方便，点击访问Clash下载页面，选择一个合适的版本下载即可然后打开Win下的Clash，在常规页面下点开配置文件主目录，在弹出的目录中将Country.mmdb文件复制出来，这个配置文件是动态IP库，记录各个国家IP地址信息，这样Clash才知道那些是国外网站，哪些是国内网站，在Linux下这个文件需要联网下载，很大概率会失败，所以需要提前准备然后在Win下点开Clash的配置页面，找到目前正在使用的订阅，右键打开文件夹，文件夹打开后资源管理器会默认选中对应的文件，将他复制出来即可现在已经准备好了三个文件，一个是Clash本身，一个是Country.mmdb动态IP库，一个是.yml结尾的订阅文件，现在就可以进入Linux安装Clash了Linux下安装Clash首先将之前准备好的文件放入Linux中，找到之前准备的Clash文件，如果是从Github官网下载的文件，应该是压缩文件，将文件解压后放到/usr/local/bin目录中（推荐该目录，可以在任何位置调用Clash），然后将文件名修改为clash（这里不重要，改名只为调用方便），效果如下所示接下来在任意位置打开终端，输入clash然后回车，如果控制台输出了127.0.0.1:7890的代理地址，就像下面图片上这样，就说明你的Clash已经初始化成功了如果在第二行downlaod时失败，就说明网络环境不是很好，这时就需要之前准备的动态IP库了（你的报错信息可能跟我有些出入，因为我这里直接下载成功了，为了模拟下载失败的效果我将网线拔了）Clash初始化会创建~/.config/clash隐藏目录，动态IP库最终会被下载到该目录内，这里打开该目录，将目录内的文件清空，然后将之前准备好的Country.mmdb文件复制过去，重新执行clash命令，这样就可以解决下载报错的问题了在~/.config/clash目录中可以发现，除了动态IP库之外还有一个config.yaml的文件，这个就是Clash的默认配置文件，将之前准备的.yml文件复制过来，重命名为config.yaml，打开刚刚的终端重新运行Clash接着终端不要关闭，保持Clash的运行，然后打开linux的网络链接，配置代理地址为Clash提供的地址，一般都是127.0.0.1:7890，如下图所示，然后浏览器打开这个地址：http://clash.razord.top，就可以看到Linux下基于WEB的ClashUI需要注意的是，只有开启了Clash的代理后，这个页面才可以访问，否则是无法访问的，打开页面后就可以看到订阅中的代理，就可以正常使用了文件下载地址{cloud title="蓝奏网盘" type="lz" url="https://hanzhe.lanzoue.com/iAy7Y0o8orgf" /}
-
使用 Docker 搭建 Typecho 个人博客 Typecho 是一款开源的博客项目、它轻量精美且五脏俱全，在这里分享一下搭建过程希望可以帮到别人，文章中涉及到的文件都会提供下载地址，如果忘记放置链接或者失效请联系我补充本文会分享三种基于 Docker 搭建 Typecho 博客的方案，演示环境为 CentOS7 虚拟机，默认你已经安装好 Docker 环境手动搭建Typecho环境对于这种部署简单的项目来说，我喜欢亲自感受一下部署过程，所以把手动部署放在了最上面，仅作参考不建议使用该方式部署，如果你想快速部署请下滑参考其他方案创建 Docker 网桥，用于不同容器之间的交互# 创建Docker网桥用于组网，网桥名称channel，可自定义 $ docker network create channel下载并运行 Nginx 作为 WEB 容器，这里使用 Nginx1.22.0，并指定项目目录为宿主机的/opt/docker/nginx/webs# 下载镜像 $ docker pull nginx:1.22.0 # 初始化Nginx目录 $ mkdir -p /opt/docker/nginx $ cd /opt/docker/nginx # 裸启容器 $ docker run -d --name nginx nginx:1.22.0 # 拷贝配置文件等等 $ docker cp nginx:/etc/nginx /opt/docker/nginx $ mv nginx conf $ docker cp nginx:/usr/share/nginx /opt/docker/nginx $ mv nginx webs # 删除裸启的容器 $ docker rm -f nginx # 正式启动容器 $ docker run --name nginx \ -p 80:80 \ --restart always \ --network channel \ -v /opt/docker/nginx/conf/:/etc/nginx \ -v /opt/docker/nginx/webs/:/usr/share/nginx \ -v /opt/docker/nginx/logs/:/var/log/nginx \ -d nginx:1.22.0下载并运行 PHP，这里使用 PHP7.2 版本，并指定项目目录与 Nginx 一致# 下载镜像 $ docker pull php:7.2-fpm # 初始化PHP配置目录 $ mkdir -p /opt/docker/php # 裸启容器 $ docker run -d --name php php:7.2-fpm # 将容器内的配置文件拷贝出来 $ docker cp php:/usr/local/etc/php /opt/docker/php/ $ mv /opt/docker/php/php/ /opt/docker/php/conf # 删除裸启的容器 $ docker rm -f php # 正式启动容器 $ docker run -d --name php \ --restart always \ --network channel \ -v /opt/docker/nginx/webs:/var/www/html \ -v /opt/docker/php/conf:/usr/local/etc/php \ php:7.2-fpm将 typecho.zip 上传至服务器项目目录下，进入项目目录后执行解压缩，并授予目录权限# 系统中没有zip命令请安装 $ yum install -y zip unzip # 解压typecho.zip文件 $ cd /opt/docker/nginx/webs/ $ unzip typecho.zip # 授予typecho目录权限，不然安装网站时写入配置会报错，权限不是很懂这里直接给到最大，有懂的评论区可以指点下 $ chmod -R 777 typecho项目上传完毕，然后创建 Nginx 的 Typecho 配置文件vim /opt/docker/nginx/conf/conf.d/typecho.conf在 typecho.conf 中添加如下内容# Typecho博客 server { listen 80; # 这里改成自己服务器的IP地址 server_name 192.168.1.251; # 路径匹配规则已支持伪静态 location ~ .*\.php(\/.*)*$ { # 这里的php对应这docker中名为php的容器，php与nginx在同一网桥所以支持容器名访问，无需端口映射 fastcgi_pass php:9000; fastcgi_index index.php; # 路径匹配规则已支持伪静态 fastcgi_split_path_info ^(.+?.php)(/.*)$; # 注意这里，SCRIPT_FILENAME后面跟着的路径地址需要符合PHP容器中的项目目录 fastcgi_param SCRIPT_FILENAME /var/www/html/typecho/$fastcgi_script_name; include fastcgi_params; } location / { # 这里的root需要对应nginx容器中项目目录 root /usr/share/nginx/typecho; index index.html index.htm index.php; } }这样一来项目就部署完成了，重启 Docker 容器后访问试试看# 注意需要先重启php在重启nginx，因为nginx中访问了php，要保证重启nginx时php是好用的 $ docker restart php $ docker restart nginx2023-02-02T03:25:53.png如果跟我一样打开的页面是 Nginx 的欢迎页，是因为 Nginx 默认的配置文件优先级比较高，这种情况只需要暂时关闭默认配置，只让 typecho.conf 生效，然后重新访问就可以了# 将默认的default.conf文件加上.bak后缀让他失效 $ mv /opt/docker/nginx/conf/conf.d/default.conf /opt/docker/nginx/conf/conf.d/default.conf.bak # 重启nginx容器 $ docker restart nginx2023-02-02T03:29:52.png网站安装向导已经显示出来了，可以正常使用了，如果想用 MySQL 作为数据库的话会发现向导中没有提供 MySQL 数据库适配器，那是因为 php 容器中没有启用 mysql 插件，可以参照我之前写的博客启用该插件 Docker PHP 如何启用 MySQL 扩展，然后重启 php 和 nginx 容器，数据库适配器中就多出 MySQL 的选项了使用第三方Typecho镜像快速部署第三方镜像的话个人推荐使用80x86/typecho这一款，这一款是第三方中使用人次最多的镜像且足够轻量2023-02-02T03:40:41.png$ docker run --name=typecho \ --restart always \ --mount type=tmpfs,destination=/tmp \ -v ./typecho:/data \ -e PHP_TZ=Asia/Shanghai \ -e PHP_MAX_EXECUTION_TIME=600 \ -p 90:80 \ -d 80x86/typecho:latest使用官方Typecho镜像快速部署官方的 Docker 镜像叫joyqi/typecho，这里我并没有使用 latest 而是专门指定了版本号，因为他们的最新版是测试版并不是稳定版$ docker run --name typecho \ -e TIMEZONE=Asia/Shanghai \ -e TYPECHO_SITE_URL=https://typecho.hanzhe.site \ -p 91:80 \ -v ./typecho:/app/usr \ -d joyqi/typecho:1.2.1-php7.3-apache文件下载地址{cloud title="typecho.zip" type="lz" url="https://hanzhe.lanzoue.com/i3qZ20meywqj" password=""/}
-
欢迎使用 Typecho 如果您看到这篇文章,表示您的 blog 已经安装成功.Joe主题自带的编辑器新增了许多漂亮的样式，不过Joe编辑器本身使用手感非常差经常卡死崩溃，这里记录下新样式的使用语法，而后使用原生编辑器编写文章基础组件删除线带有删除线的文字原生HTML代码试试点一下这篇文章的标题 $('.joe_detail__title').on('click', () => { alert('这是该文章内的HTML代码实现的效果'); alert('只会在该文章内生效哦！~'); }) 复选框{ } 空白复选框{x} 选择复选框{ } 白嫖 or {x} 点赞各种按钮按钮图标地址 fontawesome.dashgame.com{abtn icon="fa fa-free-code-camp" color="#ff6800" href="https://www.baidu.com" radius="17.5px" content="自定义颜色按钮"/}{anote icon="fa fa-free-code-camp" href="https://www.baidu.com" type="secondary" content="便条按钮"/} {anote icon="fa fa-free-code-camp" href="https://www.baidu.com" type="success" content="便条按钮"/} {anote icon="fa fa-free-code-camp" href="https://www.baidu.com" type="warning" content="便条按钮"/} {anote icon="fa fa-free-code-camp" href="https://www.baidu.com" type="error" content="便条按钮"/} {anote icon="fa fa-free-code-camp" href="https://www.baidu.com" type="info" content="便条按钮"/}提示信息批注{callout color="#f0ad4e"}自定义颜色的标注{/callout}进度条{progress percentage="80%" color="#ff6c6c"/}跑马灯{lamp/}消息提示{message type="success" content="消息提示"/}{message type="info" content="消息提示"/}{message type="warning" content="消息提示"/}{message type="error" content="消息提示"/}警告提示{alert type="info"}警告提示{/alert}{alert type="success"}警告提示{/alert}{alert type="warn"}警告提示{/alert}{alert type="error"}警告提示{/alert}特色组件居中标题{mtitle title="这是个居中的标题"/}隐藏可见隐藏内容，请前往内页查看详情文本复制控件{copy showText="点击我复制内容" copyText="个人博客网站 | 张涵哲"/}普通卡片{card-default label="默认卡片标题" width=""}这里面写卡片的内容{/card-default}卡片列表{card-list}{card-list-item} 卡片一内容{/card-list-item}{card-list-item} 卡片二内容{/card-list-item}{/card-list}标签页{tabs}{tabs-pane label="标签一"} 标签一内容{/tabs-pane}{tabs-pane label="标签二"} 标签二内容{/tabs-pane}{/tabs}描述卡片{card-describe title="描述卡片"}描述卡片的内容{/card-describe}折叠面板{collapse}{collapse-item label="折叠面板一" open} 折叠内容一{/collapse-item}{collapse-item label="折叠面板二"} 折叠内容二{/collapse-item}{/collapse}时间轴{timeline}{timeline-item color="#ed4014"} 2023-01-03 删库跑路{/timeline-item}{timeline-item color="#19be6b"} 2023-01-02 开始骗钱{/timeline-item}{timeline-item color="#19be6b"} 2023-01-01 正式上线{/timeline-item}{/timeline}栅格布局{gird column="3" gap="15"}{gird-item} 宫格内容一{/gird-item}{gird-item} 宫格内容二{/gird-item}{gird-item} 宫格内容三{/gird-item}{/gird}网盘列表{cloud title="默认网盘" type="default" url="https://www.baidu.com" password="1234"/}{cloud title="360网盘" type="360" url="https://www.baidu.com" password="1234"/}{cloud title="百度网盘" type="bd" url="https://www.baidu.com" password="1234"/}{cloud title="天翼网盘" type="ty" url="https://www.baidu.com" password="1234"/}{cloud title="城通网盘" type="ct" url="https://www.baidu.com" password="1234"/}{cloud title="微云网盘" type="wy" url="https://www.baidu.com" password="1234"/}{cloud title="蓝奏网盘" type="lz" url="https://www.baidu.com" password="1234"/}{cloud title="Github仓库" type="github" url="https://www.baidu.com" password="1234"/}媒体组件视频{dplayer src="https://www.baidu.com"/}{bilibili bvid="xxx" page="1"/}音乐{mp3 name="外部音乐" url="https://www.baidu.com" cover="https://www.baidu.com" theme="#f0ad4e" /}{music id="123" color="#1989fa" autoplay="autoplay"/}{music-list id="123" color="#1989fa" autoplay="autoplay"/}
