Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
batocera_wiki_code_snippets [2021/09/25 02:14] – moved inter-wiki links to be right after in links, added collapsible sections, ataribatocera_wiki_code_snippets [2023/10/20 06:02] (current) – [Embedded images]: Explain how to avoid font issues in SVG ssokolow
Line 1: Line 1:
 ====== Batocera Wiki Code Snippets/Templates ====== ====== Batocera Wiki Code Snippets/Templates ======
 +
 +<WRAP center round tip>
 +A cheat-sheet can be found [[wiki:syntax#cheat_sheet|on the DokuWiki syntax page]].
 +</WRAP>
 +
  
 ===== In-links ===== ===== In-links =====
Line 64: Line 69:
  
 Note that you don't need to include the full URL, just the Wikipedia page title. It also appears with the Wikipedia icon, isn't that neat? Note that you don't need to include the full URL, just the Wikipedia page title. It also appears with the Wikipedia icon, isn't that neat?
 +
 +This also works for embedding Youtube videos using only their video ID, like so:
 +
 +{{youtube>ssluTgfkdlg?medium}}
 +
 +which is invoked by
 +
 +<code>
 +{{youtube>ssluTgfkdlg?medium}}
 +</code>
 +
 +<WRAP center round important>
 +Currently, embedding Youtube links is bugged. When the mouse hovers over the "Edit" button while viewing the page, the thumbnail reloads, causing the page to jump up. This is unusable and thus Youtube embeds should be avoided entirely until this is fixed. Use direct links instead.
 +</WRAP>
  
 ===== Embedded images ===== ===== Embedded images =====
Line 90: Line 109:
 {{:wiki:svg-controller.svg|Cute controller.}} {{:wiki:svg-controller.svg|Cute controller.}}
  
-The wiki's media manager can actually accept SVG files even though it doesn't show it on the compatible file formats list.+The wiki's media manager can actually accept SVG files even though it doesn't show it on the compatible file formats list. SVG files that contain text are discouraged due to fonts not being available on all systems (and thus appearing inconsistently or not at all). You can avoid this by converting the text into shapes in Inkscape using ''Path > Object to Path''. 
 + 
 +However, by using the official DokuWiki [[https://www.dokuwiki.org/plugin:imagebox|imagebox]] plugin (which is installed additionally on this DokuWiki server), you can also put a frame around an image and make the image title text show up within the image frame instead of showing up as a tooltip (the image's filename will be shown as a tooltip instead). If you decide to resize your image like the image example below (75% of the image's original size in this example), the plugin also includes a nice extra feature of showing automatically an extra mini icon on the right lower corner of your imagebox you can click on to enlarge the image to its original size. 
 + 
 +[{{ wiki:dokuwiki-128.png?75 |This is the image title}}] \\ 
 + 
 +  [{{ wiki:dokuwiki-128.png?75 |This is the image title}}]  
 +   
 +===== Embedded videos ===== 
 + 
 +It is recommended to convert the video to a WEBM with a resolution of 655x368 to prepare it for embedding into the wiki page and not have interruptions during playback. With that said, the wiki supports many video formats (check what you can upload in the media uploading tool) and the resolution will always be downscaled to whatever size you specify in the embed code itself. For example: 
 + 
 +<code> 
 +{{URL-to-video?655x368|Alt text}} 
 +</code> 
 + 
 +This would result in the video looking similar to this: 
 + 
 +{{blog:how-to-install-windows-steam-games.webm?655x368|Sometimes running a game through Proton is even better than its Linux-native version!}} 
 + 
 +<WRAP center round tip> 
 +A quick way to record videos from Batocera itself is to sign in via SSH and run the ''batocera-record'' command. 
 +</WRAP>
  
 ===== Unformatted code ===== ===== Unformatted code =====
Line 196: Line 237:
 With the addition of the collapsible sidebar via the [[https://www.dokuwiki.org/plugin:outliner|outliner]] plugin now collapsible sections can be used anywhere in the wiki. With the addition of the collapsible sidebar via the [[https://www.dokuwiki.org/plugin:outliner|outliner]] plugin now collapsible sections can be used anywhere in the wiki.
  
-The beginning of a section has to be marked with %%--> Title''[FLAGS]''%%. ''[FLAGS]'' is optional and can be:+The beginning of a section has to be marked with %%--> Title%%''[FLAGS]''. ''[FLAGS]'' is optional and can be:
  
   * ''%%#%%'' for no preview (this is recommended)   * ''%%#%%'' for no preview (this is recommended)
 +  * ''%%^%%'' to be opened by default (not recommended, defies the point)
   * ''%%@%%'' for to indicate that there's an internal wiki link in title (otherwise it would just show the link syntax as if it were the title)   * ''%%@%%'' for to indicate that there's an internal wiki link in title (otherwise it would just show the link syntax as if it were the title)
  
-Sections can be closed by using <-- on a new line. Sections can also be nested. Example: +Sections can be closed by using %%<--%% on a new line. Sections can also be nested. Example: 
  
 <code> <code>
---> Text to be displayed in the header# +--> Section 1 without preview (recommended)#
-Contents of this can be anything. +
-  * If ending with an list such as a bullet list, remember to add one space after the list so as to avoid syntax errors, like so: +
- +
-<-- +
- +
---> Section 1 without preview#+
  
 First level content. This can be pretty much anything. First level content. This can be pretty much anything.
Line 225: Line 261:
 <-- <--
  
---> [[:batocera_wiki_code_snippets#adding_a_collapsible_section|Internal link in a section header.]]@#+--> [[:batocera_wiki_code_snippets|Internal link in a section header.]]@#
  
-If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar.+If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar. Does not work with section-specific in-links (ones that require a %%#%%), as that conflicts with the ''[FLAGS]''. 
 + 
 +--> [[:batocera_wiki_code_snippets|Internal link in a section header without the correct flag, opened by default.]]#^ 
 + 
 +Notice how it instead shows the syntax instead of actually linking? 
 + 
 +<--
  
 <-- <--
Line 240: Line 282:
 which would appear like so: which would appear like so:
  
---> Text to be displayed in the header.# +--> Section 1 without preview (recommended)#
-Contents of this can be anything. +
-  * If ending with an list such as a bullet list, remember to add one space after the list so as to avoid syntax errors, like so: +
- +
-<-- +
- +
---> Section 1 without preview#+
  
 First level content. This can be pretty much anything. First level content. This can be pretty much anything.
Line 261: Line 297:
 <-- <--
  
---> [[:batocera_wiki_code_snippets#adding_a_collapsible_section|Internal link in a section header.]]@+--> [[:batocera_wiki_code_snippets|Internal link in a section header.]]@# 
 + 
 +If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar. Does not work with section-specific in-links (ones that require a %%#%%), as that conflicts with the ''[FLAGS]''. 
 + 
 +--> [[:batocera_wiki_code_snippets|Internal link in a section header without the correct flag, opened by default.]]#^ 
 + 
 +Notice how it instead shows the syntax instead of actually linking? 
 + 
 +<--
  
 <-- <--
Line 270: Line 314:
  
 <-- <--
 +
 +===== File tree ASCII art =====
 +
 +When you need to display a folder's structure, the best way to do so is via an ASCII tree in a code block like so:
 +
 +<code>
 +roms/
 +├─ psx/
 +│  ├─ Final Fantasy VII (Disc 1).bin
 +│  └─ Final Fantasy VII (Disc 1).cue
 +└─ Final Fantasy VII (Disc 1).m3u
 +</code>
 +
 +Although it may be fun to write these out yourself, an automatic tool to create them is available at https://ascii-tree-generator.com/
  
 ===== CSV SAMPLE OUTPUT GOOGLE ===== ===== CSV SAMPLE OUTPUT GOOGLE =====
Line 292: Line 350:
   - Copy the link (check it ends with output=csv) and paste it into your dokuwiki CSV table using the file= attribute described above.   - Copy the link (check it ends with output=csv) and paste it into your dokuwiki CSV table using the file= attribute described above.
 </WRAP> </WRAP>
 +
 +===== Embed a website into a wiki page =====
 +
 +Batocera wiki supports iframes, showing another web page inside of the article. Simple example:
 +
 +<code>
 +{{url>http://www.example.com/somepage.html}}
 +</code>
 +
 +Full syntax:
 +
 +<code>
 +{{url>someurl width,height noscroll noborder alignment|alternate-text}}
 +</code>
 +
 +Javascript URLs are not supported. More info at https://www.dokuwiki.org/plugin:iframe
  
 ===== Templates ===== ===== Templates =====
Line 319: Line 393:
   * GRID List View -> themename_grid   * GRID List View -> themename_grid
   * Resolution 1920x1080   * Resolution 1920x1080
- 
-==== EMULATOR HEAD PAGE ==== 
- 
-<WRAP center round box 100%> 
-{{ :wiki:dokuwiki-128.png?nolink&100 |}} 
- 
-====== DOKUWIKI-Dokumentation System ====== 
- 
-<csv> 
-Emulator, ROM Folder, Extension, BIOS, Config [and/or Savestates] 
-lr-lbrpdx, /userdata/roms/lbrpdx, .lala, darknior.bin, /userdata/saves/system/genetik.file 
-</csv> 
-</WRAP> 
- 
-<code> 
-{{ :emulators:system_logo.png?nolink&200 |}} 
- 
-======= SYSTEMNAME ======= 
- 
-<csv> 
-Emulator, ROM Folder, Extension, BIOS, Config [and/or Savestates] 
-lr-xxxx, /userdata/roms/yyyy, .zzz .xyz, biosfile.bin, /userdata/saves/system/config.file 
-</csv> 
-</code> 
  
  • batocera_wiki_code_snippets.1632536040.txt.gz
  • Last modified: 5 years ago
  • by atari