mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 15:41:59 +01:00
Create Style manual for contributors (#331)
Co-authored-by: Andreas E. <andreas.everos@gmail.com>
This commit is contained in:
Soitora
GitHub
parent
69d46b0c8a
commit
6465c0bfb8
718
package-lock.json
generated
718
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -12,9 +12,9 @@
|
||||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@vuepress/plugin-back-to-top": "^1.5.3",
|
||||
"@vuepress/plugin-google-analytics": "^1.5.3",
|
||||
"@vuepress/plugin-pwa": "^1.5.3",
|
||||
"@vuepress/plugin-back-to-top": "^1.5.4",
|
||||
"@vuepress/plugin-google-analytics": "^1.5.4",
|
||||
"@vuepress/plugin-pwa": "^1.5.4",
|
||||
"eslint": "^7.7.0",
|
||||
"eslint-config-airbnb": "^18.2.0",
|
||||
"eslint-config-airbnb-base": "^14.2.0",
|
||||
@ -25,9 +25,9 @@
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"prettier": "^2.0.5",
|
||||
"prettier": "^2.1.1",
|
||||
"sass-loader": "^9.0.3",
|
||||
"vuepress": "^1.5.3",
|
||||
"vuepress": "^1.5.4",
|
||||
"vuepress-plugin-clean-urls": "^1.1.1",
|
||||
"vuepress-plugin-container": "^2.1.4",
|
||||
"vuepress-plugin-element-ui": "^1.1.0",
|
||||
@ -42,11 +42,11 @@
|
||||
"marked": "^1.1.1",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"sweetalert2": "^9.17.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue": "^2.6.12",
|
||||
"vue-agile": "^1.1.3",
|
||||
"vue-material-design-icons": "^4.9.0",
|
||||
"vue-moment": "^4.1.0",
|
||||
"vue-sweetalert2": "^3.0.6",
|
||||
"vue-sweetalert2": "^3.0.8",
|
||||
"vuepress-plugin-robots": "^1.0.1",
|
||||
"vuepress-plugin-sitemap": "^2.3.1",
|
||||
"vuex": "^3.5.1"
|
||||
|
||||
@ -153,7 +153,7 @@ module.exports = {
|
||||
path: "/sandbox/",
|
||||
collapsable: false,
|
||||
sidebarDepth: 2,
|
||||
children: ["/sandbox/element-ui"],
|
||||
children: ["/sandbox/style-guide", "/sandbox/element-ui"],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -113,7 +113,7 @@ While there will never be a toggle between the two UI versions, you can continue
|
||||
The logic required to make a dual-page reader automatically work along with scanlator page inconsistencies and other issues means it is unlikely to be added at this time.
|
||||
|
||||
#### I see manga images in my phone gallery, what gives!?
|
||||
Tachiyomi by default adds a `.nomedia` file to prevent this from happening but sometimes it doesn't work or something went wrong. To fix this, all you need to do is create the file yourself. Name it `.nomedia` and place it in your download folder.
|
||||
Tachiyomi by default adds a `.nomedia` file to prevent this from happening but sometimes it doesn't work or something went wrong. To fix this, all you need to do is create the file yourself. Name it `.nomedia` and place it in your download folder.
|
||||
|
||||
#### I lost everything, what now?
|
||||
To avoid data loss in the future, you can use the automatic backup feature.
|
||||
@ -127,13 +127,10 @@ Learn how to create automatic backups [here](/help/guides/creating-backups/#turn
|
||||
### General
|
||||
|
||||
#### What are some recommended extensions?
|
||||
|
||||
::: warning DISCLAIMER
|
||||
Tachiyomi is not affiliated with or responsible for any source that is down, slow, or missing chapters.
|
||||
:::
|
||||
|
||||
Tachiyomi does not endorse or recommend any manga source, and there is no best extension. Rather, we encourage users to spend some time to try out a few sources themselves, and discover what sources work best for them. It's because what works well for somebody else, might not work well for you.
|
||||
|
||||
<el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert>
|
||||
|
||||
#### What are scanlator sources?
|
||||
Manga that are not officially licensed are translated by scanlators, who either publish manga on their own website or **MangaDex**. Scanlator sources always provide the fastest manga updates and have the highest scan quality.
|
||||
|
||||
@ -163,28 +160,24 @@ In some cases your phone might have some issues downloading the extensions, in t
|
||||
To install just download the file for the extension you want and then install it, like how you installed **Tachiyomi**.
|
||||
|
||||
#### How do I allow third-party installations?
|
||||
When installing your first extension and are prompted that your phone isn't allowed to install unknown apps from that source, simply follow the prompt to allow it.
|
||||
::::: el-tabs
|
||||
:::: el-tab-pane label="Android 8.0 and higher"
|
||||
::: aside-guide
|
||||
[<MaterialIcon icon-name="videocam"/> Click for Android 8.0 and newer video guide](/help/faq/assets/UnknownSources-Android10.webm)
|
||||
:::
|
||||
When installing your first extension and are prompted that your phone *isn't allowed* to install unknown apps from that source, simply follow the prompt to allow it.
|
||||
|
||||
<Carousel name="carousel-unknown-source">
|
||||
<CarouselItem>
|
||||
<figure class="centered">
|
||||
<h4>Android 8.0 and higher</h4>
|
||||
<p>In newer versions of Android you need to enable "Install unknown apps" by a per-app basis.</p>
|
||||
<video muted loop controls :poster="$withBase('/help/faq/assets/UnknownSources-Android10.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
|
||||
<source :src="$withBase('/help/faq/assets/UnknownSources-Android10.webm')" type="video/webm" />
|
||||
</video>
|
||||
</figure>
|
||||
</CarouselItem>
|
||||
<CarouselItem>
|
||||
<figure class="centered">
|
||||
<h4>Android 7.1 and lower</h4>
|
||||
<p>In older versions of Android you only need to enable "Unknown sources" globally.</p>
|
||||
<video muted loop controls :poster="$withBase('/help/faq/assets/UnknownSources-Android7.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
|
||||
<source :src="$withBase('/help/faq/assets/UnknownSources-Android7.webm')" type="video/webm" />
|
||||
</video>
|
||||
</figure>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
In *newer* versions of **Android** you need to enable **Install unknown apps** by a per-app basis.
|
||||
::::
|
||||
:::: el-tab-pane label="Android 7.1 and lower"
|
||||
::: aside-guide
|
||||
[<MaterialIcon icon-name="videocam"/> Click for Android 7.1 and older video guide](/help/faq/assets/UnknownSources-Android7.webm)
|
||||
:::
|
||||
When installing your first extension and are prompted that your phone *isn't allowed* to install unknown apps from that source, simply follow the prompt to allow it.
|
||||
|
||||
In *older* versions of **Android** you only need to enable **Unknown sources** globally.
|
||||
::::
|
||||
:::::
|
||||
|
||||
::: aside
|
||||
If you need more help regarding this, read [this](https://www.theandroidsoul.com/how-to-allow-apps-installation-from-unknown-sources-on-android-9-pie/)
|
||||
@ -262,25 +255,22 @@ This error can be caused by a variety of reasons, all to do with storage.
|
||||
[<MaterialIcon icon-name="videocam"/> Click for video guide](/help/faq/assets/MangaDex-NoResults.webm)
|
||||
:::
|
||||
|
||||
If you're not getting any results when searching MangaDex then you need to log in. To do so enter the <Navigation item="webview"/> for **MangaDex** then press the **Manga** drop-down and choose either **Sign up** or **Log in** to proceed with the login.
|
||||
If you're not getting any results when searching **MangaDex** then you need to log in. To do so enter the <Navigation item="webview"/> for **MangaDex** then press the **Manga** drop-down and choose either **Sign up** or **Log in** to proceed with the login.
|
||||
|
||||
::: guide
|
||||
To enter the **WebView** go to <Navigation item="browse"/> → <Navigation item="button_latest"/> next to **MangaDex**, then press on <Navigation item="webview"/> in the top right corner.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
Make sure you're on app version **<VersionTag downloadTag/>**.
|
||||
::: aside
|
||||
Make sure you stay up to date by reading [this](/help/faq/#how-do-i-enable-automatic-updates)
|
||||
:::
|
||||
|
||||
#### Why is MangaDex slow?
|
||||
If pages are loading slowly or not at all, try:
|
||||
— Making sure you have the latest version of the extension.
|
||||
— Checking if MangaDex is either down, or is having the same issues.
|
||||
— Trying to Clear database under More › Settings › Advanced.
|
||||
— Trying to Clear chapter cache under More › Settings › Advanced.
|
||||
— Going to More › Extensions › MangaDex › Image Server and then selecting a different server location.
|
||||
- Making sure you have the *latest* version of the extension.
|
||||
- Checking if **MangaDex** is either down, or is having the same issues.
|
||||
- Trying to **Clear database** under <Navigation item="more"/> → <Navigation item="settings"/> → <Navigation item="settings_advanced"/>.
|
||||
- Trying to **Clear chapter cache** under <Navigation item="more"/> → <Navigation item="settings"/> → <Navigation item="settings_advanced"/>.
|
||||
- Going to <Navigation item="browse"/> → <Navigation item="extensions"/> → **MangaDex** → **Image Server** and then selecting a *different* server location.
|
||||
|
||||
<el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert>
|
||||
|
||||
#### Is there an alternate searching method?
|
||||
**MangaDex** allows you to search using the ID number to find manga. The easiest way to get the ID is by opening the manga in your browser and looking at the URL.
|
||||
|
||||
@ -289,7 +279,7 @@ An example search would be **`id:23427`** which would return results for [Candy
|
||||
:::
|
||||
|
||||
#### How do I deal with duplicate chapters in MangaDex?
|
||||
This can be solved by opening MangaDex in <Navigation item="webview"/> and block the scanlator group whose chapter you don't want to see.
|
||||
This can be solved by opening **MangaDex** in <Navigation item="webview"/> and block the scanlator group whose chapter you don't want to see.
|
||||
|
||||
#### How do I fix chapters from Mangaplus being broken?
|
||||
Install the **MANGA Plus by SHUEISHA** extension instead and then migrate the manga that uses **MANGA Plus** on **MangaDex** onto the **MANGA Plus** source.
|
||||
@ -303,10 +293,10 @@ Read about source migration [here](/help/guides/source-migration/)
|
||||
#### How do I deal with duplicate chapters in MangaPark?
|
||||
To solve this issue, follow the below steps.
|
||||
|
||||
1. Go to <Navigation item="browse"/> → **Extensions**.
|
||||
1. Click on **MangaPark** extension and then `Chapter List Source`.
|
||||
1. Choose an option like `Smart list` or `Prioritize source`.
|
||||
1. Go back to MangaPark's chapter list and refresh it.
|
||||
1. Go to <Navigation item="browse"/> → <Navigation item="extensions"/>.
|
||||
1. Click on **MangaPark** extension and then **Chapter List Source**.
|
||||
1. Choose an option like **Smart list** or **Prioritize source**.
|
||||
1. Go back to **MangaPark**'s chapter list and refresh it.
|
||||
|
||||
### Mangabox
|
||||
|
||||
@ -319,7 +309,7 @@ This means that the manga is dead and needs to be migrated from **Mangakakalot**
|
||||
#### How do I fix the `Image could not be decoded` error?
|
||||
Open the manga in WebView and wait for the image to comes up. If the image isn't loading you will need to look elsewhere to read that particular manga, as some Mangabox sources, such as Mangakakalot, are now blocking entire regions.
|
||||
|
||||
### Webtoons
|
||||
### Webtoons.com
|
||||
|
||||
#### How do I fix the `Page list is empty` error?
|
||||
You will have to open the manga entry in WebView and verify your age, as Webtoons has recently added age verifications on their site.
|
||||
@ -329,11 +319,12 @@ You will have to open the manga entry in WebView and verify your age, as Webtoon
|
||||
#### Why are some Japscan chapters not loading?
|
||||
Japscan has some manga that are scrambled using a different algorithm than others on their site. If you encounter a manga being scrambled, use a different source to read.
|
||||
|
||||
### KissManga
|
||||
|
||||
#### Why is the KissManga extension missing?
|
||||
The **KissManga** extension has been removed, as they have been blocking 3rd party apps & adblockers. Please migrate KissManga favorites in your library to a different source and uninstall the extension.
|
||||
|
||||
::: aside
|
||||
Read more about source migration [here](/help/guides/source-migration/#source-migration)
|
||||
### KissManga and MangaRock
|
||||
:::: el-collapse
|
||||
::: el-collapse-item title="Where is KissManga?"
|
||||
**KissManga** went under permanently in August 2020, we will not add something that doesn't exist back..
|
||||
:::
|
||||
::: el-collapse-item title="Where is MangaRock"
|
||||
**MangaRock** converted from a piracy app and went legit, they are now called **INKR** but is nowhere near what they were before.
|
||||
:::
|
||||
::::
|
||||
|
||||
@ -21,18 +21,18 @@ lang: en-US
|
||||
|
||||
## Diagnosis
|
||||
* Verify your extensions are up to date. (<Navigation item="browse"/> → Extensions, make sure no extensions have an update button)
|
||||
* Check if Tachiyomi has an update (<Navigation item="more"/> → <Navigation item="about"/> then click **Check for updates**)
|
||||
* Check if **Tachiyomi** has an update (<Navigation item="more"/> → <Navigation item="about"/> then click **Check for updates**)
|
||||
* Try opening the manga in <Navigation item="webview"/>. If there is [CAPTCHA](#solving-a-captcha), solve it and see if it helped.
|
||||
* Change your internet connection (*switch to Wi-Fi, mobile data or a VPN, use a "What's my IP" site to confirm your IP has changed*), then try again.
|
||||
* Ask other users to try the action that gives you the error.
|
||||
* Check if the source is either down, or is having issues in a browser.
|
||||
* Press the retry button in the middle of your manga page if one exists.
|
||||
* Try the following at <Navigation item="more"/> → <Navigation item="settings"/> → <Navigation item="settings_advanced"/>
|
||||
* Clear Cache
|
||||
* Clear Cookies
|
||||
* Clear Database
|
||||
* **Clear Cache**
|
||||
* **Clear Cookies**
|
||||
* **Clear Database**
|
||||
* If your downloads are getting stuck, try deleting the queue and trying again.
|
||||
* Force close Tachiyomi and reopen it.
|
||||
* Force close **Tachiyomi** and reopen it.
|
||||
|
||||
::: tip Bonus step
|
||||
Try the latest Preview version, your issue may have been fixed.
|
||||
@ -66,22 +66,24 @@ If the site is not reachable or having issues then all you can do is wait for th
|
||||
|
||||
**Please note that WebView is not the same as using your browser.**
|
||||
|
||||
You must solve the **CAPTCHA** in WebView.
|
||||
You must solve the **CAPTCHA** in **WebView**.
|
||||
|
||||
How to Open WebView:
|
||||
::: guide How to open WebView
|
||||
1. Go to <Navigation item="browse"/> in the bottom navbar.
|
||||
2. Press the source you'd like to access.
|
||||
3. Press <Navigation item="webview"/>.
|
||||
|
||||
<figure class="centered">
|
||||
<img :src="$withBase('/help/guides/troubleshooting-problems/assets/WebView-Open.jpg')">
|
||||
</figure>
|
||||
|
||||
4. Complete CAPTCHA if one is present.
|
||||
5. Once done, press the Back Arrow at the top left to return.
|
||||
|
||||
::: tip
|
||||
If **WebView** doesn't work for you, please update the **Android System WebView** app through [Play Store](https://play.google.com/store/apps/details?id=com.google.android.WebView), then go to [Developer Options](https://developer.android.com/studio/debug/dev-options) in your phone's settings and set **WebView Implementation** to *Android System WebView*. If *Android System WebView* doesn't work, try setting **Google Chrome** as default in **WebView Implementation**.
|
||||
1. Press the source you'd like to access.
|
||||
1. Press the <Navigation item="webview"/> icon.
|
||||
<figure class="centered">
|
||||
<img :src="$withBase('/help/guides/troubleshooting-problems/assets/WebView-Open.jpg')">
|
||||
</figure>
|
||||
1. Complete **CAPTCHA** if one is present.
|
||||
1. Once done, press the *Back Arrow* at the top left to return.
|
||||
:::
|
||||
|
||||
### WebView not working?
|
||||
If **WebView** doesn't work for you, please update the [Android System WebView](https://play.google.com/store/apps/details?id=com.google.android.WebView) app.
|
||||
|
||||
When you've updated go to [Developer Options](https://developer.android.com/studio/debug/dev-options) in your phone's settings and set **WebView Implementation** to `Android System WebView`.
|
||||
|
||||
::: guide Still not working?
|
||||
If `Android System WebView` doesn't work, try setting `Google Chrome` as the default **WebView Implementation** instead.
|
||||
:::
|
||||
|
||||
@ -10,4 +10,5 @@ sitemap:
|
||||
# Sandbox
|
||||
Sandbox playground for demonstrating and documenting how different website functions work for easier integration by contributors.
|
||||
|
||||
- [Style guide](style-guide.md)
|
||||
- [Element-UI](element-ui.md)
|
||||
|
||||
@ -159,31 +159,43 @@ View more by pressing the headers for the specified item.
|
||||
## [Steps](https://element.eleme.io/#/en-US/component/steps)
|
||||
|
||||
### Step bar with icon
|
||||
<el-steps :active="1">
|
||||
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
:::: el-steps :active="1"
|
||||
::: el-step title="Step 1" icon="el-icon-edit"
|
||||
:::
|
||||
::: el-step title="Step 2" icon="el-icon-upload"
|
||||
:::
|
||||
::: el-step title="Step 3" icon="el-icon-picture"
|
||||
:::
|
||||
::::
|
||||
|
||||
```html
|
||||
<el-steps :active="1">
|
||||
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::: el-steps :active="1"
|
||||
::: el-step title="Step 1" icon="el-icon-edit"
|
||||
:::
|
||||
::: el-step title="Step 2" icon="el-icon-upload"
|
||||
:::
|
||||
::: el-step title="Step 3" icon="el-icon-picture"
|
||||
:::
|
||||
::::
|
||||
```
|
||||
|
||||
### Step bar with description
|
||||
<el-steps :active="2" finish-status="success">
|
||||
<el-step title="Step 1" description="First you do this"></el-step>
|
||||
<el-step title="Step 2" description="Then you do this"></el-step>
|
||||
<el-step title="Step 3" description="Then you do that"></el-step>
|
||||
</el-steps>
|
||||
:::: el-steps :active="2" finish-status="success"
|
||||
::: el-step title="Step 1" description="First you do this"
|
||||
:::
|
||||
::: el-step title="Step 2" description="Then you do this"
|
||||
:::
|
||||
::: el-step title="Step 3" description="Then you do that"
|
||||
:::
|
||||
::::
|
||||
|
||||
```html
|
||||
<el-steps :active="2" finish-status="success">
|
||||
<el-step title="Step 1" description="Some description"></el-step>
|
||||
<el-step title="Step 2" description="Some description"></el-step>
|
||||
<el-step title="Step 3" description="Some description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::: el-steps :active="2" finish-status="success"
|
||||
::: el-step title="Step 1" description="First you do this"
|
||||
:::
|
||||
::: el-step title="Step 2" description="Then you do this"
|
||||
:::
|
||||
::: el-step title="Step 3" description="Then you do that"
|
||||
:::
|
||||
::::
|
||||
```
|
||||
|
||||
205
src/sandbox/style-guide.md
Normal file
205
src/sandbox/style-guide.md
Normal file
@ -0,0 +1,205 @@
|
||||
---
|
||||
title: Style guide
|
||||
description: Style guide to aid website content contributors.
|
||||
lang: en-US
|
||||
sitemap:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
# Style guide
|
||||
Style guide to aid website content contributors. For the code used for certain segments, please view the code for this page.
|
||||
Note that I am not experienced in making these and thus it was created on a whim, if you know any way to improve this page then please submit an edit for it or create an issue.
|
||||
|
||||
## FAQ Style
|
||||
Some **DO**s and **DO NOT**s for [FAQ](../help/faq/README.md).
|
||||
|
||||
- **DO NOT** be afraid to ask for help, this includes clarifying what some parts on this page mean.
|
||||
|
||||
- **DO** write each segment as a question:
|
||||
> #### How can I see how many chapters I've downloaded?
|
||||
|
||||
- **DO** write your instructions as clear as possible, preferably check with other people first and see if they can help you improve your language used.
|
||||
|
||||
- **DO NOT** write noticably sloppily, this makes it harder for both us and the user to understand.
|
||||
|
||||
- **DO NOT** forget to at least check for basic grammar issues, this includes not having a capital letter in your first word and forgetting commas/periods.
|
||||
|
||||
- **DO PREFERABLY**, in relation to the above, use resources that can aid with grammar and general structure:
|
||||
> - [Grammarly](https://app.grammarly.com/) - Grammarly's writing app makes sure everything you type is not only correct, but also clear and easy to read.
|
||||
> - [Hemmingway App](http://www.hemingwayapp.com/) - Hemingway App makes your writing bold and clear.
|
||||
|
||||
- **DO** preferably try to build the enviroment and test it locally first before submitting your PR, ask for help with this if you need it.
|
||||
|
||||
- **DO** use guide containers for quickly showing how to achieve something:
|
||||
> ::: guide Instructions
|
||||
> Enable it by going to <Navigation item="library"/> → <Navigation item="filter"/> → **Display** section and then checking the **Download badges** option at the bottom.
|
||||
> :::
|
||||
|
||||
- **DO** include video guides as a text under the header:
|
||||
> ::: aside-guide
|
||||
> [<MaterialIcon icon-name="videocam"/> Click for video guide](/help/faq/assets/MangaDex-NoResults.webm)
|
||||
> :::
|
||||
|
||||
- **DO** try to be consistent with video recording by following these guidelines:
|
||||
> ::: guide Video recording guidelines
|
||||
> When making videos, it's highly preferable that you use [Android Studio's](https://developer.android.com/studio) emulator for a consistent result each time. The emulator settings > for the front-page images is a **Pixel 3 XL** running **Android 10**.
|
||||
> - Record your videos as **MP4** or **WEBM**, whichever works the best for you.
|
||||
> - Use Androids built-in **Demo Mode**, it can be found in the Developer settings.
|
||||
> - Record with a clean workspace and don't be too hasty or too slow with actions.
|
||||
> :::
|
||||
|
||||
- **DO** use arrow symbols in instructions, instead of using greater-than symbols:
|
||||
> Start → Goal
|
||||
|
||||
- **DO** bold important words in your text:
|
||||
> ...checking the **Download badges** option...
|
||||
|
||||
- **DO** use **[Navigation](https://github.com/tachiyomiorg/website/blob/master/src/.vuepress/components/Navigation.vue#L35-L82)** items when applicable:
|
||||
> <Navigation item="library"/>
|
||||
|
||||
- **DO** use unordered lists when writing a list of stuff that's not an instruction:
|
||||
> - This thing.
|
||||
> - And that thing.
|
||||
|
||||
- **DO NOT** use unordered lists for instructions.
|
||||
- **DO** use ordered lists when writing a longer instruction:
|
||||
> 1. Step one.
|
||||
> 1. Step two.
|
||||
|
||||
- **DO** use tabs for instructions when necessary for a good experience:
|
||||
> :::: el-tabs
|
||||
> ::: el-tab-pane label="Android 8+"
|
||||
> **Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||||
> :::
|
||||
> ::: el-tab-pane label="Android 7 and under"
|
||||
> **Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||||
> :::
|
||||
> ::::
|
||||
|
||||
- **MAYBE** use accordions for FAQ entries, needs further testing if/before we replace all:
|
||||
> :::: el-collapse
|
||||
> ::: el-collapse-item title="How can I see how many chapters I've downloaded?"
|
||||
> **Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||||
> :::
|
||||
> ::: el-collapse-item title="Why are there no results when searching?"
|
||||
> **Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||||
> :::
|
||||
> ::::
|
||||
|
||||
> :::::: el-collapse
|
||||
> ::::: el-collapse-item title="You can even chain tabs and other stuff into accordions"
|
||||
> :::: el-tabs
|
||||
> ::: el-tab-pane label="Android 8+"
|
||||
> **Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||||
> :::
|
||||
> ::: el-tab-pane label="Android 7 and under"
|
||||
> **Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||||
> :::
|
||||
> ::::
|
||||
> :::::
|
||||
> ::::: el-collapse-item title="Or decide to only write pure content."
|
||||
> Yeet.
|
||||
> :::::
|
||||
> ::::::
|
||||
|
||||
- **DO** use alerts to give the user a heads up:
|
||||
> <el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert>
|
||||
> <el-alert type="warning" title="Warning!" description="This feature requires you to be on Android 7 or above." show-icon :closable="false"></el-alert>
|
||||
> <el-alert type="error" title="Attention!" description="Make sure you have created a backup before following these instructions!" show-icon :closable="false"></el-alert>
|
||||
> ::: aside
|
||||
> More alerts can be found on the [Element-UI](element-ui.md#alert) page.
|
||||
> :::
|
||||
|
||||
- **DO** include related info as an aside object:
|
||||
> **Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||||
> ::: aside
|
||||
> Related GitHub issue: [#65](https://github.com/inorichi/tachiyomi/issues/65)
|
||||
> :::
|
||||
|
||||
> **Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||||
> ::: aside
|
||||
> Learn how to create automatic backups [here](/help/guides/creating-backups/#turning-on-auto-backups/)
|
||||
> :::
|
||||
|
||||
- **DO** use code tags for error codes and file names:
|
||||
> Storage related error: `Attempt to invoke virtual method 'com.hippo.unifile...`
|
||||
|
||||
> File name for the phone to ignore images from Tachiyomi: `.nomedia`
|
||||
|
||||
## Guide Style
|
||||
Many of the stuff previously mentioned generally applies when making guides too, some stuff unique to guide would probably be these:
|
||||
|
||||
- **DO** use guide containers when writing instructions:
|
||||
> ::: guide
|
||||
> 1. Go to <Navigation item="more"/> and tap <Navigation item="source_migration"/>.
|
||||
> 1. Select the **Source** you're migrating from.
|
||||
> 1. Find and select the title that you want to migrate.
|
||||
> > **Tachiyomi** will do a global search of all the sources you have installed and enabled. If you don't find the manga you want, try searching for other titles it might go under.
|
||||
> 1. Once you find the manga you want to migrate, select it and then choose which data you want to transfer over, and you're done.
|
||||
> :::
|
||||
|
||||
- **DO** use code blocks when you're pasting code:
|
||||
> ```json
|
||||
> {
|
||||
> "title": "Example Title",
|
||||
> "author": "Example Author",
|
||||
> "artist": "Example Artist",
|
||||
> "description": "Example Description",
|
||||
> "genre": ["genre 1", "genre 2", "etc"],
|
||||
> "status": "0",
|
||||
> "_status values": ["0 = Unknown", "1 = Ongoing", "2 = Completed", "3 = Licensed"]
|
||||
> }
|
||||
> ```
|
||||
|
||||
- **DO** use a modified guide container when visualizing folder/file location:
|
||||
>::: guide File tree
|
||||
><ul class="file-tree">
|
||||
> <li>
|
||||
> /sdcard/Tachiyomi/local
|
||||
> <ul>
|
||||
> <li>
|
||||
> My manga
|
||||
> <ul>
|
||||
> <li>
|
||||
> ch1.zip
|
||||
> <ul>
|
||||
> <li class="file">img files</li>
|
||||
> </ul>
|
||||
> </li>
|
||||
> <li>
|
||||
> ch2.zip
|
||||
> <ul>
|
||||
> <li>
|
||||
> ch2
|
||||
> <ul>
|
||||
> <li class="file">img files</li>
|
||||
> </ul>
|
||||
> </li>
|
||||
> </ul>
|
||||
> </li>
|
||||
> <li class="file">cover.jpg</li>
|
||||
> </ul>
|
||||
> </li>
|
||||
> <li>…</li>
|
||||
> </ul>
|
||||
> </li>
|
||||
></ul>
|
||||
>:::
|
||||
|
||||
- **DO** use carousels for multiple images:
|
||||
> <Carousel name="carousel-background-color">
|
||||
> <CarouselItem>
|
||||
> <figure class="centered">
|
||||
> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/help/guides/reader-settings/assets/Reader-Background-Black.png')">
|
||||
> <h4>Black</h4>
|
||||
> <p>Surrounds page with black. With an AMOLED screen you can save battery by using this.</p>
|
||||
> </figure>
|
||||
> </CarouselItem>
|
||||
> <CarouselItem>
|
||||
> <figure class="centered">
|
||||
> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/help/guides/reader-settings/assets/Reader-Background-White.png')">
|
||||
> <h4>White</h4>
|
||||
> <p>Surrounds page with white. Makes pages seemless with the screen.</p>
|
||||
> </figure>
|
||||
> </CarouselItem>
|
||||
> </Carousel>
|
||||
Loading…
Reference in New Issue
Block a user