知了小站 - IT人的小站 - Typecho博客 2021-06-26T13:54:00+08:00 Typecho https://www.ydyno.com/feed/atom/tag/typecho/ <![CDATA[Typecho 使用 AutocJS 为 Joe 主题开启文章目录]]> https://www.ydyno.com/archives/1331.html 2021-06-26T13:54:00+08:00 2021-06-26T13:54:00+08:00 知了小站 https://www.ydyno.com 使用 Typecho 但是阅读文章时没有文章目录，这个时候就需要借助 AutocJs 来为 Joe 主题添加文章目录功能

AutocJs 介绍

AutocJs 是一个专门用来生成文章导读 （Table of Contents） 导航的 JavaScript 工具（原 autocjs 的重构版本）。AutocJs 采用原生 JavaScript 编写，不依赖任何第三方 JavaScript 库。AutocJs 会自动查找文章指定区域中的所有 h1~h6 的标签，并自动分析文章段落间的层次结构，生成文章的导读导航。

配置说明可以查看 Github 库：https://github.com/yaohaixiao/AutocJS

Css 引用地址：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/css/autoc.min.css">

JS 引用地址：

<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/autoc.min.js"></script>

Joe 主题中使用教程

首先进入网站后台，点击更换外观，点击全局设置

kqdc34xd.png

在下方找到 自定义增加<head></head>里内容，填入下面代码

<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">

在 自定义<body></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>

完整配置如图所示

kqdc4pvs.png

点击保存，进入文章页面，就能看到效果

kqdca3kk.png

其他主题如何使用

使用方式都是一样的，都需要引入 CSS 与 JS ，唯一需要修改的就是 文章正文 DOM 节点的 ID 选择器

使用时的注意点

如果不想使用原作者提供的 CDN 地址，需要将 Github 仓库中的 dist 整个目录放入到自己的服务器中，因为 Css 中用到的图标就存在 dist 目录的 fonts 中

kqdcfjcs.png

如果无法连接 Github ，或者 Github 下载缓慢的，可以使用本站提供的地址下载

{hide}

{cloud title="AutocJS.zip 下载" type="lz" url="https://ydyno.lanzoui.com/iRcsfqpm23i" password="e4aq"/}

{/hide}

]]> <![CDATA[Typecho 迁移到 Docker 的过程记录]]> https://www.ydyno.com/archives/1237.html 2020-08-24T21:07:00+08:00 2020-08-24T21:07:00+08:00 知了小站 https://www.ydyno.com 前言

之前博客搭建在阿里云的机器上，现在快过期了，加上原机器带宽太小，就不打算续费了，现在就需要将 Typecho 博客迁移到新机器上。以前使用的是宝塔面板搭建的，现在不想把机器环境搞得乱七八糟，因此选择使用 Docker 来搭建 Typecho。

安装Docker

使用一键脚本安装Docker

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun && systemctl start docker && systemctl enable docker

如果提示 curl 命令不存在，就需要先安装 curl

# Centos
yum -y install curl

# Ubuntu、Debian
apt -y install curl

配置镜像加速

如果你机器是国内的机器，那么需要配置镜像加速

阿里云镜像获取地址：https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

image.png

修改 /etc/docker/daemon.json，文件不存在就创建一个

{
  "registry-mirrors": [
    "你的加速地址"
  ]
}

安装数据库

这里选择的是 Mariadb，可自行选择数据库镜像，这里配置参数就不做解释了，懂的都懂

docker run -d -v /home/mysql:/var/lib/mysql \
-p 3306:3306 -e MYSQL_ROOT_PASSWORD=密码 \
--privileged=true --restart=always --name mariadb mariadb

安装 PHP

安装官方的 php:7.2-fpm 镜像后，还需要进入容器安装 mysql pdo 才能使用 Mysql 数据库，比较麻烦，这里我自己在 php:7.2-fpm 的基础上构建了个带 mysql pdo 的镜像，可以选择性使用。

docker run -d -v /home/nginx/html:/var/www/html \
-p 8080:8080 --link mariadb:mariadb --name php dqjdda/php

安装 Nginx

docker run -d \
--link php:php \
--name nginx --restart always \
-p 80:80 -p 443:443 \
-e "TZ=Asia/Shanghai" \
-v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf.d:/etc/nginx/conf.d \
-v /home/nginx/logs:/var/log/nginx \
-v /home/nginx/cert:/etc/nginx/cert \
-v /home/nginx/html:/var/www/html \
nginx

配置 Nginx

  • /home/nginx/conf.d 用于放配置文件
  • /home/nginx/logs 存放日志
  • /home/nginx/cert 存放证书
  • /home/nginx/html 存放网页

在 /home/nginx/conf.d 目录创建文件 blog.conf

server {

    listen 443 ssl http2;
    server_name  www.ydyno.com;
    gzip on;

    # 缓存SSL
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 1d;

    # 证书配置
    ssl_certificate       /etc/nginx/cert/ydyno.com/ydyno.com_chain.crt;
    ssl_certificate_key   /etc/nginx/cert/ydyno.com/ydyno.com_key.key;

    root /var/www/html/ydyno;
    index index.php;

    # 伪静态
    if (!-e $request_filename) {
       rewrite ^(.*)$ /index.php$1 last;
    }
  
   location ~ .*\.php(\/.*)*$ {
        include        fastcgi_params;
        fastcgi_param  PATH_INFO $fastcgi_path_info;
        fastcgi_param  PATH_TRANSLATED $document_root$fastcgi_path_info;
        fastcgi_param  SCRIPT_NAME $fastcgi_script_name;
        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_index  index.php;
        fastcgi_pass   php:9000;
       }

   location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
       expires 5d;
   }

   # deny access to . files, for security
   location ~ /\. {
       log_not_found off;
       deny all;
   }
}

server {
    listen 80;
    server_name  www.ydyno.com ydyno.com;
    return 301 https://www.ydyno.com$request_uri;
}

迁移博客

直接将老服务器的博客目录移动到 /var/www/html/ydyno ，然后将数据库导出，然后导入到新库即可

]]>