Skip to content

网页实时Markdown转换为Slide幻灯片,主题灵感来源于南京大学蒋炎岩jyy老师

License

Notifications You must be signed in to change notification settings

xieyumc/jyySlideWeb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8e7653a · Nov 30, 2024

History

69 Commits
Nov 20, 2024
Sep 29, 2024
Oct 10, 2024
Nov 20, 2024
Oct 7, 2024
Sep 29, 2024
Sep 30, 2024
Sep 29, 2024
Nov 30, 2024
Oct 10, 2024
Oct 6, 2024
Nov 21, 2024
Sep 29, 2024
Nov 20, 2024
Nov 20, 2024

Repository files navigation

feature🚀

可以尝试访问在线demo,直接查看效果👀

realtime-converter.gif

实时转换:左边输入markdown,右边可以实时看到生成的效果



realtime-preview.gif

幻灯片自动切换到正在编辑位置:右边幻灯片预览会和左边编辑位置实时对应,方便查看效果



auto-save.png

自动保存:编辑幻灯片时每分钟都会自动保存一次,并且在关闭窗口,返回主页时都会自动保存



auto-title.jpg

自动读取标题:幻灯片的标题会自动从文章中读取,由第一个#标题决定



auto-upload-img.gif

快捷插入图片:可以直接拖拽或者ctrl+v粘贴图片到编辑器中,图片会自动上传到服务器,生成的链接会自动转换成markdown格式,插入到编辑器中



img.png

公开分享幻灯片:幻灯片默认需要密码才能访问,也可以设置成公开的来分享,在公开模式下幻灯片是只读的

快速安装

本项目可以在任何平台运行,针对Windows平台还有编译好的exe文件,而其他平台推荐使用docker安装

Windows直接运行编译好的exe

release网页中,下载jyy_slide_web.zip,下载后解压压缩包(请完整解压,不要只解压exe)打开jyy_slide_web.exe即可运行

使用这个方式部署,实时转换时效率很低,转换很慢,我正在尝试解决这个问题,如果你有解决方案,欢迎PR

项目会运行在本地10001端口,接下来请参考下一节的快速上手进行操作

  • 文章数据会存储在_internal文件夹中的db.sqlite3文件中
  • 上传图片的图片在_internal文件夹中的media文件夹中
  • 若要升级软件后需要迁移数据,只需要复制这两个文件夹即可

使用docker安装

在仓库根目录下载:

然后在本地创建一个media文件夹,这个文件夹是存放上传图片用的

此时,你的目录结构应该是这样的:

├── docker-compose.yml
├── db.sqlite3
└── media
    └── xxx.img

然后,你需要在docker-compose.yml文件中,修改CSRF_TRUSTED_ORIGINS

environment:
  - CSRF_TRUSTED_ORIGINS=https://localhost,https://yourdomain.com  # 定义CSRF信任域

这个环境变量是用来定义CSRF信任域的,如果你的域名是yourdomain.com,那么你需要把https://yourdomain.com改成你的域名(如果你不使用https,也可以不设置)

然后运行:

docker-compose up

项目会运行在本地10001端口,并且借助watchtower,会自动更新容器

接下来请参考下一节的快速上手进行操作

从源码安装

  • 下载源码

  • 切换到项目根目录

  • pip install -r requirements.txt

  • daphne -p 10001 jyy_slide_web.asgi:application

项目会运行在本地10001端口,接下来请参考下一节的快速上手进行操作

快速上手

访问主页和修改密码

安装好项目后,访问http://localhost:10001/ 即可访问主页

默认账号是admin,密码是admin@django

若需要修改密码,请访问http://localhost:10001/admin/ 然后点击右上角的Change password

编写幻灯片

访问http://localhost:10001/ ,点击新建幻灯片

index.png

可以看到我已经写好了两张教程幻灯片,基础语法可以直接配合幻灯片内容进行学习

分享幻灯片

每张幻灯片创建时默认都是上锁的(左上角的锁)

slide-lock.png

如果需要分享幻灯片,可以点击左上角锁的按钮,这个幻灯片就会变成公开幻灯片

然后访问http://localhost:10001/public/ 即可看到所有公开的幻灯片,这个界面不需要密码也可以访问

在这个公开模式下,幻灯片是只读的,并且没有编辑框,会直接进入全屏展示

img.png

配置nginx

如果需要配置nginx,由于本项目使用了websocket,需要一些特殊的设置,可以参考下面的配置

http配置

server {
    listen 80;
    server_name yourdomain.com;  # 填写你的域名

    location / {
        proxy_pass http://127.0.0.1:10001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Referer $http_referer;
        proxy_set_header Origin $http_origin;

        # WebSocket 特别配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    # 为 /static 路径的静态资源设置缓存策略
    location /static/ {

        proxy_pass http://127.0.0.1:10001;  # 代理到后端服务器
        
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Referer $http_referer;
        proxy_set_header Origin $http_origin;
        
        # 设置浏览器缓存头,缓存30天
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";

        # 允许跨域(如果需要)
        add_header Access-Control-Allow-Origin *;

        # 禁用日志(可选,减少日志量)
        access_log off;
        }
        
    }

https和http/3配置

server {
        listen 443 ssl;
        listen 443 quic;
        listen [::]:443 quic;
        http2 on;

        server_name yourdomain.com;  # 填写你的域名

        ssl_certificate /etc/nginx/certs/       # 你的SSL证书
        ssl_certificate_key /etc/nginx/certs/   # 你的SSL证书
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers HIGH:!aNULL:!MD5;

        location / {
            proxy_pass http://127.0.0.1:10001;
            
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Referer $http_referer;
            proxy_set_header Origin $http_origin;

            # WebSocket 特别配置
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            
            add_header Alt-Svc 'h3=":443"; ma=86400';


        }

        # 为 /static 路径的静态资源设置缓存策略
        location /static/ {
            proxy_pass http://127.0.0.1:10001;  # 代理到后端服务器
            
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Referer $http_referer;
            proxy_set_header Origin $http_origin;

            # 设置浏览器缓存头,缓存30天
            expires 30d;
            add_header Cache-Control "public, max-age=2592000";
            
            # 允许跨域(如果需要)
             add_header Access-Control-Allow-Origin *;

            # 禁用日志(可选,减少日志量)
            access_log off;
            add_header Alt-Svc 'h3=":443"; ma=86400';


        }
    }

感谢🙏

本项目的灵感来源为南京大学的jyy老师

本项目基于jyyslide-md开发,感谢大佬已经把转换逻辑完善了,本人只是做了一些微小的工作

About

网页实时Markdown转换为Slide幻灯片,主题灵感来源于南京大学蒋炎岩jyy老师

Resources

License

Stars

Watchers

Forks

Packages

No packages published