NaitLee / Takeback-HFS-Template

A cool file list template for HFS, with a layout style of Throwback template.
BSD 2-Clause "Simplified" License
16 stars 2 forks source link

Index and Addons #3

Closed xamionex closed 3 years ago

xamionex commented 3 years ago

I have an index on an older version of this template and I'm not sure how to get it into the newer version image And I also have no idea how to use the "addons"?

(I have no idea how to do HTML but it looks like index was removed from newer version? :c )

NaitLee commented 3 years ago

Wow, you've discovered this! I just think almost no one uses this index-page feature and not implemented in 0.3 versions... Perhaps I should add it again now, it's easy for me. Just stay tuned, will finish it within few hours and publish a release!

And, for addons, in 0.3 you can use the generator too, just select the addon files in that input; for 0.2 you would put addon contents in "diff template"... for more please see here

Btw 0.2 is considered have insecure features and should be not be used anymore. Needs more features? Simply ask for them!


Advertisement: try PHFS also!

xamionex commented 3 years ago

Woah, didn't expect such a fast response, i'll definitely try using addons and PHFS. Also i managed to add the index just.. kind of broken, take a look image

Cos i'm kind of new to website coding and stuff i have no idea what's wrong and it broke everything This is the index script i used btw


<!doctype html>
{.set|#TkbNav.0|Software[Software]Primarily useful programs.}
{.set|#TkbNav.1|Applications[App]Everything that's not a zip.}
{.set|#TkbNav.2|Games[Games]Games that i have downloaded.}
{.set|#TkbNav.3|Upload[Upload]You can share your files here.}
{.set|#TkbNav.4|Ninite[https://ninite.com/]You can download your most used programs here quickly (always updated).}

<html>
<head>
    {.$commonhead.}
    <link rel="stylesheet" href="/~takeback-filelist.css" />
    <title>{.!TitleText.}</title>
</head>
<body>
    {.$commonbody.upper.}
    <div class="pond">
        <header>
            <h1 class="logo">
                <a href="/" style="text-decoration: none;">
                    🌎<span>{.!TkbIndex.TitleShort.}</span>
                </a>
            </h1>
            <nav class="nav">
                <h2 class="hidden">Navigation</h2>
                <!-- Navigation items, will be inited with JS. -->
                <ul id="nav">
                    {.set|num|0.}
                    {.for each|i|{.var domain|#TkbNav.|get=values.}|{:
                        {.set|nav|{.^i.}.}
                            <li><a href="{.substring|[|]|{.^nav.}|include=0.}">
                                <abbr title="{.substring|]||{.^nav.}|include=0.}">{.substring||[|{.^nav.}|include=0.}</abbr>
                            </a></li>
                        {.inc|num|1.}
                    :}.}
                </ul>
            </nav>
        </header>
        <div class="main">
            <div id="title">{.!TkbIndex.Title.}</div>
            <!-- Items -->
            <h2 class="hidden">Items</h2>
            <div id="itemlist">
                {.set|num|0.}
                {.for each|i|{.var domain|#TkbIndex.|get=values.}|{:
                    {.set|index|{.^i.}.}
                    {.set|direction|{.if|{.=|{.mod|{.^num.}|2.}|0.}|left|right.}.}
                    <div class="item {.^direction.}">
                        <a href="{.substring|[|]|{.^index.}|include=0.}">
                            {.substring||[|{.^index.}|include=0.}
                            <span class="item arrow"></span>
                        </a>
                        <div class="item {.^direction.} description">{.substring|]||{.^index.}|include=0.}</div>
                        <div class="item {.^direction.} border"></div>
                    </div>
                    {.inc|num|1.}
                :}.}
            </div>
            <!-- Copyright -->
            <h2 class="hidden">Copyright</h2>
            <div class="copyright">
                Petar's Custom Server <a href="https://bit.ly/3904XDm" target="_blank">(Click here for software)</a>.
                <br />Uptime: %uptime%
            </div>
        </div>
    </div>
    <!-- <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script> -->
    <script src="~takeback-filelist.js"></script>
    {.$commonbody.lower.}
</body>
</html>

[]
{.comment|If it is root, load index page.}
{.if|{.!UseTakebackIndex.}|
{:{.if|{.=|%folder%|/.}|
{:{.$takebackindex.}:}|{:{.$filelist.}:}
.}:}|{:{.$filelist.}:}
.}```
NaitLee commented 3 years ago

There are many reasons to cause such a break, in this case it's some CSS file failed to load...

I did a quick look, seems you're trying to mix 0.2 with 0.3. (there's a <link> element with incorrect css href) But, takeback 0.3 is completely not compatible to 0.2 since it's fully rewritten.

Don't panic... Just wait for new version now :)

Trivia:

xamionex commented 3 years ago

There are many reasons to cause such a break, in this case it's some CSS file failed to load...

I did a quick look, seems you're trying to mix 0.2 with 0.3. (there's a <link> element with incorrect css href) But, takeback 0.3 is completely not compatible to 0.2 since it's fully rewritten.

Don't panic... Just wait for new version now :)

Trivia:

  • Takeback 0.2 and before is based on Throwback, but not anymore since 0.3 -- it's completely rewritten with more modern things and clean structure.
  • The "index" in 0.2 is based on another unknown index-page project. For being independent, it got (temporarily) removed 'till now :)

Tysm!! ⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣶⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣦⣄⣀⡀⣠⣾⡇⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀ ⠀⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠿⢿⣿⣿⡇⠀⠀⠀⠀ ⠀⣶⣿⣦⣜⣿⣿⣿⡟⠻⣿⣿⣿⣿⣿⣿⣿⡿⢿⡏⣴⣺⣦⣙⣿⣷⣄⠀⠀⠀ ⠀⣯⡇⣻⣿⣿⣿⣿⣷⣾⣿⣬⣥⣭⣽⣿⣿⣧⣼⡇⣯⣇⣹⣿⣿⣿⣿⣧⠀⠀ ⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠸⣿⣿⣿⣿⣿⣿⣿⣷⠀

NaitLee commented 3 years ago

Try this version of release It used a macro that is not implemented in PHFS yet. Please wait for updates. I'm going to sleep. Please help test its features, report if there's something wrong ;)

xamionex commented 3 years ago

It works perfectly! (I even managed to put uptime in footer :D) image But i wanted to bring to ur attention that generator seems to duplicate special strings and place it at top of file, I'm not sure if this is intended or not (I deleted the other one) image

Anyone wondering how I added uptime in footer, just add Uptime: %uptime% in footer in generator :3 Though i do not know how to add a link in footer! I would like to know if that's possible?

xamionex commented 3 years ago

Also star wars addon seems to appear broken? image

PS. I added the addon in Diff Template in HFS, Is that the right way or no?

NaitLee commented 3 years ago

Hi,

Glad to hear that it works for you!

To put a link in footer, use HTML:

<a href="https://...">Link</a>

The special:strings are intended to exist two. and, see the char before the section name, ^ means prepend content to section, + means append. so the generator's customization have more priority :)

Also, takeback 0.3 addons should be used in the generator (select addons at an input, like the font), not diff tpl

Good time~

xamionex commented 3 years ago

Gonna try this next morning, it's like 2am xD Tysm for doing this for me it means so much ;3

xamionex commented 3 years ago

Seems to just add them at the end of the file, which is nice cos it means u can quickly remove/add without generator Edit: Yep it works :D image

xamionex commented 3 years ago

CSS Test

https://user-images.githubusercontent.com/57235791/124415211-ae86e700-dd54-11eb-8c85-71e7146a9d31.mp4

Final Result

https://user-images.githubusercontent.com/57235791/124415257-c52d3e00-dd54-11eb-9345-437f72eac982.mp4