Theme template completed

Signed-off-by: Haolong Wang <109599952+gsmark36@users.noreply.github.com>
gsmark36 · Oct 29, 2024 · 8a0ee77 · 8a0ee77
1 parent bbcd25c
commit 8a0ee77
Show file tree

Hide file tree

Showing 18 changed files with 192 additions and 215 deletions.
diff --git a/docs/404.md b/docs/404.md
@@ -1,10 +1,11 @@
 ---
 layout: default
-title: 404
+title: "404"
+permalink: /404.html
 ---
 
 # 404 | Page not found
 Something went wrong bro... Please turn back
 
-<hr style="height:40px; border:none;">
+<hr style="height:50px; border:none;">
 <img src="{{ site.url }}/assets/cactus.png" style="width: 300px; height: 300px; opacity: 0.80; margin-left: -25px">
diff --git a/docs/README.md b/docs/README.md
@@ -1,60 +1,46 @@
 # Researcher
 
-### [Demo Website](http://ankitsultana.com/researcher)
+### [Demo Page](http://gsmark36.github.io)
 
-A clean, single column, monospace resume template built for jekyll
+This is a jekyll theme template based personal website template based on **Researcher** and **Cactus**. You can find them on GitHub. 
 
-### Installation
+- [Researcher](https://github.com/bk2dcradle/researcher)  
+- [Cactus](https://github.com/chrismwilliams/astro-theme-cactus)  
 
-Simply fork the repository and edit away.
+### Directory
 
-#### Installation via remote themes
-
-* Just setting `remote_theme: ankitsultana/researcher@gem` in `_config.yml` should work. Although in that case, I am not sure how
-you would build your site locally for testing. If you know how, open up an issue and let me know.
-* For more info, [refer this](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/).
-
-### Customization
-
-* You can edit the `.md` (markdown) files as you see fit. You can also add some other markdown file, say `foo.md` in the root directory of the repository. It will then be accessible like so `{{ url of your website }}/foo`.
-
-* You can of course remove `contact.md` if you don't want it
+```
+.
+├── _includes       # Components loaded in layout templates
+├── _layouts        # Layout templates
+├── _posts          # Blog post articles
+├── _sass           # SASS files
+├── assets          # Media assets
+├── css             # CSS files
+├── _config.yml       # Jekyll configuration file (Important!)
+├── 404.md            # 404 page
+├── blog.md           # Blog page
+├── contact.md        # Contact details
+└── index.md          # Homepage/index
+```
 
-* To set the heading, edit the `title` variable in `_config.yml`
+### Custom design
 
-* To edit the `links` mentioned on the navigation bar, you can edit `_config.yml`. For example:
+- Add or remove `.md` files as you need. Added page `example.md` will be accessible via link `{{ site.url }}{{ site.baseurl }}/example`.
+- Use `permalink` to overwrite page address.
+- Edit `title` variable in `_config.yml` to change **top heading**.
+- Edit `nav` variable in `_config.yml` for the content of navigation bar.
 
 ```
 nav:
- - name: "About"
-   link: "/researcher/"
- - name: "Resume"
-   link: "resume.pdf"
+ - name: "Home"
+   link: "/"
+ - name: "Blog"
+   link: "/blog"
  - name: "Contact"
-   link: "contact"
-```
-
-* You can change the accent (color of hyperlinks) by editing the `accent` variable in `_sass/vars.scss`
-
-* You can setup google analytics, by setting `tracking_id` in `_config.yml`
-
-* To add a profile picture, make sure to give the image tag the class `profile-picture`. In other words,do it like so:
-
-```html
-<img class="profile-picture" src="sherlock.jpg">
+   link: "/contact"
 ```
 
-* You can remove/customize the footer as you like by setting the
-appropriate variables in `_config.yml`
-
-* (New in v1.2.0) You can add institute logo at the top, by setting `ins_logo` in `_config.yml`. If you want
-to adjust the logo's size, try setting `max-height` in `#ins-logo` in file `./_sass/_style.scss` to the desired
-value
-
-![Institute Logo Image Sample](https://github.com/ankitsultana/assets/raw/master/ins-logo-sample.png)
-
-**Note:** Customizing the accent color might cause merge conflicts if you later try to merge from `bk2dcradle/researcher` to fetch updates/patches etc. (applicable only if you have forked).
-
-### License
-
-[GNU GPL v3](https://github.com/bk2dcradle/researcher/blob/gh-pages/LICENSE)
+- Add or change global variables in `_sass/vars.scss`. This file includes basic colors for the template.
+- Create image tags with class `profile-picture` in markdown files to add profile pictures. 
+- Edit the footer content by changing `footer_text` variable in `_config.yml`.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -1,5 +1,6 @@
 title: Haolong Wang
-#url: "https://haolongwang.dev"
+#url: "https://gsmark36.github.io"
+#baseurl: "/"
 
 highlighter: rouge
 markdown: kramdown

diff --git a/docs/_includes/toc.html b/docs/_includes/toc.html
@@ -1,6 +1,6 @@
 
 <div class="toc">
-    <h2 style="font-size: 18px; color: #272727e7; font-size: 20px;">Table of contents</h2>
+    <h2 style="font-size: 18px; color: #272727e7; font-size: 20px;">Table of Contents</h2>
     {% capture toc_content %}
     <ul>
         {% assign toc_flag = false %}

diff --git a/docs/_layouts/blog.html b/docs/_layouts/blog.html
@@ -18,8 +18,8 @@
     <div class="wrapper">
         <!-- 导航栏 -->
         <div class="navbar container">
-            <div id="icon" class="alignable pull-left" style="margin-right: 10px;">
-                <img src="{{ site.url }}/assets/plant.png" alt="icon" style="width: 90px; height: 90px; margin-top: -15px; opacity: 0.80;">
+            <div id="icon" class="alignable pull-left" style="margin-left: -15px;">
+                <img src="{{ site.url }}/assets/plant.png" alt="icon" style="width: 90px; height: 90px; margin-right: 10px; margin-top: -15px; opacity: 0.80;">
             </div>
             <a id="author-name" class="alignable pull-left" href="{{ site.url }}">
                 {{ site.title }}
@@ -39,26 +39,33 @@
             </ul>
         </div>
         <div style="clear:both"></div>
-        <hr style="height:40px; border:none;"> <!-- 分隔线 -->
+        <hr style="height:60px; border:none;"> <!-- 分隔线 -->
 
         <!-- 页面内容 -->
         <div class="container content">
             {% assign title_parts = page.title | split: '|' %}
             {% assign blog_title = title_parts | first | strip %}
             <h1>{{ blog_title }}</h1>
-            <hr style="height:5px; border:none;"> <!-- 标题正文分隔线 -->
+            <hr style="height:0px; border:none;"> <!-- 标题正文分隔线 -->
             <ul>
                 {% for post in site.posts %}
-                <li style="display: flex; align-items: flex-start; margin-bottom: 30px; margin-left: -18px;">
-                    <small style="font-size: 16px; color: #272727de; margin-right: 50px; white-space: nowrap;">{{ post.date | date: "%d %b %Y" }}</small>
-                    <a href="{{ post.url }}" style="font-size: 17px; color: #272727de; text-decoration: underline; display: block; text-align: left;">
-                        {{ post.title }}
-                    </a>
-                </li>
+                    {% assign post_year = post.date | date: "%Y" %}
+                    {% if current_year != post_year %}
+                        {% assign current_year = post_year %}
+                        <h2 style="font-weight: bold; font-size: 23px; margin-left: -18px; margin-bottom: 20px;">
+                            {{ current_year }}
+                        </h2>
+                    {% endif %}
+                    <li style="display: flex; align-items: flex-start; margin-bottom: 24px; margin-left: -18px;">
+                        <small style="font-size: 16px; color: #272727b7; margin-right: 50px; white-space: nowrap;">{{ post.date | date: "%d %b %Y" }}</small>
+                        <a href="{{ post.url }}" style="font-size: 17px; color: #272727de; text-decoration: underline; display: block; text-align: left;">
+                            {{ post.title }}
+                        </a>
+                    </li>
                 {% endfor %}
             </ul>
         </div>
-        <hr style="height:40px; border:none;">
+        <hr style="height:60px; border:none;">
 
         <!-- 页脚 -->
         {% if site.footer == true %}

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -18,8 +18,8 @@
     <div class="wrapper">
         <!-- 导航栏 -->
         <div class="navbar container">
-            <div id="icon" class="alignable pull-left" style="margin-right: 10px;">
-                <img src="{{ site.url }}/assets/plant.png" alt="icon" style="width: 90px; height: 90px; margin-top: -15px; opacity: 0.80;">
+            <div id="icon" class="alignable pull-left" style="margin-left: -15px;">
+                <img src="{{ site.url }}/assets/plant.png" alt="icon" style="width: 90px; height: 90px; margin-right: 10px; margin-top: -15px; opacity: 0.80;">
             </div>
             <a id="author-name" class="alignable pull-left" href="{{ site.url }}">
                 {{ site.title }}
@@ -39,13 +39,13 @@
             </ul>
         </div>
         <div style="clear:both"></div>
-        <hr style="height:40px; border:none;"> <!-- 分隔线 -->
+        <hr style="height:60px; border:none;"> <!-- 分隔线 -->
 
         <!-- 页面内容 -->
         <div class="container content">
             {{ content }}
         </div>
-        <hr style="height:40px; border:none;">
+        <hr style="height:60px; border:none;">
 
         <!-- 页脚 -->
         {% if site.footer == true %}

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
@@ -18,8 +18,8 @@
     <div class="wrapper">
         <!-- 导航栏 -->
         <div class="navbar container">
-            <div id="icon" class="alignable pull-left" style="margin-right: 10px;">
-                <img src="{{ site.url }}/assets/plant.png" alt="icon" style="width: 90px; height: 90px; margin-top: -15px; opacity: 0.80;">
+            <div id="icon" class="alignable pull-left" style="margin-left: -15px;">
+                <img src="{{ site.url }}/assets/plant.png" alt="icon" style="width: 90px; height: 90px; margin-right: 10px; margin-top: -15px; opacity: 0.80;">
             </div>
             <a id="author-name" class="alignable pull-left" href="{{ site.url }}">
                 {{ site.title }}
@@ -39,7 +39,7 @@
             </ul>
         </div>
         <div style="clear:both"></div>
-        <hr style="height:40px; border:none;"> <!-- 分隔线 -->
+        <hr style="height:60px; border:none;"> <!-- 分隔线 -->
 
         <!-- 页面内容 -->
         <div class="container content">
@@ -51,7 +51,7 @@
             {% include toc.html %}
         </aside>
 
-        <hr style="height:40px; border:none;">
+        <hr style="height:60px; border:none;">
 
         <!-- 页脚 -->
         {% if site.footer == true %}

diff --git a/docs/_posts/2022-5-15-test-post-4.md b/docs/_posts/2022-5-15-test-post-4.md
@@ -0,0 +1,23 @@
+---
+layout: post
+title:  "One page test article"
+date:   2022-5-15 18:18:27 +0800
+---
+
+# Title 1
+
+## Title 2
+
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+---
+
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
+
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
diff --git a/docs/_posts/2023-11-6-test-post-3.md b/docs/_posts/2023-11-6-test-post-3.md
@@ -0,0 +1,23 @@
+---
+layout: post
+title:  "One page test article"
+date:   2023-11-6 18:18:27 +0800
+---
+
+# Title 1
+
+## Title 2
+
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+---
+
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
+
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
diff --git a/docs/_posts/2024-10-26-welcome-to-jekyll.md b/docs/_posts/2024-10-26-welcome-to-jekyll.md
@@ -1,9 +1,9 @@
 ---
 layout: post
-title:  "Test article title 1"
+title:  "Welcome to Jekyll!"
 date:   2024-10-26 18:18:27 +0800
-categories: jekyll update
 ---
+
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
 
 Jekyll requires blog post files to be named according to the following format:
@@ -14,12 +14,13 @@ Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit number
 
 Jekyll also offers powerful support for code snippets:
 
-	def print_hi(name)
-	  puts "Hi, #{name}"
-	end
-	print_hi('Tom')
-	#=> prints 'Hi, Tom' to STDOUT.
-
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
 
 Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
 

diff --git a/docs/_posts/2024-7-3-test-post-2.md b/docs/_posts/2024-7-3-test-post-2.md
@@ -0,0 +1,23 @@
+---
+layout: post
+title:  "One page test article"
+date:   2024-7-3 18:18:27 +0800
+---
+
+# Title 1
+
+## Title 2
+
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+---
+
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
+
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+