Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-10-31 23:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add better folder structure preview to guide

Browse Source
This commit is contained in:
Soitora 2023-07-25 04:22:22 +02:00
parent d336ddf554
commit efe1f12023
No known key found for this signature in database
GPG Key ID: A6D711EB4F2CCD97
5 changed files with 300 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/.vitepress/theme/styles/tree.css Normal file
View File

@ -0,0 +1,74 @@
.tree {
border-radius: 8px;
margin: 16px;
padding: 16px;
color: var(--vp-code-block-color);
background-color: var(--vp-code-block-bg);
font-family: "Roboto Mono", monospace;
font-size: 0.85rem;
line-height: 1.5;
}
.tree > ul {
margin: 0;
}
.tree li + li {
margin-top: 0;
}
.tree span.folder.main {
color: var(--vp-c-brand) !important;
}
.tree span.folder,
.tree span.file.zip {
color: var(--vp-c-brand-lighter) !important;
}
.tree ul {
padding-left: 5px;
list-style: none;
}
.tree ul li {
position: relative;
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tree ul li:before {
top: 15px;
left: 0;
width: 10px;
height: 1px;
margin: auto;
}
.tree ul li:after {
top: 0;
bottom: 0;
left: 0;
width: 1px;
height: 100%;
}
.tree ul li:before,
.tree ul li:after {
position: absolute;
content: "";
background-color: var(--vp-c-code-dimm);
}
.tree ul li:last-child:after {
height: 15px;
}
.tree-icon {
height: 12px;
width: 12px;
margin-right: 6px;
display: inline-block;
}

200
src/docs/guides/local-manga.md
View File

@ -33,43 +33,91 @@ Images will then go into the chapter folder.
See below for more information on archive files.
You can refer to the following example:
#### Example (Folder)
#### Example <Badge type="info" text="SD Card" /> {#example-sd-card}
```txt
/sdcard/Tachiyomi/local
└───[the series title]
| cover.jpg
|
└───chapter_1
| | image_1
| | image_n
|
└───chapter_2
| | image_1
| | image_n
|
└───chaper_n
| image_1
| image_n
```
<div class="tree">
<ul>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder root">/sdcard/Tachiyomi/local</span>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder main">[the series title]</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">cover.jpg</span>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_1</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_2</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_n</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
```txt
/storage/18F5-2C11/Tachiyomi/local
└───[the series title]
| cover.jpg
|
└───chapter_1
| | image_1
| | image_n
|
└───chapter_2
| | image_1
| | image_n
|
└───chaper_n
| image_1
| image_n
```
#### Example <Badge type="info" text="Phone storage" /> {#example-phone-storage}
<div class="tree">
<ul>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder root">/storage/18F5-2C11/Tachiyomi/local</span>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder main">[the series title]</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">cover.jpg</span>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_1</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_2</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder">chapter_n</span>
<ul>
<li><span class="file">image_1.ext</span></li>
<li><span class="file">image_n.ext</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Tachiyomi will see four chapters in a single manga.
The path to the folder with images must contain both the manga title and the chapter name (as seen above).
@ -81,25 +129,66 @@ Any folders inside the archive file are ignored.
You must place the archive inside the `Manga` folder where the name will become the `Chapter` title.
All images inside the archive regardless of folder structure will become pages for that chapter.
Example (ZIP)
#### Example <Badge type="info" text="ZIP" /> {#example-zip}
```txt
/sdcard/Tachiyomi/local
└───[the series title]
| cover.jpg
|
└───chapter_1.zip
| | image_1.jpg
| | image_n.jpg
|
└───chapter_2.zip
| | image_1.jpg
| | image_n.jpg
|
└───chaper_n.zip
| image_1.jpg
| image_n.jpg
```
<div class="tree">
<ul>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder root">/sdcard/Tachiyomi/local</span>
<li>
<img src="/img/folder.svg" class="tree-icon icon-folder">
<span class="folder main">[the series title]</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">cover.jpg</span>
</li>
<li>
<img src="/img/zip.svg" class="tree-icon icon-zip">
<span class="file zip">chapter_1.zip</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_1.jpg</span>
</li>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_n.jpg</span>
</li>
</ul>
</li>
<li>
<img src="/img/zip.svg" class="tree-icon icon-zip">
<span class="file zip">chapter_2.zip</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_1.jpg</span>
</li>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_n.jpg</span>
</li>
</ul>
</li>
<li>
<img src="/img/zip.svg" class="tree-icon icon-zip">
<span class="file zip">chapter_n.zip</span>
<ul>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_1.jpg</span>
</li>
<li>
<img src="/img/jpeg.svg" class="tree-icon icon-jpeg">
<span class="file jpg">image_n.jpg</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
## Advanced
@ -138,3 +227,8 @@ It is also possible to use a custom image as a cover for each local manga.
To do this, you only need to place the image file, that needs to be named `cover.jpg`, in the root of the manga folder.
The app will then use your custom image in the local source listing.
<style scoped>
@import "../../.vitepress/theme/styles/tree.css"
</style>

11
src/public/img/folder.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill="#FFF">
<path fill="#FFB900" d="M45,24l-4.2426-4.2426C39.6321,18.6321,38.106,18,36.5147,18H9c-1.6569,0-3,1.3431-3,3v56 c0,0.5523,0.4477,1,1,1h82c0.5523,0,1-0.4477,1-1V27c0-1.6569-1.3431-3-3-3H45z"/>
<path fill="#FFD75E" d="M45,24l-4.2426,4.2426C39.6321,29.3679,38.106,30,36.5147,30H6v47c0,0.5523,0.4477,1,1,1h82 c0.5523,0,1-0.4477,1-1V27c0-1.6569-1.3431-3-3-3H45z"/>
<linearGradient id="a" x1="48" x2="48" y1="24" y2="78" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#ffd75e" stop-opacity=".3"/>
</linearGradient>
<path fill="url(#a)" d="M45,24l-4.2426,4.2426C39.6321,29.3679,38.106,30,36.5147,30H6v47c0,0.5523,0.4477,1,1,1h82 c0.5523,0,1-0.4477,1-1V27c0-1.6569-1.3431-3-3-3H45z"/>
<path opacity=".4" d="M6,30v1h30.6005c1.8565,0,3.637-0.7375,4.9497-2.0503L46.5,24H45l-4.2426,4.2426 C39.6321,29.3679,38.106,30,36.5147,30H6z"/>
<path fill="#DA7B16" d="M89,78H7c-0.5523,0-1-0.4477-1-1l0,0h84l0,0C90,77.5523,89.5523,78,89,78z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

67
src/public/img/jpeg.svg Normal file
View File

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
<g>
<path style="fill:#E9E9E0;" d="M36.985,0H7.963C7.155,0,6.5,0.655,6.5,1.926V55c0,0.345,0.655,1,1.463,1h40.074
c0.808,0,1.463-0.655,1.463-1V12.978c0-0.696-0.093-0.92-0.257-1.085L37.607,0.257C37.442,0.093,37.218,0,36.985,0z"/>
<polygon style="fill:#D9D7CA;" points="37.5,0.151 37.5,12 49.349,12 "/>
<circle style="fill:#F3D55B;" cx="18.931" cy="14.431" r="4.569"/>
<polygon style="fill:#26B99A;" points="6.5,39 17.5,39 49.5,39 49.5,28 39.5,18.5 29,30 23.517,24.517 "/>
<path style="fill:#14A085;" d="M48.037,56H7.963C7.155,56,6.5,55.345,6.5,54.537V39h43v15.537C49.5,55.345,48.845,56,48.037,56z"/>
<g>
<path style="fill:#FFFFFF;" d="M21.426,42.65v7.848c0,0.474-0.087,0.873-0.26,1.196c-0.173,0.323-0.406,0.583-0.697,0.779
c-0.292,0.196-0.627,0.333-1.005,0.41C19.085,52.961,18.696,53,18.295,53c-0.201,0-0.436-0.021-0.704-0.062
c-0.269-0.041-0.547-0.104-0.834-0.191s-0.563-0.185-0.827-0.294c-0.265-0.109-0.488-0.232-0.67-0.369l0.697-1.107
c0.091,0.063,0.221,0.13,0.39,0.198c0.168,0.068,0.353,0.132,0.554,0.191c0.2,0.06,0.41,0.111,0.629,0.157
s0.424,0.068,0.615,0.068c0.483,0,0.868-0.094,1.155-0.28s0.439-0.504,0.458-0.95V42.65H21.426z"/>
<path style="fill:#FFFFFF;" d="M25.514,52.932h-1.641V42.855h2.898c0.428,0,0.852,0.068,1.271,0.205
c0.419,0.137,0.795,0.342,1.128,0.615c0.333,0.273,0.602,0.604,0.807,0.991s0.308,0.822,0.308,1.306
c0,0.511-0.087,0.973-0.26,1.388c-0.173,0.415-0.415,0.764-0.725,1.046c-0.31,0.282-0.684,0.501-1.121,0.656
s-0.921,0.232-1.449,0.232h-1.217V52.932z M25.514,44.1v3.992h1.504c0.2,0,0.398-0.034,0.595-0.103
c0.196-0.068,0.376-0.18,0.54-0.335s0.296-0.371,0.396-0.649c0.1-0.278,0.15-0.622,0.15-1.032c0-0.164-0.023-0.354-0.068-0.567
c-0.046-0.214-0.139-0.419-0.28-0.615c-0.142-0.196-0.34-0.36-0.595-0.492C27.5,44.166,27.163,44.1,26.744,44.1H25.514z"/>
<path style="fill:#FFFFFF;" d="M39.5,47.736v3.896c-0.21,0.265-0.444,0.48-0.704,0.649s-0.533,0.308-0.82,0.417
s-0.583,0.187-0.889,0.232C36.781,52.978,36.479,53,36.178,53c-0.602,0-1.155-0.109-1.661-0.328s-0.948-0.542-1.326-0.971
c-0.378-0.429-0.675-0.966-0.889-1.613c-0.214-0.647-0.321-1.395-0.321-2.242s0.107-1.593,0.321-2.235
c0.214-0.643,0.51-1.178,0.889-1.606c0.378-0.429,0.822-0.754,1.333-0.978c0.51-0.224,1.062-0.335,1.654-0.335
c0.547,0,1.057,0.091,1.531,0.273c0.474,0.183,0.897,0.456,1.271,0.82l-1.135,1.012c-0.219-0.265-0.47-0.456-0.752-0.574
c-0.283-0.118-0.574-0.178-0.875-0.178c-0.337,0-0.659,0.063-0.964,0.191c-0.306,0.128-0.579,0.344-0.82,0.649
c-0.242,0.306-0.431,0.699-0.567,1.183s-0.21,1.075-0.219,1.777c0.009,0.684,0.08,1.276,0.212,1.777
c0.132,0.501,0.314,0.911,0.547,1.23s0.497,0.556,0.793,0.711c0.296,0.155,0.608,0.232,0.937,0.232c0.1,0,0.234-0.007,0.403-0.021
c0.168-0.014,0.337-0.036,0.506-0.068c0.168-0.032,0.33-0.075,0.485-0.13c0.155-0.055,0.269-0.132,0.342-0.232v-2.488h-1.709
v-1.121H39.5z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

1
src/public/img/zip.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><g transform="translate(-72,66)"><path d="m76 965.36c-1.105 0-2 0.9-2 2v8 2 1 6c0 1.11 0.895 2 2 2h2 12 2c1.105 0 2-0.89 2-2v-6-1-2-4-4c0-1.1-0.895-2-2-2h-2-2-2-8-2z" fill="#e67e22"/><path d="m76-64c-1.105 0-2 0.895-2 2v8 2 1 6c0 1.105 0.895 2 2 2h2 12 2c1.105 0 2-0.895 2-2v-6-1-2-4-4c0-1.105-0.895-2-2-2h-2-2-2-8-2z" fill="#f39c12" transform="translate(0 1028.4)"/><path d="m76-65c-1.105 0-2 0.895-2 2v8 2 1 6c0 1.105 0.895 2 2 2h2 12 2c1.105 0 2-0.895 2-2v-6-1-2-4-4c0-1.105-0.895-2-2-2h-2-2-2-8-2z" fill="#e67e22" transform="translate(0 1028.4)"/><path d="m76-66c-1.105 0-2 0.895-2 2v8 2 1 6c0 1.105 0.895 2 2 2h2 12 2c1.105 0 2-0.895 2-2v-6-1-2-4-4c0-1.105-0.895-2-2-2h-2-2-2-8-2z" fill="#f1c40f" transform="translate(0 1028.4)"/></g><path d="m17 1040.4c-1.105 0-2 0.9-2 2v4c0 1.1 0.895 2 2 2s2-0.9 2-2v-4c0-1.1-0.895-2-2-2zm0 1c0.552 0 1 0.4 1 1 0 0.5-0.448 1-1 1s-1-0.5-1-1c0-0.6 0.448-1 1-1zm0 3c0.552 0 1 0.4 1 1v1c0 0.5-0.448 1-1 1s-1-0.5-1-1v-1c0-0.6 0.448-1 1-1z" fill="#f39c12"/><g transform="translate(5)"><path d="m10 1028.4v10c0 1.1 0.895 2 2 2s2-0.9 2-2v-10h-4z" fill="#34495e"/><path d="m12 1028.4v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1h1v-1h-1zm0 1h-1v1h1v-1zm0 1v1c0.552 0 1-0.5 1-1h-1z" fill="#95a5a6"/><path d="m11 1028.4v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2c0 0.5 0.448 1 1 1v-1h-1z" fill="#ecf0f1"/></g><path d="m17 1039.4c-1.105 0-2 0.9-2 2v4c0 1.1 0.895 2 2 2s2-0.9 2-2v-4c0-1.1-0.895-2-2-2zm0 1c0.552 0 1 0.4 1 1 0 0.5-0.448 1-1 1s-1-0.5-1-1c0-0.6 0.448-1 1-1zm0 3c0.552 0 1 0.4 1 1v1c0 0.5-0.448 1-1 1s-1-0.5-1-1v-1c0-0.6 0.448-1 1-1z" fill="#ecf0f1"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB