漫画浏览器「slick-custom」功能介绍和使用教学

2022-11-10

这篇文章介绍在「漫画再录」中使用的漫画浏览器的功能和调试经过〜

阿津

对开展示漫画，是画漫画的人的执着！于是，找到了理想中的漫画浏览器……

插件的下载页面

なんかいい感じのマンガビューア～slick-custom～個人サイト向けのWEB漫画ビューアスクリプトです。レスポンシブでスワイプにも対応。

作者宮幻ハツ。
slick custom，一个基于slick，完美实现了对开显示漫画，很适合放在个人网站里的js脚本。

Content

功能

点击这里打开漫画

全屏：一个很爽的功能，可以专注地看漫画（电脑限定）
进度条：点击进度条可以直接跳页
翻页：点按边缘、键盘控制、手机划动

功能：　简约而满足
难度：　小白友好
维护：　上传方便
灵活：　可实现末页自定义

打开链接时，全部页面会同时加载。我网站的漫画图片一张在500kb~1M左右。请注意流量。

双页功能只能在屏幕宽度较大的设备上（比如电脑、ipad横屏）使用。手机会显示单页。

阿津

这些功能真的足够！硬要说和商业漫画网站的区别，可能就在于没有翻页动画……（但是很简洁！

使用说明

下载的ZIP文件构成

slick_custom_ver2.0
　∟ comi_style.css
　∟ comic.js （主程式）
　∟ images （排版用图片，勿动）
　∟ comic（一个作品一个文件夹）
　　∟ 1.jpg/png〜　(从1开始命名的漫画图片)　
　　∟ index.html　（看漫画的页面）

阿津

实际使用时，要对上面高光的文件进行修改。

设置步骤

STEP

建立文件夹

给文件夹「comic」按需要重命名，例我的《安昙野的天空》的文件夹名是「azmnc」。

STEP

导入图片

将图片文件命名为「1.jpg」，「2.jpg」……（也支持png、gif等图片格式），放进上面的文件夹。

STEP

编辑页面

用文本编辑软件打开「index.html」，编辑14~19行：

var page = 32;//页数
var imgtype = “jpg”; //图片的后缀
var title = “安昙野的天空”; //漫画标题
var site = “https://jinamber.net”; //自己主站的地址
var copy = “阿津”; //作者名
var display = 0; //第一页从左开始输「0」、第一页从右开始输「1」

STEP

上传

上传全部文件，打开「index.html」，开始看漫画！

疑难问题和解决方法

根据我的测试，原文件中引用的脚本在墙外，会导致该程序在墙内失效。解决方法如下：

STEP

从墙外将被引用的「slick.css」「slick.min.js」文件下载到本地。
我把它们放在了「comi_style.css 」的同一文件夹下。

STEP

修改html中的引用路径。以我的文件构成为例：

第8行
修改前：<link href=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css” rel=”stylesheet”></script>
修改后：<link href=”../slick.css” rel=”stylesheet” /></script>

第143行
修改前：<script src=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js”></script>
修改后：<script src=”../slick.min.js“></script>

高光的路径根据文件存放位置来决定。
（如果不了解html，可以采用我的写法，然后参考下面的网站构成范例，放置在同样的位置）

STEP

运行成功！

我的网站构成范例：

网站根目录
　∟ comic
　　∟ comi_style.css
　　∟ comic.js
　　∟slick.css
　　∟ slick.min.js
　　∟ images
　　∟ amrtc（アムリタ）
　　　∟ 1.jpg〜36.jpg　
　　　∟ index.html
　　∟ azmnc（安昙野）
　　　∟ 1.jpg〜32.jpg　
　　　∟ index.html
　　∟ 其他漫画文件夹…