Website Configuration and Trouble Shooting

Fri, Mar 12, 2021 3-minute read

🎏 Website Configuration

The website is powered by Hugo, employing the theme Anatole. It’s a beautiful template, and I would like to customize the setup a bit to reflect personal preference. I am a newcomer to the language css, js, basically I open the website in the chrome and use the developer tools to get a hint on which parameter changing which feature, a lot of functions are still under development. I will keep recording the changes I have made, in case I am going to modify it later or someone else wants a similar setup.

1. font (customer.css)

content font size: .p(16px);
post title font size: .post .post-title(20px); .post .post-content(20px);
post title not capitalized: add code below to .css file
```
h3 {
    text-transform: none !important;
}
```

2. layout (customer.css)

sidebar width: .content (70%), .page-top(70%); @media(30%), .sidebar(30%);

category position (single.html): move category to the top of a post

<!--<div class="post-title">-->
   <!--<div class="info">-->
       <!--<em class="fas fa-calendar-day"></em>-->
       {{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
  <!-- </div>
<!-- </div>

current post content layout:

.content {
  height: auto;
  float: right;
  /* width: 70%;
  margin-top: 60px; */
  width: 60%;
  margin-top: 60px;
  margin-right: 5%;
}

3. comment (.md)

make utterance comment box show up in each post: need to set type= “post” in the .md file FrontMatter, and add “post” into mainSections in config.toml;

4. read more (index.html)

add code below in the /anatole/layouts/index.html, between code chuck ‘post-content’ and ‘post-footer’

<!--  <div class="post-content"> <div>  -->

{{- if .Truncated -}}
<a href='{{ .RelPermalink }}'>&hellip; Read more</a>
{{- end -}}

<!--  <div class="post-footer"> <div> -->

5. render .ipynb on Hugo

install nbconvert
create a text cell on top of the .ipynb file, add metadata (Front Matter) that you would normally setup for your hugo posts to the text cell.
upload .ipynb file to your website …/content/posts/ folder
go to command line under this folder path, render .ipynb to markdown by typing
```
jupyter nbconvert --to markdown <filename>.ipynb
```
now you would see a <filename>.md file, you can make further changes

6. customize image size

refer to this support post, in order to adjust the size or alignment of the image in a post, we can use either html tag <img>

<center><img src="/images/your-image.jpg" width="800" height="100"></center>

Or hugo figure shortcode

{{<  figure src="/images/your-image.jpg" class="alignright" width="800" height="100"  >}}

7. render math symbols using KaTex

sometimes if the _ subscript can not be rendered, consider using \_ instead. for example,

$$
x = ( \underbrace{0...0}_{N_1}, \underbrace{0...0}_{N_2} )^T #\underbrace{}_{} not working
$$

$$
x = ( \underbrace{0...0}\_{N_1}, \underbrace{0...0}\_{N_2} )^T #\underbrace{}\_{} works
$$

🎏 Trouble Shooting

1. conda not found (Anaconda)

This error occurs when running conda command on terminal after upgrading MacOS to Catalina. Anaconda website offers two options to reinstall the old anaconda configurations that is supposed to be in the filepath Desktop/Relocated Items. For me I do not need to recover the previous setup or environment, so the solution is simple, re-download Anaconda (at the moment it’s Anaconda Individual Edition), then restart terminal and type conda list, if the screen displays packages information, then mission accomplished! Another useful reference can be found here.

2. permission denied (publickey) (Github)

When push a new commit to the remote Github repository, especially the first time, the error occurs. In my case, the problem is solved by following the instructions on the Github webstie.

3. unable to load shared object … systemfonts.so (R)

After updating MacOS to Catalina and updating R packages and R studio (3.6.1) to the latest version, I run into the below error when I try to call the package KableExtra in the .Rmd file.

Error: package or namespace load failed for ‘kableExtra’ in dyn.load(file, DLLpath = DLLpath, …): unable to load shared object ‘/…/library/systemfonts/libs/systemfonts.so’: …

Solution: refer to this Github issue, download and install XQuartz, then restart Mac.

Xiang Li