Git Product home page Git Product logo

hexo-theme-jsimple's Introduction

JSimple

JSimple is a responsive blog theme for Hexo which include day-night mode, local search, article view count etc. Inspired by JianShu that in the earliest.

JSimple-Snapshot-Macbook Pro15

Installation

  1. Get it from GitHub
$ git clone https://github.com/tangkunyin/hexo-theme-jsimple themes/jsimple
  1. Enable

Modify theme setting in _config.yml to jsimple.

To use of the local search, please add hexo-generator-search

  1. Update
$ cd themes/jsimple
$ git pull

Configurations

For a quick start, see my Site backup may be more convenient.

site _config.yml

# choose your language. default Chinese
language:
    - en
    - zh-cn

# URL (Notice the permalink. Variable timestamp in post.md was added from hexo lib source)
##  Please see the scripts in patch dir for more details
url: https://tomartisan.com
root: /
permalink: :category/:entitle-:timestamp.html
permalink_defaults:
  lang: en

# Local search
search:
  path: search.json
  field: all
  content: true
  
# Category alias
default_category: Tech
category_map:
   Tech: tech-notes
tag_map:
  hexo: hexo

theme _config.yml

# Master information. At the other hand, the fields int post.md(author|avatar|authorLink|authorAbout|authorDesc)also have the same effects
## The priority in article config is higher than theme when you configuring at the same time. This used for multiplayer creation 
webmaster:
  name: Thomas Tang
  avatar: /images/favicon.png
  home: https://tomartisan.com
  desc: Senior Chinglish writer and coder😁️️

# Decide whether the 'Content-Security-Policy = upgrade-insecure-requests' will be add in head tag.
csp_enable: false

# Article sort mode: -1(newer first),1(older first). home_article_shown means paging count
home_page_sort: -1
home_article_shown: 10

# Article category navigation 
menu:
  Tech: tech-notes
  Life: humanities

# Left navigation link. The faName is in FontAwesome styles.
left_nav_menus:
- uri: help
  title: Help
  faName: fa-question-circle
  
  
# Google AdSense. Support auto-ads and manual-unit
adsense:
  enable: false// manual-unit-ads
  auto: false// auto-ads
  client_id:
  archive_id:
  tags_id:    
  post_left_id:
  post_right_id:
  post_bottom_id:


# Only support Disqus and Gitment so far.
comments:
  enable: false
  disqus_shortname:
  gitment:
    repo:
    githubID:
    ClientID:
    ClientSecret:
    lazy: true

Other config

Search Module

Because of the search in previous version didn't work well. Such as highlight content, responsive problem in small screen.

So I replace it with hexo-generator-search. Thanks for Next theme.

There are two Chinese articles that told how to create local-search in hexo.

How sticky top and timestamp works

I have made some changes in hexo lib source code so that timestamp and sticky datasource could get when hexo-cli generating articles.

From version 0.0.7, JSimple have been adding patch scripts. You need to excute patch/run.sh when node_modules was deleted.

You have to copy the patch dir into your site dir, otherwise sticky top and timestamp in permalink will not work.

AdSence

From version 0.0.7. Google AdSense have been added. If you don't need this, just close it.

The other things about JSimple

If you don't understand Chinese. You can translate online by Google Translate 🤣🤣🤣

Browser support

Contributing

All kinds of contributions (enhancements, new features, documentation & code improvements, issues & bugs reporting) are welcome.

Looking forward to your pull request.

Special thanks to iTimeTraveler and jiangmuzi, who designed the theme Hipaper and JianShu.

License

JSimple is under the MIT license. See the LICENSE file for details.

Thanks

Hexo Font Awesome

hexo-theme-jsimple's People

Contributors

tangkunyin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hexo-theme-jsimple's Issues

分类如何设置,标签不显示呢

感谢您之前的解释,我现在已经可以成功使用您的主题,但是我现在的标签分类显示不了

image

我没有很理解您这里的意思,如果方便的话,希望您能再次指导一下,不胜感激。

在哪里可以设置首页大图

我的左侧显示不出来图片~ 在——config.yml中也没发现配置项,在本地f12后 background: url(https://removeif.github.io/images/cover-day.jpg) center center / cover no-repeat; 我都没设置~~这应该去哪里改呢

I have an error

Unhandled rejection TypeError: /home/u7/www/hexo.blog/themes/jsimple/layout/index.ejs:1
 >> 1| <%- partial('_partial/archive', {pagination: 2, index: true}) %>

/home/u7/www/hexo.blog/themes/jsimple/layout/_partial/archive.ejs:18
    16|     <!-- 首页默认取最最新文章集 -->
    17|     <% page.posts.sort('date', theme.homePageSortType).limit(theme.homeArticleShown).each(function(post){ %>
 >> 18|     <%- partial('_widget/category-items', {post: post}) %>
    19|     <% }) %>
    20|     <% } else { %>
    21|     <% page.posts.each(function(post){ %>

/home/u7/www/hexo.blog/themes/jsimple/layout/_widget/category-items.ejs:19
    17|         <a class="post-title" href="<%- url_for(post.path) %>" target="<%= external_link %>" title="<%= post.title %>"><%= post.title %></a>
    18|         <div class="post-meta">
 >> 19|             <a href="<%- url_for(post.path) %><%= config.duoshuo_shortname.length ? '#ds-thread' : '#disqus_thread' %>" target="<%= external_link %>">评论:?</a>
    20|             <em>·</em>
    21|             <a href="<%- url_for(post.path) %>" target="<%= external_link %>">阅读:?</a><em>·</em>
    22|             <span>喜欢:?</span>

Cannot read property 'length' of undefined
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:1404)
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:1895)
    at /home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:255:15
    at _compiledSync (/home/u7/www/hexo.blog/node_modules/hexo/lib/theme/view.js:122:20)
    at View.renderSync (/home/u7/www/hexo.blog/node_modules/hexo/lib/theme/view.js:50:21)
    at Object.partial (/home/u7/www/hexo.blog/node_modules/hexo/lib/plugins/helper/partial.js:42:17)
    at Object.wrapper (/home/u7/www/hexo.blog/node_modules/lodash/lodash.js:4968:19)
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:1011)
    at Query.forEach (/home/u7/www/hexo.blog/node_modules/warehouse/lib/query.js:42:5)
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:948)
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:33:66)
    at /home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:255:15
    at _compiledSync (/home/u7/www/hexo.blog/node_modules/hexo/lib/theme/view.js:122:20)
    at View.renderSync (/home/u7/www/hexo.blog/node_modules/hexo/lib/theme/view.js:50:21)
    at Object.partial (/home/u7/www/hexo.blog/node_modules/hexo/lib/plugins/helper/partial.js:42:17)
    at Object.wrapper (/home/u7/www/hexo.blog/node_modules/lodash/lodash.js:4968:19)
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:35)
    at eval (eval at <anonymous> (/home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:103)
    at /home/u7/www/hexo.blog/node_modules/ejs/lib/ejs.js:255:15
    at _compiled (/home/u7/www/hexo.blog/node_modules/hexo/lib/theme/view.js:127:30)
    at View.render (/home/u7/www/hexo.blog/node_modules/hexo/lib/theme/view.js:29:15)
    at /home/u7/www/hexo.blog/node_modules/hexo/lib/hexo/index.js:387:25

update gitalk

最近Github经常发这个错误邮件Deprecation notice for authentication via URL query parameters,需要更新下gitalk gitalk/gitalk#343

手机端问题

1.用手机打开,分类过多换行bug
1151546855453_ pic

2.搜索框太宽看不见
1141546855452_ pic

请教[影藏侧边栏效果怎么实现的]

您好,对前段这块不是太懂,想请教一下,点一下右上角的那个按钮,左边布局影藏,这块代码具体在哪一部分?或者怎么实现的?谢谢

Theme fails to load

After following instructions, the site no longer loads. Browser just hangs on the home page. Tried several browsers.

代码块错位

image

建议调整 .markdown-body .highlight .gutter 宽度为50px

主题存在的问题

该主题看起来很不错,但是有两个地方实在不舒服。
1、就是右边的滚动条,没办法用鼠标去拖动,鼠标一移到右边,就弹出目录,把鼠标遮挡了。
2、左边分类之后的文章,点一下,目录又回到所有文章了。

为博客文章添加目录时出现问题

谢谢您开发的博客主题!今天我在给博客文章添加目录的时候遇到了两个问题,不知道是不是我哪里操作有误。
1.我在/themes/jsimple/layout/_widgetcommon-article.ejs里添加了关于目录的代码
`

<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content, {list_number: false}) %>
</div>
<% } %>  

`
目录能够正常显示,但是会有一个异常编号出现在目录超链接前,如图

我已经关掉了toc默认的标号,但是这个没有包含在超链接里的编号不知道是怎么来的,网上也没有找到解决方案。

2.第二个问题是我尝试修改这个目录的样式,我看大多数教程都是在/themes/jsimple/source/css/_partial下新建和修改styl文件,担这个主题并不是这么写CSS的,我尝试把教程里的styl文件内容放到insight.styl和SimpleStyle.css两个文件里,都没有效果,请问我应该怎么做才能自定义目录样式?

访问首页出错

浏览器:chrome
异常现象:页面打开空白,后台提示:No layout: index.html

Suggestion about guide

I have a suggestion about guide of Installation.

In the README.md, you guide people to 'git clone' the JSimple code to theme folder.
It works, but the problem is

  • when I git push my blog's source code to github, the JSimple folder in github will be empty. That means I can't backup my settings of theme to github.
  • Also If I git clone my blog's source code from github to a new PC, the JSimple folder will keep empty, and I can't generate it to html.

So my suggestion is in the README.md telling user to git submodule add to instead of git clone, let me know if you have better idea.

Cannot read property 'ClientID' of undefined

Unhandled rejection TypeError: /Users/cainiaoshicai/Code/Hexo/themes/jsimple/layout/layout.ejs:4
    2| <html class="no-js" lang="zh-CN">
    3| <head>
 >> 4|     <%- partial('_partial/head') %>
    5|     <%- partial('_widget/ads/adSense-auto', null, {cache: !config.relative_link}) %>
    6|     <%- partial('_widget/analytics', null, {cache: !config.relative_link}) %>
    7| </head>

/Users/cainiaoshicai/Code/Hexo/themes/jsimple/layout/_partial/head.ejs:16
    14|     <link rel="prefetch" href="//<%= theme.comments.disqus_shortname %>.disqus.com">
    15| <% } %>
 >> 16| <% if (theme.comments.gitment.ClientID && theme.comments.gitment.ClientSecret) { %>
    17|     <link rel="dns-prefetch" href="//imsun.github.io">
    18|     <link rel="prefetch" href="//imsun.github.io">
    19| <% } %>

Cannot read property 'ClientID' of undefined
    at eval (eval at compile (/Users/cainiaoshicai/Code/Hexo/node_modules/ejs/lib/ejs.js:549:12), <anonymous>:32:35)
    at returnedFn (/Users/cainiaoshicai/Code/Hexo/node_modules/ejs/lib/ejs.js:580:17)
    at Theme._View.View._compiledSync (/Users/cainiaoshicai/Code/Hexo/node_modules/hexo/lib/theme/view.js:122:20)
    at Theme._View.View.View.renderSync (/Users/cainiaoshicai/Code/Hexo/node_modules/hexo/lib/theme/view.js:50:21)
    at Object.partial (/Users/cainiaoshicai/Code/Hexo/node_modules/hexo/lib/plugins/helper/partial.js:42:17)
    at Object.wrapper [as partial] (/Users/cainiaoshicai/Code/Hexo/node_modules/lodash/lodash.js:4941:19)
    at eval (eval at compile (/Users/cainiaoshicai/Code/Hexo/node_modules/ejs/lib/ejs.js:549:12), <anonymous>:11:17)
    at returnedFn (/Users/cainiaoshicai/Code/Hexo/node_modules/ejs/lib/ejs.js:580:17)
    at Theme._View.View._compiled (/Users/cainiaoshicai/Code/Hexo/node_modules/hexo/lib/theme/view.js:127:30)
    at Theme._View.View.View.render (/Users/cainiaoshicai/Code/Hexo/node_modules/hexo/lib/theme/view.js:29:15)
    at /Users/cainiaoshicai/Code/Hexo/node_modules/hexo/lib/theme/view.js:40:23
    at tryCatcher (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/cainiaoshicai/Code/Hexo/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:794:20)
    at tryOnImmediate (timers.js:752:5)
    at processImmediate [as _immediateCallback] (timers.js:729:5)

add livere comment please

hello
thank you for this wonderful theme.
would u like to consider to install the livere comment in your theme?
since we use livere a lot in asia, especially in korea and china.
thanks

发现一个bug

如果文章的 categories: ... 没有设置,主题就会报错。
/opt/myGithub/blog-nova/themes/jsimple/layout/_partial/_post.ejs:5
page.categories.first().name

heox generate met with error

#5
i love your theme but i face a little problem using it
i do

hexo init test
cd ./test
npm install

and i change theme in _config.yml
and when calling hexo g i encountered with following error

Unhandled rejection TypeError: C:\Users\77936\git\test\themes\jsimple\layout\post.ejs:1
 >> 1| <%- partial('_partial/_post', {post: page, index: false}) %>

C:\Users\77936\git\test\themes\jsimple\layout\_partial\_post.ejs:5
    3|         <li><a href="/">最新</a></li>
    4|         <% for (var i in theme.menu){ %>
 >> 5|         <li class="<%= (page.categories.first().name == i) ? 'active' : '' %>">
    6|             <a href="/categories/<%= theme.menu[i] %>" data-name="<%= i %>"><%= i %></a>
    7|         </li>
    8|         <% } %>

Cannot read property 'name' of undefined
    at eval (eval at <anonymous> (C:\Users\77936\git\test\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:30:228)
    at eval (eval at <anonymous> (C:\Users\77936\git\test\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:30:670)
    at C:\Users\77936\git\test\node_modules\ejs\lib\ejs.js:255:15
    at _compiledSync (C:\Users\77936\git\test\node_modules\hexo\lib\theme\view.js:122:20)
    at View.renderSync (C:\Users\77936\git\test\node_modules\hexo\lib\theme\view.js:50:21)
    at Object.partial (C:\Users\77936\git\test\node_modules\hexo\lib\plugins\helper\partial.js:42:17)
    at Object.wrapper (C:\Users\77936\git\test\node_modules\lodash\lodash.js:4968:19)
    at eval (eval at <anonymous> (C:\Users\77936\git\test\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:30:35)
    at eval (eval at <anonymous> (C:\Users\77936\git\test\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:30:99)
    at C:\Users\77936\git\test\node_modules\ejs\lib\ejs.js:255:15
    at _compiled (C:\Users\77936\git\test\node_modules\hexo\lib\theme\view.js:127:30)
    at View.render (C:\Users\77936\git\test\node_modules\hexo\lib\theme\view.js:29:15)
    at C:\Users\77936\git\test\node_modules\hexo\lib\hexo\index.js:387:25
    at tryCatcher (C:\Users\77936\git\test\node_modules\bluebird\js\release\util.js:16:23)
    at C:\Users\77936\git\test\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (C:\Users\77936\git\test\node_modules\hexo\lib\hexo\router.js:134:3)
    at RouteStream.Readable.read (_stream_readable.js:348:10)
    at resume_ (_stream_readable.js:737:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

i'm on windows using ,have i do anything wrong?

hexo: 3.2.2
hexo-cli: 1.0.2
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 6.10.0
v8: 5.1.281.93
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k

post信息填写变复杂了

之前在主题下配置好avatar: /images/favicon.png,authorDesc,author ,页面就有了,现在post里面没有定义的画 图片显示不了 字段显示undefined

中间列表不显示

你好:
首先感谢你的主体,我很喜欢这个主体,但是我在用的时候发现我弄不出来中间的那部分的列表,烦请指点一二,谢谢!本人对于这部分比较小白!

Issue about Cover image path

The cover image's path is hard coded in js/SimpleCore.js (changeReadModel).

When root value is NOT "/" in site's _config.yml, the cover image path will be broken.

For instance,
in site's config.yml,

url : http://site/sub
root:/sub/

the cover image path would ignore the sub, and be http://site/images/cover-night.jpg


Let me know if you can fix the bug:)

模板问题

hi tangkunyin,
我使用你的模板,做完readme操作后,遇到些问题,问问看,能不能解决!

03

01
04

How to set the default theme to 'night-mode'?

I found that there is 'switchReadMode' function to switch the theme in SimpleCore.js.
I wonder that except for the setting in init function, is there a graceful way to set the default theme to 'night-mode'?

markdown 的 code 模块会多出和代码行数一样的空行

你好,很喜欢你的主题,但是更新了新版之后,发现markdown中的code 模块会出现问题。

预期效果

输入一段代码片段后能正常显示

实际效果:

markdown 中的代码:

npm install wechaty
npm install wechaty-puppet-padchat

博客中的样式:
image

更多细节请看我的博客和项目:

复现代码:lijiarui/lijiarui.github.io@8f812bc#diff-2fdbe3bd6296b768fc242d131157a96aR49

异常博客显示:
https://lijiarui.github.io/project/2018-5-1-wechaty-puppet-padchat.html

部分标签失效

标签菜单中点击显示与之相关的文章功能,在本地hexo服务下正常,但发布到github就出现部分标签失效现象,我看你博客也存在部分标签404,请问能否解决下?

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.