Giter Club home page Giter Club logo

hexo-theme-claudia's Introduction

Claudia

Concisely designed & easy to config, match device dark mode, 90+ Lighthouse scoring

Hexo version GitHub issues GitHub license

Demo

English | 简体中文

cover

Changelog

Recent update 11.06.2022

How to Use

Install depend

Install to Hexo blog root directory, Not theme directory

npm install hexo-renderer-pug 
npm install hexo-renderer-dartsass
npm install hexo-generator-search

# if you need RSS, you must be install this plugin
npm install hexo-generator-feed

# Flowchat
npm install hexo-filter-flowchart        
# Math
npm install hexo-renderer-mathjax

User's profile

Configure the file hexo-theme-claudia/_config.yml under the theme profile

user:
  name: 
  avatar: /images/avatar.jpg
  location:
  description:
  footnotes:

# config you SNS
social:
  zhihu:
  twitter:
  facebook:
  linkedin:
  instagram:
  github: haojen

# Page icon
favicon: images/favicon.ico

friend_links:
  - title: Link1
    link: https://www.link1.test.com/

Upper-right navigation bar menu config

 # main menu navigation
 menu:
   Home: /
   About: /about
   Archives: /archives

Sidebar widget config

widgets:
  - tag
  - archive
  - category
  - recent_posts

Comments

1. Utteranc

Documents: https://utteranc.es/

Project repo: https://github.com/utterance/utterances

comment_utteranc:
  enable: true
  repo: Haojen/myBlogRepo # Change to your blog repo

2. Valine

Documents: https://valine.js.org/quickstart.html

comment_valine:
  enable: true
  appId:
  appKey:

Appearance

# 1.light 
# 2.dark
# 3.auto (default, match device appearance setting)
appearance: auto

Code highlighting

  1. Disable the default hexo highlight configuration(modify your _config.yml in root directory of hexo), and then run hexo clean to delete cache
highlight:
  enable: false

Analytics

Google Analytics and Baidu Analytics simple config:

#Baidu Analytics**
ba_track_id: 

#Google Analytics
ga_track_id: 
ga_domain:

Create About Page

Create a new folder about under the source of hexo, and then, create a index.md file and copy the following content into it. also you about.png put in about/ folder

---
title: about
date: 2017-05-31 10:05:56
layout: about
---

My demo blog config

https://github.com/Haojen/Claudia-theme-blog

Other My Project

Buy me coffee ☕️

License

MIT © HAOZHEN MA

hexo-theme-claudia's People

Contributors

haojen avatar jackfromeast avatar koppel-zhou avatar leoashin avatar lvfangren avatar nambers avatar wizardmerlin avatar yihuajack avatar zeroki 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

hexo-theme-claudia's Issues

一些文档的建议

hello,我使用了你的hexo-theme-Claudia主题。但是在使用时发现: 1:中英文文档好像不同步;2: 中文文档中存在一些Markdown语法的小瑕疵(可以的话我会进行pr);3: 在安装完成主题并且按文档进行配置后,运行会报错(存在解析异常)。原因是我的博客项目没安装一些npm包,例如:hexo-renderer-pug,hexo-renderer-sass等。可能有人也会出现这样的错误。文档里可以添加一个 q&a避免这种可能出现的重复问题。

主题设计得很赞!!!!!

修改字体

能不能添加或者说明一下怎么修改主题的字体,感谢(纯小白

关于博文封面图配置

您好,本人初识hexo。不太清楚您的claudia主题如何配置博文封面图,仅是看到修改img属性。不是很清楚在哪里修改,能麻烦您详细说明一下吗。O(∩_∩)O谢谢。

新增评论系统

这里hexo新人,想添加畅言评论,但不知作者将comment相关的jacman写在了哪里?求指教,谢谢!

诚邀合作事宜

很喜欢你博客的风格,可否为Cabloy-CMS开发一套(免费/付费)主题,然后发布到Cabloy商店里面?

CabloyJS:是一款顶级NodeJS全栈业务开发框架, 基于KoaJS + EggJS + VueJS + Framework7
Cabloy-CMS:是基于CabloyJS全栈业务开发框架开发的动静结合的CMS,可以快速构建企业网站、博客、社区、商城等Web应用
Cabloy商店:包括品类广泛的各类模块,满足不同场景的开发需求

CabloyJS介绍:https://cabloy.com/zh-cn/articles/introduce.html
Cabloy-CMS介绍:https://cabloy.com/zh-cn/articles/cms-introduce.html

Cabloy商店运营模式:https://cabloy.com/zh-cn/articles/store.html

文章下的简介

希望可以在
文章最开始的

---
---

块中增加个description属性自定义文章下的简介

文章中代码块出现变形

image

使用```在md中插入代码块,hexo g生成的html界面代码块被处理为居中样式,且代码块字体大小不一,完全无法阅读。

关于适配手机端问题,代码块问题,文章省略字数问题

非常感谢作者做出一款如此好看的主题,整体的风格很舒服和简洁。但是有些地方希望作者可以改进一下。

代码块问题:希望能增加一键复制代码块功能,并且希望可以修改原有的代码块样式,原有的样式在谷歌浏览器上总觉得有点粗糙(个人感觉)
图片
例如可以这样
图片

手机端适配问题:切换为手机端时,发现右侧的功能都隐藏了,比如文章目录功能和个人简介功能,希望手机能增加开启是否隐藏按钮
图片
例如可以这样
图片

文章字数省略问题:希望可以自己设置,默认的字数省略有点太多了。在手机端显示不太好看。
图片

图片

post-cover图能不能自适应啊?
为了缩略图好看要特地去修改分辨率, 结果到移动端又不一样了
小问题. 只是有时候强迫症难受

一些希望增加的东西

这个theme整体都挺不错的,不过

  1. 希望支持像链接图片一样链接博文,如![x](/image/xx.jpg)这个是图片
    然后希望可以用这种[x](/xxx.md)来链接一个在_post目录下的博客,不过这个可能有点难
  2. 然后好像页面会出现一会中文一会英文的情况,就右上角的工具栏
  3. 字数统计
  • 希望增加disqus评论支持
  • 博文的head里的meta description为博客的简介(即前面的那部分)以获得更好的seo,并在google分析不启用的情况下删除那部分代码
  • 在处理代码段前先转义,否则可能出现错误

关于来比力评论系统

已经配置好来比力配置系统,然而每次当进去一次可以看到来比力加载完后,再进一次就看不到了。也看不到评论系统了。是主题的问题,还是来比力的问题呢。

搜索功能

前辈您好,首先非常感谢这次分享,研究这个主题很久,发现搜索功能只有在HOME那个页面有效。我不是主学前端...能力也有限...只能给提出来

readme使用声明建议

在执行readme里安装时报错

D:\hexo\hexo>npm install --save hexo-renderer-sass
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path D:\hexo\hexo\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: D:\Anaconda3\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                                ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (child_process.js:295:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
npm ERR! gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! command "D:\\nodejs\\node.exe" "D:\\hexo\\hexo\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd D:\hexo\hexo\node_modules\node-sass
npm ERR! gyp ERR! node -v v12.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:

怀疑是依赖库版本已经不再支持了?或者是我npm源配置或版本问题?

代码高亮失败

已经照着README.md中的要求,将根目录下的highlight那些选项设置成false。
TIM截图20190730224703

但是预览时发现代码全乱了。。。

请问您有解决方案吗

锚点不跳转问题可解否?

首先感谢一下大神的模板claudia. 唯简唯美. 可是玩下来问题还是有一点儿的, 我分条陈述一下, 本条issue想请大神解决一下 锚点不跳转 问题.
(我试了一上午, 貌似真的不行)

thks in advanced.

友情链接

能不能加个放友情链接的侧边栏
image
比如这种(在别的博客截的

请求添加Valine评论系统支持

Is your feature request related to a problem? Please describe.
主题真的好棒!现在想从其他主题迁移过来但是之前的评论系统用的是valine……

Describe the solution you'd like
恳请大佬支持一下Valine https://valine.js.org
另外我觉得valine的优点就是不需要github或者其他第三方登录,评论可以更快捷一点

Describe alternatives you've considered
None

Additional context
再次感谢大佬开源这么棒的主题!

problem related to inline math

Hi,
I like the theme, Caudia.
It is the concisest theme I have ever seen.

But, it would be better to support the in-line math
I have taken a long time solving it, but without any solution could working
I feel defeated.
Here the sample is:
$\gamma = \cfrac{1}{n_{jm}} \sum_{x_i \in R_{i,j}}y_i - F_{m-1}(x_i)$
It works fine in my typora, but fails in Caudia

Demo request exception

hello, I looked at the demo of the theme, and I found that when the mouse moved in math.jpg Network will have multiple requests.

image

用不了

我下载下来在配置文件中主题取什么名字啊

如何使用评论系统?

你好,我是一个 hexo 新人,非常喜欢这个主题,我想请教一下,这个主题如何添加评论系统呢?如 gitment 、来必力。

博客封面图片设置

你好,请问博客封面设置的字段名称?可否给一下可用的相关的Front-matter?

能够在下一个版本中提供归档布局?

尝试了一下在menu中设置归档(archives)但是效果不太好.

本着简单, 优雅的原则, 大神能否在下个版本中fix&提供归档的layout呢?

大致页面效果是:(当然以您的标准为主):
2017年

  • ariticle1 时间
  • article2 时间
    2016年
  • article1 时间
  • article2 时间

博客加载pdf问题。

博客文章插入文章 pdf 只显示连半页都不到。看了半天没看到是哪里的问题。

关于代码高亮

在我的博客上出现了这样一个问题
asdasd.png

不知道怎么解决啊

新手求助

我 clone 了您的主题到本地 myusername.github.io/blog/themes/ 路径下,我改了个名字为 Claudia
,对相应的内容按照您写的步骤进行修改,然后 git add . 接着 git commit -m "update theme",但是用 git push 命令同步到我的 GitHub 网络端上,却发现如下的问题。
$ git clone https://github.com/Haojen/hexo-theme-Claudia themes/Claudia
$ git add .
$ git push
remote: Permission to Haojen/hexo-theme-Claudia.git denied to LePingKYXK. fatal: unable to access 'https://github.com/Haojen/hexo-theme-Claudia/': The requested URL returned error: 403

我同时发现,我的 https://github.com/LePingKYXK/LePingKYXK.github.io/tree/master/blog/themes 目录下有一个 Claudia 文件夹,却无法打开…… 不知道是不是应该删掉原始的(也就是您的 theme 文件夹中的) .git 和 .gitignore 文件?然后再 git push?

menu:
Home: / #页面所在的路径

请问这里“页面所在的路径 ” 是指的什么? 本地计算机上的路径? 还是 GitHub 上对应的 username.github.io/blog/ 路径?

主页下方添加备案信息

您好,非常高兴发现了这个好看的主题。在配置的时候遇到一个问题,就是需要在主页下方显示备案链接,请问这个需要怎么做呢?

installed search button failed

Describe the bug
已经配置了search,清理,生成,启动,并用chrome无痕模式,页面就是没有搜索按钮。

  1. npm install hexo-generator-searchdb --save
  2. _config.yml ,search.json/search.xml 都试了
search:
  path: search.json
  field: post
  format: html
  limit: 10000
  1. themes/Claudia/_config.yml
local_search: 
  enable: true
  trigger: auto
  top_n_per_article: 1
  1. 清理,生成,启动
hexo clean
hexo g
hexo s

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.