I installed but it didn't work

[resherry2020]

Hi, I am a new user of wiki.js, so I am not sure whether is something wrong or not.

I installed it as you said, I also used Linux and was like:

I also add code into the theme in the right place:

I don't know why you used _assets here, I tried both assets and _assets. But the results were same, I used the static navigation, but it is :

I am not sure are there anything wrong...

Please give me advice, thanks in advance!

[madodig]

Hi, did you create a symbolic link in Wiki.js assets folder (path_to_your_wiki-js/app/assets"), pointing to wikijs-customization/code folder, ie: ln -s /opt/wiki-js/wikijs-customization/code /opt/wiki-js/app/assets/wjsccode Restart of the wiki instance is needed after this. EDIT: Screenshot shows the failure in creating the symlink, did you previously create a symlink, or the command failed because you already had a folder/file under the target path?

Instead of creating the files on the server, you could just download the .js and .css files and upload it to your wiki.js instance to a path everyone is allowed to read, and then include those paths in Body HTML Injection. Look at: https://github.com/madodig/wikijs-customization/issues/11#issuecomment-1925433533

[madodig]

I don't know why you used _assets here, I tried both assets and _assets

assets is the folder that comes with the wiki-js installation. When referenced in the browser, _assets is used. You can verify this by navigating to one of the built-in assets, ie favicon: https://<your_wiki>/_assets/favicon.ico should return the favicon, https://<your_wiki>/assets/favicon.ico should return 404.

Following is the redacted output from my test instance (wiki-js installed in /opt/wiki-js/dev/app), hope it helps:

$ ls /opt/wiki-js/dev/
app  customization

$ ls /opt/wiki-js/dev/app
assets  config.sample.yml  config.yml  data  LICENSE  node_modules  package.json  server

$ ls /opt/wiki-js/dev/app/assets/
browserconfig.xml  css  favicon.ico  favicons  fonts  img  js  manifest.json  svg  wjsccode

$ ls -la /opt/wiki-js/dev/app/assets/
total 52
...
lrwxrwxrwx 1 <USER> <GROUP>    24 Sep  1  2023 wjsccode -> ../../customization/code

$ ls /opt/wiki-js/dev/customization/code/
mad-wikijs-customization.js  wjs_html-injection-code.head  mad-wikijs-customization.css  wjs_html-injection-code.body

# Verifying the symlink works:
$ ls /opt/wiki-js/dev/app/assets/wjsccode/
mad-wikijs-customization.js  wjs_html-injection-code.head  mad-wikijs-customization.css  wjs_html-injection-code.body

Then I have in 'Body HTML Injection' field:

<link rel="stylesheet" href="/_assets/wjsccode/mad-wikijs-customization.css">
<script src="/_assets/wjsccode/mad-wikijs-customization.js"></script>

To verify you are able to read JS and CSS file, navigate to: https://<your_wiki>/_assets/wjsccode/mad-wikijs-customization.js https://<your_wiki>/_assets/wjsccode/mad-wikijs-customization.css

[resherry2020]

Thanks, it works!

Is it only allow two level titles? The first level is a header and links inside, there is no third level title and I can't put links inside links?

[madodig]

Great!

Yes, adding multiple levels not supported.

[resherry2020]

Hi, Could I ask you a question more? Do you know how to deal with the space of the page contents if the page does not have multiple levels?

[resherry2020]

Hi, after I installed it, I found out I can't upload videos like before. I don't know whether it is because of this customization or the wiki.js issue. Did you face a problem similar to this?

[madodig]

Hi, no, I haven't experienced that issue. Injection code feature, as far as I know, is active (by design) only when browsing pages, it is not loaded when in page edit mode or in admin area, so it couldn't impact actions performed there (such as uploading assets). You can open dev tools in your browser and check the console/network for errors.

[madodig]

As for the previous question (if it's still relevant; sorry for late replies), this looks like a bug in injection code. If I understood you correctly, you have a page with no headings, hence no Table of Contents is rendered, but still the page content is positioned as if the page had a ToC and there's a blank space. You can work around this by adding custom CSS code. For each page that you would like to fix the spacing, when in page edit mode, choose Page in the top right, then Styles, and paste the following code:

main div.page-col-content.is-page-header {
  margin-left: 0
}
main div.layout.row div.flex.page-col-sd {
  display: none
}

Click OK, save the page and close.

EDIT: To be able to insert custom CSS code, user needs write:styles permission on the page.

Note that if/when the page is edited to include the headings, the ToC will then be hidden due to this CSS being active. The CSS should then be removed from that page for the ToC to be visible.