hexojs / hexo

A fast, simple & powerful blog framework, powered by Node.js.
https://hexo.io
MIT License
39.51k stars 4.86k forks source link

How to provide files users can download? #1724

Closed connor11528 closed 8 years ago

connor11528 commented 8 years ago

I would like for people to download my ebook. It is a pdf file. So when users click a link I would like them to download a pdf. How do I do this with hexo.js?

greg-js commented 8 years ago

Put the pdf in your ./source folder (or in a subfolder thereof). It will then be available at yoursite/yourpdf.pdf.

connor11528 commented 8 years ago

Ok cool! So I put my file in ./source and then do a link like this: http://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript

Kind of a silly question but thank you for your help

greg-js commented 8 years ago

Yes putting the file there (and of course hexo generate and then deploy or serve) will make the file available and then you can use plain html or javascript to link to it, but that last part is assuming that you are writing the html or javascript yourself, which you're not really doing if you're using Hexo.

So if you want to add the PDF as a link in a post, it's very easy, just link to it using markdown. Say you've put book.pdf in ./source/books/, then put something like [Download my book!](/books/book.pdf) anywhere in the article and it will create the link for you. If you really want a button instead of a regular text link, the following should probably do it, even though it feels a little hacky:

{% raw %}
<button onclick="window.open('/books/book.pdf')">Download</button>
{% endraw %}

However, it sounds like you may want to put the link on your front page or in a sidebar or something. How you do that is not up to hexo but rather up to the theme you are using, but basically, you will need to edit the right file in the theme, probably somewhere like ./themes/yourtheme/layout/_partial/index.ejs or ....../sidebar.jade or whatever. Over there you'll be able to put HTML and even inline JS if you want (note that you may and probably will not have access to jQuery at that point though). Consult the hexo documentation for more info on how the layouts are structured. Hope that helps you out :)

connor11528 commented 8 years ago

Ok awesome! I will post updates from trials and tribulations here. Great job with the hexo.js project. Much simpler and easier to get started with than its competitors! Here is another SO link for reference: http://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html

greg-js commented 8 years ago

Heh, fwiw I'm not affiliated with hexo (other than writing some documentation and a little plugin) but yes I like it a lot too. As for the links, understand that Hexo is at its core about writing markdown files which then get converted into HTML by Hexo. You can put HTML in your articles by wrapping them in the raw tag plugin (see my comment above) but the simpler way to do it is by using markdown syntax. Any [text](link) you put in a markdown file will get converted to a <a href="link" target="_blank">text</a> automatically (or alternatively you can use the link tag which will do the same thing using a different syntax). Either way, users then click the link to open the pdf right in their browsers, or right-click and "save as" to download, which is really the canonical way and will work in all, even ancient, browsers.

When editing the layout files (for changing the sidebar or other non-article parts of the site), you usually won't be using plain HTML and JS either - most themes use either EJS or Jade as templating engines. It's not hard to learn (just check the relevant documentation) but you should know this or you will waste a lot of time trying (and in the case of Jade, failing) to put those plain HTML and JS snippets from SO in there..

kkhale commented 5 years ago

I have a link for my file but how can i write it in markdown to download directly rather then opening it a browser and then save as download. any clue?