Quick Start

tools

base58: https://www.metools.info/code/c74.html

mp4 -> gif : https://www.freeconvert.com/zh/convert/mp4-to-gif

自己配置的其它开源项目

gitalk

本站配置

博客框架 jekyll

采用主题： agusmakmun ，或者叫stack-problems

通过博主enovella_发现的这个简洁主题

其它主题推荐 huxpro, chirpy

直接去jekyll下载博客模板 , 之后只需要在模板修改内容, git上传即可

图床问题？

使用 public repository + page + raw.githubusercontent.com

图片链接替换

./img/ 
==>
https://raw.githubusercontent.com/redqx/redqx.github.io/master/_posts/img/ 

test img show 图床测试

avatar-13

lsp

ssh上传

为什么不用https,这个老是出现问题.

好吧也不能这样说,应该说 ssh出现问题就用https

git remote set-url origin git@github.com:i1oveyou/i1oveyou.github.io.git

upload

git add .
git commit -m "happy every day"
git push -u origin master

toc 文章目录配置

_layouts\post.html

https://github.com/allejo/jekyll-toc

https://www.70apps.com/blog/code/2021/10/27/JEKYLL_TOC_THEME.html

只需要在xx出添加一句<div class="content_toc"></div>

如下所示

<div class="content_toc"></div>

<div class="content">
  <div class="post"></div>
  <div class="share-page">

</div>


</div>

avatar头像配置

_layouts\default.html

<a href="/"><img class="profile-avatar" src="/static/img/avatar.jpg" height="75px" width="75px" /></a>
===>改为
<a href="/"><img class="profile-avatar" src="/static/img/avatar.jpg" height="120px" width="120px" /></a>

static\css\main.css

div.col-sm-3 img.profile-avatar {
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  -ms-border-radius: 150px;
  -o-border-radius: 150px;
  margin-left: auto;
  margin-right: auto;
}
      
 ===>改为 

div.col-sm-3 img.profile-avatar {
/*  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  -ms-border-radius: 150px;
  -o-border-radius: 150px;*/
  margin-left: auto;
  margin-right: auto;
}

字体

在 _layouts\default.html

---
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/img/favicon.ico"/>
    <link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css" media="print" onload="this.media='all'"> => 添加部分

ps: 图床使用的是他人的cdn加速，可能会挂掉

在 static\css\main.css

body {
  font-family: "LXGW WenKai Screen","Roboto Condensed", Arial, sans-serif !important;
  background: url("/static/img/subtle_dots.png");
  line-height: 1.5em;
  font-weight: 300;
  font-size: 16px;
  color: #666;
}

去掉评论

_layouts\post.html

注释最后的代码

<!-- <div class="disqus-comments">
  <div id="disqus_thread"></div>
  <script type="text/javascript">
    /* <![CDATA[ */
    var disqus_shortname = "stackproblems";
    var disqus_identifier = "https://redqx.github.io_关于本站搭建";
    var disqus_title = "关于本站搭建";

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    /* ]]> */
  </script>
</div> -->

_layouts\default.html

        <footer>
          <div id="weather-info">
              <p><b> 
                <span>今日天气: </span>
                <span id="weatherData">正在加载今日天气...</span>
                <span  id="weatherTags">正在加载今日天气....</span>
              </b></p>
          <div>
        </footer>

修改字体16px static\css\main.css

footer {
  border-top: 1px solid #F7F1F1;
  width: 100%;
  height: 10px;
  margin-top: 10px;
  margin-bottom: 3em;
  padding-top: 10px;
  color: #C2C2C2;
  font-size: 16px;
  bottom: 0;
  padding-bottom: 10px;
}

site.about修改诗词

_layouts\default.html

          <h1 class="author-name">Den9Qux1ang</h1>
          
            <div class="profile-about">
              你的对手是 神圣兽国 游尾郡窝窝乡 独行族妖侠 蛮吉
            </div>
          

修改为

          <h1 class="author-name">&copy; Den9Qux1ang</h1>
          <p class="jrsc-info"><b> 
            <span>今日诗词: </span>
            <span class="jinrishici-sentence">正在加载今日诗词....</span>
          </b></p>

去掉share功能

<div class="content">
  <div class="post"></div>
  <!-- <div class="share-page">

</div>

 -->注释
</div>

添加评论Gitalk

参考

_congfig.yml

# Gitalk  评论功能
gitalk: 
  enable: true    #是否开启Gitalk评论
  clientID: ***    #生成的clientID，下面会讲
  clientSecret: *** #生成的clientSecret
  repo: redqx.github.io    #仓库名称
  owner: redqx    #github用户名
  admin: redqx
  distractionFreeMode: false #是否启用类似FB的阴影遮罩

\_layouts\post.html

<!-- Gitalk 评论 start  -->
<style>
    .markdown-body {
        font-family: "LXGW WenKai Screen","Roboto Mono", "monospace", sans-serif !important;
    }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
  var title = location.pathname.substr(0, 50);
  var gitalk = new Gitalk({
    clientID: 'Ov23liqnOuEzjh091rug',
    clientSecret: 'dc0f8f44b2d6c5b6c9dff2744e7822cd16b014e2',
    repo: 'redqx.github.io',
    owner: 'redqx',
    admin: ['redqx'],
    id: title,
    distractionFreeMode: false 
  });
  gitalk.render('gitalk-container');
</script>

<!-- Gitalk end -->

© Den9Qux1ang

关于本站搭建

TOC