GithubHelp home page GithubHelp logo

LOFFER是个可以帮助你get off from LOFTER的软件(我知道这个pun很烂)。

这是一个可以通过Fork直接发布在GitHub的Jekyll博客,你不需要编写代码或使用命令行即可获得一个部署在GitHub的博客。

LOFFER已更新到V0.2.0版本

新版本进一步优化了一下样式,并且支持了基于GitHub Issues的评论Gitalk(请看下文的配置说明)。

如果你已经fork了LOFFER,想要更新到新版本的话,可以试试这个方法,或者你也可以干脆删掉重来,只要保留自己的大部分config设定和所有的post就好。

LOFFER只是容器,你的posts才是博客的核心。

注意

LOFFER是一个博客模板,使用GitHub Pages发布个人博客是没有任何问题的。 但是:

  • 请勿发布成人向内容
  • 不要将大量图片上传到GitHub

如有疑问,请阅读GitHub Pages官方说明

另外,同人作品更好的发布平台是AO3,你想你发在AO3还有tag还有kudos还有人看,是吧?

如何使用

首先,这个博客主题适应手机阅读,但是,要使用它建立你自己的博客,你需要上电脑操作。

第一步 Fork到你的GitHub

请点击GitHub,注册一个GitHub账户。我们可以理解Git就是个文件版本管理系统,本身并不需要会代码即可使用。

现在你看到的LOFFER,是作为一个GitHub上的Repository(代码库)存在的,你可以把这个代码库复制到你自己的GitHub账户中,这个操作叫做Fork。

点击LOFFER,进入LOFFER的GitHub Repository页面,然后点Fork:

gif

然后你立刻就可以看到LOFFER再次出现,这次它已经属于你了,这里我建议你重命名它,点击settings,给你的博客起个名字(请尽量使用字母而非中文)。

img

然后,向下拉页面,你会看到“GitHub Pages”,这是GitHub内置的网站host服务,选择master,如图所示:

img

在几秒钟后,刷新此页面,你通常会看到这个绿色的东西(如果没看到,多等一会),你的网站已经发布成功,点击这个链接,即可查看:

img

你可能会看到网站长得很丑,请继续下一步.

第二步 设置站点信息

在你的博客的GitHub代码库页面里,选择Code,文件列表里选择_config.yml,点击打开,点击右上角笔形图标修改文档。

修改完成后,点击“Commit changes”。每次修改过代码库并且commit后,GitHub Pages都会自动重新发布网站,只要等上几分钟,再次刷新你的博客页面,就会看到你的修改了。

还有一点,LOFFER使用的是MIT协议,大意就是全部开源随意使用,如果你要保留自己博文的权利,请编辑LICENSE文件,写上类似“_posts中的文档作者保留权利”这样的内容。

第三步 发布博文

在你的博客的GitHub代码库页面里,点开_posts文件夹,这里面就是你的博客文章。

这些文章使用的格式是Markdown,文件后缀名是md,这是一种非常简单易用的有格式文本标记语言,你应该已经注意到,在LOFFER自带的示例性博文中有一篇中文的Markdown语法介绍。

更简单的办法是使用Typora,这是一个全图形化界面,全实时预览的Markdown写作软件,非常轻量,而且免费。

img

在发布博文前,你需要在文章的头部添加这样的内容,包括你的文章标题,发布日期,作者名,和tag等。

---
layout: post
title: LOFFER文档
date: 2019-06-02
Author: 来自中世界
categories: 
tags: [sample, document]
comments: true
--- 

完成后,保存为.md文件,文件名是date-标题,例如 2019-06-02-document.md (注意这里的标题会成为这个post的URL,所以推荐使用字母而非中文,它不影响页面上显示的标题),然后上传到_posts文件夹,commit,很快就可以在博客上看到新文章了。

可选:图片怎么办?

少量图片可以上传到images文件夹,然后在博文中添加。

但是GitHub用来当做图床有滥用之嫌,如果你的博客以图片为主,建议选择外链图床,例如sm.ms就是和很好的选择。

如果想要寻找更适合自己的图床,敬请Google一下。

在博文中添加图片的Markdown语法是:![图片名](URL)

可选:添加评论区

Disqus

LOFFER支持Disqus评论,虽然Disqus很丑,但是它是免费的,设置起来又方便,因此大家也就不要嫌弃它。

首先,注册一个Disqus账户,我们可以选择这个免费方案:

img

注册成功后,新建一个站点(site),以LOFFER为例设置步骤如下:

首先站点名LOFFER,生成了shortname是loffer,类型可以随便选。

img

安装时选择Jekyll。

img

最后填入你的博客地址,语言可以选中文,点Complete,即可!

img

然后需要回到你的博客,修改_config.yml文件,在disqus字段填上你的shortname,commit,完成!

Gitalk

新增内容,LOFFER 0.2.0版本支持Gitalk评论区(在LOFFER示例站中仍然是Disqus,可以在我的博客查看Gitalk的demo),设置方法如下:

首先,创建一个OAuth application, 设置如图:

img

点Register后就会看到你所需要的两个值,clientID和clientSecret,把它们复制到你的_config.yml文件中相应的字段:

gitalk:
  clientID: <你的clientID>
  clientSecret: <你的clientSecret>
  repo: <你的repository名称>
  owner: <你的GitHub用户名>

然后commit,你的Gitalk评论区就会出现了。对于每一篇文章,都需要你来进入文章页,来初始化评论区,这一操作会在你的repository上创建一个Issue,此后的评论就是对这个Issue的回复。

你可以进入你的repository的Issue页面,点Unsubscribe来避免收到大量相关邮件。

注意:出于很明显的原因,最好不要同时添加Disqus和Gitalk评论区。

导入LOFTER的内容

这部分由于LOFTER的导出文件十分优秀,需要另外解决。

诸位可以使用墨问非名太太的脚本,其中选择Jekyll输出即可。

我个人也在折腾一个脚本,目前还没有完全debug清楚,不管如何,请先在lofter里导出一下,存在本地也是好的,贴吧可以让2017以前所有内容全部消失,**互联网,没什么不可能发生的。

致谢

  • Jekyll - 这是本站存在的根基
  • Kiko-now - 我首先是fork这个主题,然后再其上进行修改汉化,才有了LOFFER
  • Font Awesome - 社交网络图标来自FontAwesome的免费开源内容

帮助这个项目

介绍更多人来使用它,摆脱lofter自由飞翔!

当然如果单说写同人的话,我还是建议大家都去AO3,但是自家博客自己架也很酷炫,你还可以选择很多其他的forkable Jeykll主题,GitHub上有很多,或者试试其他博客架设工具,例如Hexo,与代码斗其乐无穷。

最后,回到LOFFER,给我点一个☆吧!

img

2019 Summer vacation's Projects

goldendict icon goldendict

A feature-rich dictionary lookup program, supporting multiple dictionary formats (StarDict/Babylon/Lingvo/Dictd) and online dictionaries, featuring perfect article rendering with the complete markup, illustrations and other content retained, and allowing you to type in words without any accents or correct case.

hacker-slides icon hacker-slides

A simple app that combines Ace Editor and RevealJS. You can write markdown on the left, and preview your presentation on the right.

impress.js icon impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

marp icon marp

[Deprecated] Markdown presentation writer, powered by Electron.

remark icon remark

Markdown processor powered by plugins part of the @unifiedjs collective

wgnfls icon wgnfls

博客主题 A forkable Jekyll theme with Chinese UI and document

wisecreator icon wisecreator

Utility for adding word wise information to non amazon .mobi books

work_crawler icon work_crawler

Download comics novels 小说漫画下载工具 小説漫画のダウンローダ 小說漫畫下載:腾讯漫画 大角虫漫画 有妖气 知音漫客 咪咕 SF漫画 哦漫画 看漫画 漫画柜 汗汗酷漫 動漫伊甸園 网易漫画 快看漫画 微博动漫 733动漫网 大古漫画网 漫画DB 無限動漫 動漫狂 卡推漫画 动漫之家 动漫屋 土豪漫画 古风漫画网 36漫画网 亲亲漫画网 360漫画 乙女漫画 comico webtoons 咚漫 MAGCOMI ComicWalker ヤングエースUP モアイ pixivコミック サイコミ;アルファポリス カクヨム ハーメルン 小説家になろう 卡提諾論壇 起点中文网 八一中文网 顶点小说 落霞小说网 努努书坊 笔趣阁→epub.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.