{"id":20302388,"url":"https://github.com/mrminfive/hexo-theme-skapp","last_synced_at":"2025-04-05T12:08:34.444Z","repository":{"id":94736621,"uuid":"100713237","full_name":"Mrminfive/hexo-theme-skapp","owner":"Mrminfive","description":"The hexo flat design theme(扁平化简约主题)","archived":false,"fork":false,"pushed_at":"2019-06-12T14:38:54.000Z","size":881,"stargazers_count":480,"open_issues_count":34,"forks_count":114,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-08T21:04:00.483Z","etag":null,"topics":["hexo","hexo-theme"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mrminfive.png","metadata":{"files":{"readme":"README-cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-18T13:12:14.000Z","updated_at":"2024-12-07T09:20:01.000Z","dependencies_parsed_at":"2023-03-23T07:41:40.607Z","dependency_job_id":null,"html_url":"https://github.com/Mrminfive/hexo-theme-skapp","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fhexo-theme-skapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fhexo-theme-skapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fhexo-theme-skapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fhexo-theme-skapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mrminfive","download_url":"https://codeload.github.com/Mrminfive/hexo-theme-skapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hexo","hexo-theme"],"created_at":"2024-11-14T16:31:09.332Z","updated_at":"2025-04-05T12:08:34.418Z","avatar_url":"https://github.com/Mrminfive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## hexo-theme-skapp\n\n### 项目简介\n\n项目为 hexo 主题 skapp。\n\n附上预览地址： [demo][demo]\n\n#### 主题效果\n    \n![screenshot][screenshot]\n\n#### 语言支持\n\n主题默认支持 `zh-cn`、`en` 两种语言，有需要其它语言的可以自行扩展，将相应语言写成 yml 文件放置于主题下的 `languages` 文件下。\n\n### 使用方式\n\n基本的 hexo 博客搭建请参照 [hexo官网][hexo]，配置完 hexo 项目后再进行下面的操作。\n\n\u003e 以下操作均默认当前路径为 hexo 博客项目目录，请自行进入项目中。\n\n**注意**：**目前nodejieba2.2.5在node10版本中build会报错，nodejieba2.2.6已经修复了该bug，但是lunr仍然使用的是nodejieba2.2.5.因此建议使用node LTS版本,比如8.9.3** \n\n使用 git 将主题 clone 至你的 hexo 博客项目下的 themes 文件夹下\n\n``` shell\ncd themes \u0026\u0026 git clone https://github.com/Mrminfive/hexo-theme-skapp.git\n```\n\nclone 完后将根目录下的 `_config.yml` 文件中的 `theme` 字段设置为 `hexo-theme-skapp`，同时安装对应 node 依赖：\n\n``` shell\nnpm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign\n```\n\n**注意**：如果安装失败可尝试用 cnpm 进行安装。另外，由于使用 `nodejieba` 分词库，所以 windows 下用户应提前安装好相应编译环境。操作如下：\n\n``` shell\nnpm install -g windows-build-tools\nnpm install -g node-gyp\n```\n\n(确认 `PATH` 中 `python` 路径是否设置。)\n\nok，走到这一步主题编译需要的环境配置完了，可以使用 `hexo server` 进行本地预览了。\n\n*注：*如果样式生成失败，请用 `hexo clean` 清除下缓存后再 `hexo server`。\n\n*注：*如果调试时遇到缺少某些js文件(404error)，使用 `hexo server`来替代`hexo server -l` 来调试\n\n### 主题配置\n\n#### 设置语言\n\n编辑根 `_config.yml` 文件，将 `language` 设置为你想要的语言：\n\n``` yml\nlanguage: zh-cn\n```\n\n目前主题支持的语言如下：\n\n| 语言     |  代码  |\n| ------- | ----- |\n| English | en |\n| 简体中文 | zh-cn |\n\n#### 设置菜单\n\n编辑根 `_config.yml` 文件，将 `menu` 设置为如下：\n\n``` yml\nmenu:\n  home: / \n  archive: /archives\n  about: /about\n```\n\n主题默认的菜单项有：\n\n| 键值 | 设定值 | 显示文本（简体中文）|\n| --- | ----- | ---------------- |\n| home | home: / | 首页 |\n| archive | archive: /archives | 归档 |\n| about | about: /about | 关于 |\n| search | search: /search | 搜索页 | \n\n其中 `about`、`search` 与主题内置的 `404` 页面一样需要手动创建，创建方式如下：\n\n创建 about 页面：\n\n``` shell\nhexo new page about\n```\n\n然后编辑 source 文件夹下的 about 文件夹中的 index.md 文件：\n\n``` md\n---\ntitle: 关于\ndate: 2017-07-29 00:50:51\ntype: about\nlayout: about\n---\n\n...(以下内容将渲染在关于页面中)\n```\n\n创建 search 页面：\n\n``` shell\nhexo new page search\n```\n\n然后编辑 source 文件夹下的 search 文件夹中的 index.md 文件：\n\n``` md\n---\ntitle: 关于\ndate: 2017-07-29 00:50:51\ntype: search\nlayout: search\n---\n```\n\n404 页面则直接在 source 目录下创建 404.md 文件，文件内容如下：\n\n``` md\n---\ntitle: 404 Page Not Found\ndate: 2017-08-04 23:36:59\ntype: error\nlayout: error\n---\n```\n\n#### 博客信息配置\n\n以下配置均在根 `_config.yml` 中：\n\n``` yml\n# Site\n# 博客的标题\ntitle: MINFIVE\n\n# banner显示的子标题\nsubtitle: MINFIVE BLOG\n\n# banner显示的简短介绍\nsubtitle_desc: 日常学习与兴趣交流\n\n# seo关键字\nkeywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript\n\n# 博客介绍（同时用于seo）\ndescription: 日常学习与兴趣交流的个人博客\n\n# 个人介绍\nintroduction: 不思量，自难忘！\n\n# 博客的favicon图标，支持本地及在线两种方式，本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下\nfavicon_ico: https://blog.static.minfive.com/other/favicon.ico\n\n# 博客的左上角logo图标，支持本地及在线两种方式\nlogo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png\n\n# 头像/二维码（用于显示在底部）二选一\navatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png\n# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png\n\n# 文章的默认封面\ndefault_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png\n\n# header 的背景图\nheader_cover: https://blog.static.minfive.com/other/banner-bg.jpg\n\n# 404 页面的背景图\nerror_page_bg: https://blog.static.minfive.com/other/dogs.jpg\n\n# 页面加载loading图标\nloader_img: https://blog.static.minfive.com/other/loader.gif\n\n# 站长信息\nauthor:\n  name: minfive\n  link: https://github.com/Mrminfive\n# 用于页面 footer 的站长信息\nabout:\n  info: 本站是基于 Hexo 搭建的静态资源博客，主要用于分享日常学习、生活及工作的一些心得总结，欢迎点击右下角订阅 rss。\n  address: Guangzhou, Guangdong Province, China\n  email: chenxiaowu1994@outlook.com\n```\n\n#### 联系方式\n\n在 `/source/_data` 目录下创建 `contact.yml` 文件将在页面底部生成相应的标签链接，如：\n\n![contact-img][contact-img]\n\n配置内容如下：\n\n``` yml\n- title: github\n  icon: icon-github\n  link: https://github.com/Mrminfive\n- title: email\n  icon: icon-email\n  link: mailto:chenxiaowu1994@outlook.com\n- title: rss\n  icon: icon-rss\n  link: /atom.xml\n```\n\n其中 `title` 表示链接的 `title` 值，`icon` 表示使用css图标，`link` 表示跳转的链接。\n\n`icon` 仅支持如下值：\n\n* `icon-email`: 邮箱\n* `icon-rss`: rss\n* `icon-in`: linkedin\n* `icon-twitter`: twitter\n* `icon-facebook`: facebook\n* `icon-github`: github\n* `icon-zhihu`: 知乎\n* `icon-douban`: 豆瓣\n* `icon-weibo`: 微博\n* `icon-telegram`: telegram\n\n#### 外部链接\n\n在 `source/_data` 目录下创建 `footer_link.yml` 文件将在页面底部生成相应的外部链接列表，如：\n\n![footer-link][footer-link]\n\n配置内容如下：\n\n```\nfriend_links:\n  - name: hexo-theme-skapp\n    desc: hexo-theme-skapp\n    link: https://github.com/Mrminfive/hexo-theme-skapp\n\nbuild_tools:\n  - name: Hexo\n    desc: Blog Framework\n    link: https://hexo.io/\n```\n\n其中 `name` 表示链接的显示值，`desc` 表示链接的 `title` 值，`link` 表示跳转的链接。\n\n该文件中的每一个数组代表一列链接，数据的key 值代表对应该列的标题，如：`friend_links` 对应 `友情链接`，同时允许设置多列链接，只需要在 `hexo-theme-skapp/languages` 下的语言配置中设置好相应的对照值即可。\n\n\n#### 个性化配置\n\n主题使用 sass 预编译样式，笔者将所有基本样式参数封装在 `hexo-theme-skapp/source/scss` 下的 `_theme.scss` 文件文件中：\n\n``` scss\n/**\n * blog theme \n */\n\n$main-color: #19abd6                                !default;\n$main-color--hover: lighten($main-color, 10%)       !default;\n\n$font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,\"PingFang SC\",\"Lantinghei SC\",\"Microsoft Yahei\",\"Hiragino Sans GB\",\"Microsoft Sans Serif\",\"WenQuanYi Micro Hei\",sans           !default;\n\n$main-fc: #666                                      !default;\n$main-fs: 14px                                      !default;\n$main-lh: 1.7                                       !default;\n\n$title-fc: #242f35                                  !default;\n\n$hint-fc: #19abd6                                   !default;\n\n$bgc--main: #fff                                    !default;\n$bgc--bottom: #2d383e                               !default;\n$bgc--footer: #242f35                               !default;\n\n$border-c: #d8e5f3                                  !default;\n\n$transition: .3s                                    !default;\n\n$mq-desktop--wide: 1280px                           !default;\n$mq-desktop: 980px                                  !default;\n$mq-mobile: 736px                                   !default;\n\n$pad: 15px                                          !default;\n\n$z-index--bottom: 1                                 !default;\n$z-index--center: 50                                !default;\n$z-index--top: 100                                  !default;\n```\n\n有兴趣的可以自行修改。\n\n#### 基本使用\n每篇文章的基本配置如下：\n```\ntitle: Hello World \ncover: http://oxnuwmm3w.bkt.clouddn.com/hello-world.jpeg\n# 作者信息，多作者则设置为数组\n# 单作者\nauthor: \n  nick: BruceYJ\n  link: https://www.github.com/BruceYuj\n# 多作者\nauthor:\n  - nick: BruceYJ\n    link: https://www.github.com/BruceYuj\n  - nick: minfive\n    link: https://www.github.com/Mrminfive\n\n# 如果文章为转载文章，需要多加文章出处项\neditor:\n  name: Minfive\n  link: https://www.github.com/Mrminfive\n\n# 首页每篇文章的子标题\nsubtitle: your subtitle\n```\ntitle为文章的标题，cover为文章的首图和缩略图，author为文章的作者信息。\n\n#### 第三方服务\n\n##### 统计\n\n###### 百度统计\n\n主题已集成百度统计，使用百度统计仅需要获取百度统计的脚本id并将其配置到根 `_config.yml` 中：\n\n``` yml\n# Baidu statistic\nbaidu_statistic: ***\n```\n\n###### 谷歌统计\n\n主题已集成谷歌统计，使用谷歌统计仅需要获取谷歌统计的脚本id并将其配置到根 `_config.yml` 中：\n\n``` yml\n# Google statistic\ngoogle_statistic: ***\n```\n\n##### 不蒜子统计\n\n主题使用不蒜了统计文章pv，默认不开启，可在根 `_config.yml` 配置开启:\n\n``` yml\n# Busuanzi\nbusuanzi: true\n```\n\n##### 内容搜索\n\n主题使用 lunr 进行站内检索，暂不支持配置。\n\n##### rss\n\n将如下代码写入根 `_config.yml` 中：\n\n``` yml\n# Feed Atom\nfeed:\n  type: atom\n  path: atom.xml\n  limit: 20\n\n# Sitemap\nsitemap:\n  path: sitemap.xml\n```\n\n##### 评论系统\n\n###### gitalk\n\n主题集成 [gitalk][gitalk] 作为评论功能。开启评论功能需要注册 Github Application，具体请参照 [gitalk文档][gitalk doc]，申请完后在根 `_config.yml` 配置：\n\n``` yml\n# Gitalk\ngitTalk:\n  clientId: ***\n  clientSecret: ***\n  repo: ***\n  owner: ***\n  admin: \n    - ***\n```\n\n###### disqus\n\n主题集成 [disqus][disqus] 作为评论功能。开启此评论功能请注册 Disqus 站点，具体参照官方指引，申请完成后在根 `_config.yml` 配置：\n\n``` yml\n# Disqus\n\ndisqus_shortname: ***\n```\n\n#### 数学公式渲染\n\n主题集成[hexo-math][math]显示数学公式，默认不开启。在主题目录 `_config.yml` 中配置：\n\n```yml\n# Math Equations Render Support\nmath:\n  enable: true\n\n  # Default(true) will load mathjax/katex script on demand\n  # That is it only render those page who has 'mathjax: true' in Front Matter.\n  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.\n  per_page: false\n\n  engine: mathjax\n  #engine: katex\n\n  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.\n  mathjax:\n    # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China\n    cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML\n    # For newMathJax CDN (cdnjs.cloudflare.com) with fallback to oldMathJax (cdn.mathjax.org).\n    #cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML\n    # For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com).\n    #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML\n    # For automatic detect latest version link to MathJax.js and get from Bootcss.\n    #cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML\n\n  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin)\n  # needed to full Katex support.\n  katex:\n    # Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China\n    cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css\n    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China\n    #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css\n    # Bootcss, works great in China, but not so well in other region\n    #cdn: //cdn.bootcss.com/KaTeX/0.7.1/katex.min.css\n```\n\n\n[demo]: http://blog.minfive.com/\n[screenshot]: http://blog.static.minfive.com/other/Skapp.png\n[hexo]: https://hexo.io/zh-cn/\n[gitalk]: https://github.com/gitalk/gitalk\n[gitalk doc]: https://github.com/gitalk/gitalk#usage\n[contact-img]: https://blog.static.minfive.com/other/17-09-17/hexo-theme-skapp-contact.png\n[footer-link]: https://blog.static.minfive.com/other/17-09-17/hexo-theme-skapp-footer.png\n[disqus]: https://disqus.com/\n[math]: https://github.com/hexojs/hexo-math\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrminfive%2Fhexo-theme-skapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrminfive%2Fhexo-theme-skapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrminfive%2Fhexo-theme-skapp/lists"}